إن إنشاء صفحة ثابتة تحوي نموذج الإتصال يعتبر من أساسيات إنشاء المدونة وفي نفس الوقت هي خطوة ظرورية تقربك لقبول برنامج أدسنس وذلك يعتبر كموافقة منك على شروط البرنامج
لكن مانقدمه هنا نموذج إتصال ديناميكي بحيث يمكن إستغلاله لإنشاء أكثر من صفحة فمثلا - صفحة لطلب الإنظمام للمدونة - أو يمكنك إنشاء صفحة إتصال لكن تطلب فيها بعض المعلومات من المستخدم إلى غير ذلك من الإستخدامات..فهي بالضبط صفحة اتصال على Blogger متعددة الإستخدامات.
لمحة عن الأداة
لا تقلق من ناحية الخصوصية فهي نفسها أداة -الإتصال- الخاصة بالبلوجر الفرق الوحيد أنها متعددة الإستخدامات أي يمكن إعادة إستخدامها فقط من خلال ضبط أكواد html الخاصة بالنموذج وصياغة محتواه ليتناسب مع ماتحتاجه من المتصل بك.
ووجب التنويه أن هذه الأداة معروضة في بعض المدونات لكنها لم تكن تعمل بشكل صحيح فقام -فريق العمل- بفك التشفير وإعادة ضبطها وإعطائها شكل عصري وإنشاء الله لن تواجهوا أي مشكلة في تركيبها كما انه يمكن تحميل أكواد الإضافة الأصلية من الملحقات (بدون تشفير أو ضغط) للإطلاع على محتوى السكريبت المستخدم.
طريقة تركيب الأداة
<div class="contact-form-box">
<div class="form-titel">
مرحبا بك عزيزي المستخدم، إن كنت مهتما بالمحتوى الذي نقدمه وتريد الإنظمام لفريق العمل فنحن نسعد بإنظمامك معنا فقط قم بمراسلتنا حالا.</div>
<form id="us_contact" name="contact-form">
<div class="us_line">
<input autocomplete="off" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<label class="co-textfield_label" for="ContactForm1_contact-form-name">
<i aria-hidden="true" class="fa fa-user-circle"></i>
الإسم الكامل
</label>
</div>
<div class="us_line">
<input autocomplete="off" id="ContactForm1_contact-form-email" name="email" required="" type="text" value="" />
<label class="co-textfield_label" for="ContactForm1_contact-form-email">
<i aria-hidden="true" class="fa fa-at"></i>
البريد الإلكتروني
</label></div>
<div class="us_line inline">
<label for="ContactForm1_contact-form-gender">
<i aria-hidden="true" class="fa fa-mars"></i>
الجنس:</label>
<select id="ContactForm1_contact-form-gender"><option name="gender" selected="" value="Male">ذكر</option><option name="gender" value="Female">أنثى</option></select></div>
<div class="us_line inline">
<label for="ContactForm1_contact-form-age">
<i aria-hidden="true" class="fa fa-calendar-o"></i>
العمر:</label>
<input id="ContactForm1_contact-form-age" max="30" maxlength="2" min="1" name="age" placeholder="0" required="" type="number" value="" /></div>
<div class="us_line">
<input autocomplete="off" id="ContactForm1_contact-form-domicele" name="domicele" required="" type="text" value="" />
<label class="co-textfield_label" for="ContactForm1_contact-form-domicele">
<i aria-hidden="true" class="fa fa-map-marker"></i>
مكان الإقامة
</label></div>
<div class="us_line">
<input autocomplete="off" id="ContactForm1_contact-form-mobile" name="mobile" required="" type="text" value="" />
<label class="co-textfield_label" for="ContactForm1_contact-form-mobile">
<i aria-hidden="true" class="fa fa-phone"></i>
رقم الهاتف (مرفوق بالرمز الدولي)
</label></div>
<div class="us_line">
<input autocomplete="off" id="ContactForm1_contact-form-urlfb" name="urlfb" required="" type="text" value="" />
<label class="co-textfield_label" for="ContactForm1_contact-form-urlfb">
<i aria-hidden="true" class="fa fa-coffee"></i>
حساب التواصل الإجتماعي
</label></div>
<div class="us_line">
<input autocomplete="off" id="ContactForm1_contact-form-urlby" name="urlfb" required="" type="text" value="" />
<label class="co-textfield_label" for="ContactForm1_contact-form-urlby">
<i aria-hidden="true" class="fa fa-copyright"></i>
رابط لمعاينة أعمالك
</label></div>
<div class="us_line inline">
<label for="ContactForm1_contact-form-jobs">
<i aria-hidden="true" class="fa fa-briefcase"></i>
التخصص:</label>
<select id="ContactForm1_contact-form-jobs">
<option name="jobs" selected="" value="مترجم">مترجم</option>
<option name="jobs" value="كاتب">كاتب</option>
<option name="jobs" value="مصمم">مصمم</option>
<option name="jobs" value="مبرمج">مبرمج</option>
<option name="jobs" value="رفع ملفات">رفع ملفات</option>
<option name="jobs" value="ادمين للصفحة">ادمين للصفحة</option>
<option name="jobs" value="ادمين للموقع">ادمين للموقع</option>
</select>
</div>
<div class="us_line inline">
<label for="ContactForm1_contact-form-lvl">
<i aria-hidden="true" class="fa fa-dashboard"></i>
مستوى الخبرة:</label>
<select id="ContactForm1_contact-form-lvl">
<option name="lvl" selected="" value="لا شيء">لا شيء</option>
<option name="lvl" selected="" value="مبتدئ">مبتدئ</option>
<option name="lvl" value="ذو تجربة">ذو تجربة</option>
<option name="lvl" value="محترف">محترف</option>
<option name="lvl" value="خبير">خبير</option>
</select>
</div>
<div class="us_line">
<textarea cols="25" id="ContactForm1_contact-form-reason" name="email-message" required=""></textarea>
<label class="co-textfield_label" for="ContactForm1_contact-form-reason">
<i aria-hidden="true" class="fa fa-info"></i>
وصف مختصر عن نفسك
</label></div>
<div class="us_line dn" style="display: none;">
<textarea cols="0" id="ContactForm1_contact-form-email-message" name="email-message" rows="0" style="display: none;"></textarea><input id="ContactForm1_contact-form-submit" style="display: none;" type="hidden" value="Send" /></div>
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</form>
</div>
<style type="text/css">
/*<![CDATA[*/
.contact-form-box{position:relative;background-color:white;max-width:90%;margin:0 auto;padding:0;}.contact-form-box > .form-titel{position:relative;display:block;color:#fff;background:#1165f1;padding:30px 15px;margin:0 -2px;line-height:normal;font-size:15px;font-weight:400;}.contact-form-box form#us_contact{position:relative;overflow:hidden;text-align:start;padding:50px 50px;margin:0 0;}form#us_contact .us_line.dn,form#us_contact #ContactForm1_contact-form-email-message,form#us_contact #ContactForm1_contact-form-submit,form#us_contact .contact-form-error-message-with-border img{display:none!important;}form#us_contact .us_line{position:relative;display:block;width:100%;font-size:13px;color:#444;margin:0 0 30px;padding:0;}form#us_contact .us_line.inline{display:inline-block;text-align:center;width:-webkit-calc(100% / 2.2);width:-moz-calc(100% / 2.2);width:calc(100% / 2.2);float:none;border:0;}form#us_contact .us_line .fa{font-size:15px;color:#1165f1;}form#us_contact .us_line label{padding:0 10px;}form#us_contact .us_line input[type="text"],form#us_contact .us_line textarea{display:block;width:100%;outline:none;background:none!important;font:400 14px sans-serif;line-height:normal;color:#444;border:2px solid #f8f8f8;-webkit-box-shadow:none;-moz-box-shadow:none;-ms-box-shadow:none;-o-box-shadow:none;box-shadow:none;}form#us_contact .us_line input.err,form#us_contact .us_line textarea.err{border-color:#ffbaba!important;}form#us_contact .us_line input[type="text"],form#us_contact .us_line input[type="text"]:valid,form#us_contact .us_line input[type="text"]:hover,form#us_contact .us_line input[type="text"]:active{min-height:50px;padding:0 15px;margin:0;}form#us_contact .us_line textarea,form#us_contact .us_line textarea:valid,form#us_contact .us_line textarea:hover,form#us_contact .us_line textarea:active{resize:none;max-width:100%;width:100%;height:200px;margin:5px 0;padding:15px;}form#us_contact .us_line input[type="text"]:valid,form#us_contact .us_line input[type="text"]:focus,form#us_contact .us_line textarea:valid,form#us_contact .us_line textarea:focus{border:0!important;background:none!important;}form#us_contact .us_line select,form#us_contact .us_line input[type="number"]{cursor:pointer;font-family:inherit;margin:0 5px;padding:10px 20px;border:2px solid #eeeeee;background-color:#eeeeee;color:#444;font-size:14px;line-height:normal;vertical-align:middle;}form#us_contact .us_line input[type="number"]{cursor:default;background:#ffffff;}form#us_contact .us_line input[type="number"]:valid,form#us_contact .us_line input[type="number"]:focus{border-color:#1165f1;}form#us_contact button#sendform{cursor:pointer;font-size:14px;font-family:inherit;font-style:normal;text-transform:none;margin:0;padding:5px 20px;background-color:#1165f1;color:white;border:2px solid #1165f1;}form#us_contact button#sendform:hover{background-color:#ffffff;color:#1165f1;}form#us_contact .us_line .co-textfield_label{display:block;position:absolute;top:10px;left:0;right:0;bottom:0;overflow:hidden;white-space:nowrap;pointer-events:none;text-align:start;height:auto;font-size:14px;background:none;border:0;width:100%;font-family:inherit;}form#us_contact .us_line .co-textfield_label:after{visibility:hidden;position:absolute;right:50%;bottom:0;background-color:#1165f1;width:10px;height:2px;content:'';z-index:2;}form#us_contact .us_line input:valid + .co-textfield_label,form#us_contact .us_line input:focus + .co-textfield_label,form#us_contact .us_line input:active + .co-textfield_label,form#us_contact .us_line label.co-textfield_label.active,form#us_contact .us_line textarea:valid + .co-textfield_label,form#us_contact .us_line textarea:focus + .co-textfield_label,form#us_contact .us_line textarea:active + .co-textfield_label,form#us_contact .us_line label.co-textfield_label.active i{visibility:visible;font-size:12px;top:-10px;color:#1165f1!important;}form#us_contact .us_line input:focus + .co-textfield_label,form#us_contact .us_line textarea:focus + .co-textfield_label{color:#1165f1;}form#us_contact .us_line input:valid + .co-textfield_label:after,form#us_contact .us_line input:focus + .co-textfield_label:after,form#us_contact .us_line textarea:valid + .co-textfield_label:after,form#us_contact .us_line textarea:focus + .co-textfield_label:after{visibility:visible;right:0;width:100%;}form#us_contact .contact-form-success-message-with-border,form#us_contact .contact-form-error-message-with-border,form#us_contact .contact-form-success-message,form#us_contact .contact-form-error-message{background:none;color:black;border:0;bottom:0;margin:0;padding:0;width:100%;height:auto;opacity:1;line-height:normal;font-weight:400;-webkit-box-shadow:none;-moz-box-shadow:none;-ms-box-shadow:none;-o-box-shadow:none;box-shadow:none;}form#us_contact #contact_layout{background:#ffffff;border:0;bottom:0;color:#666;font-size:11px;font-weight:bold;line-height:normal;margin:50px 0 30px;opacity:1;position:relative;text-align:center;}form#us_contact #contact_layout button#closedialog{cursor:pointer;font-family:inherit;font-size:12px;background:none;color:#444;border-width:0 0 2px;border-style:solid;margin:0 0 10px;padding:0 10px;}form#us_contact #contact_layout button#closedialog:hover{border-color:transparent;color:#000000;}form#us_contact .contact_message{background:#fff;padding:10px;color:#333;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}form#us_contact .contact_message b{text-transform:capitalize;font-size:20px;display:block;font-weight:400;}form#us_contact .contact_message p{font-size:12px;margin:15px 0;color:#666;}form#us_contact .contact_message i{position:absolute;top:0;right:0;font-size:24px;margin:10px;}form#us_contact .error_message b,form#us_contact .error_message i{color:#ff7f00;}form#us_contact .error_message button#closedialog{border-color:#ff7f00;}form#us_contact .success_message b,form#us_contact .success_message i{color:#388d80;}form#us_contact .success_message button#closedialog{border-color:#388d80;}form#us_contact .us_line textarea,form#us_contact .us_line select,form#us_contact .us_line input,form#us_contact button#sendform{border:2px solid #f8f8f8;border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}.contact-form-box,.contact-form-box form#us_contact #contact_layout{-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);-moz-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);-ms-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);-o-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);}form#us_contact .us_line input,form#us_contact button,form#us_contact .us_line .co-textfield_label,form#us_contact .us_line .co-textfield_label:after{-webkit-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-timing-function:cubic-bezier(0.4,0,0.2,1);}@media screen and (max-width:768px){.contact-form-box form#us_contact{padding:20px 10px;}.contact-form-box > .form-titel{margin:0 -1px;padding:20px 10px;font-size:13px;}form#us_contact .us_line.inline{display:block;width:100%;}form#us_contact .contact_message b{font-size:14px;}form#us_contact .contact_message p{font-size:11px;}form#us_contact .contact_message i{position:relative;display:block;}}
/*]]>*/
</style>
<script type="text/javascript">/*<![CDATA[*/if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');/*]]>*/</script>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
/*<![CDATA[*/
var blogsid = "0000000000000000", // Your BLOG ID
nameblog = "//exampel.blogspot.com/", // Your BLOG URL, don't copy HTTP: or HTTPS:
successmsgTagB = "لقد تم ارسال طلبك بنجاح",
successmsgTagP = "سوف نسعى جاهدين للرد على طلبك، في غضون 24 ساعة، إن لم يصلك الرد فتواصل معنا على صفحتنا.",
invalidmsgTagB = "مطلوب عنوان بريد إلكتروني صالح",
invalidmsgTagP = "يجب أن تكتب عنوان البريد الإلكتروني الخاص بشكل صحيح.",
notsendmsgTagB = "لم يرسل الطلب",
notsendmsgTagP = "رجاأ أعد المحاولة",
sendingmsg = "جاري الإرسال...",
sendingbtn = "إرسال",
closebtn = "إغلاق",
sett = {
name: "الاسم",
email: "الايميل",
gender: "الجنس",
age: "السن",
domicele: "المسكن",
urlfb: "رابط الفيسبوك",
urlby: "رابط المعاينة",
contact: "الهاتف",
jobs: "العمل",
lvl: "الخبرة",
reason: "لمحة عن نفسك ؟",
br: "\n"
};
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(h(){h w(e){C(f t=3.1J(e),o=0;o<t.m;o++)s(t[o].1K)u t[o].7;u""}h D(){f l=3.5("V");s(l!==x){l.W.X(l)};3.5("a-6-y-Y").7=\'\'}h Z(){f E=\'10\',F=G,11=w("12"),13=w("14"),15=w("16"),17=3.5("18"),19=3.5("a-6-1a").7,1b=3.5("a-6-y").7,1c=3.5("a-6-H").7,1d=3.5("a-6-1e").7,1f=3.5("a-6-1g").7,1h=3.5("a-6-1i").7,1j=3.5("a-6-1L").7,1k=3.5("a-6-I").7,1l=3.5("a-6-y-Y"),1m=3.5("a-6-1M"),j=17.1n("j[z=\'1N\'], j[z=\'1O\'], #a-6-I");f 6=4["1a"]+" : "+19+4["g"]+4["y"]+" : "+1b+4["g"]+4["12"]+" : "+11+4["g"]+4["H"]+" : "+1c+4["g"]+4["1e"]+" : "+1d+4["g"]+4["1g"]+" : "+1f+4["g"]+4["1i"]+" : "+1h+4["g"]+4["J"]+" : "+1j+4["g"]+4["14"]+" : "+13+4["g"]+4["16"]+" : "+15+4["g"]+4["I"]+" : "+1k,K=[].1P.1Q(j,h(1o){u!1o.7});C(f r=0;r<j.m;r++){s(K.m>0){j[r].7.m==0&&(j[r].L.1R(E))}1S{j[r].L.1p(E);F=1T}}s(F){1l.7=6,1m.1U();f 9=3.1q(\'1r\');9.z=\'9\';9.v=\'D\';9.1s=1V;9.1t=h(){D();u G};f l=3.5("V"),1u=3.1W(".J-6-1X");s(l!==x){l.W.X(1u);l.1v(9)}}}f 9=3.1q(\'1r\');9.z=\'9\';9.v=\'1Y\';9.1s=1Z;9.1t=h(){Z();u G};3.5("18").1v(9);f 1w=3.5("a-6-H");1w.1x=h(){A.7.m>2&&(A.7=A.7.20(0,2))};f M=3.1n(".1y j, .1y 21");C(f r=0;r<M.m;r++){M[r].1x=h(){A.L.1p(\'10\')}}"22"!=23 N&&x!=N&&(1z.24="25",1z.26=B,N("")),1A.27("//1B.1C.1D/28?29="+B,2a,B),1A.2b("2c",2d 2e("1E","2f",x,3.5("1E"),{2g:2h,2i:"\\n v\\c\\O\\d k\\c\\2j\\d\\1\\n k\\c\\P\\d\\1\\Q k\\c\\R S-2k\\d\\1\\8/i\\1\\T\\1"+2l+"\\8/b\\1\\U\\1"+2m+"\\8/p\\1\\8/q\\1\\8/q\\1",2n:"\\n v\\c\\O\\d k\\c\\1F\\d\\1\\n k\\c\\P\\d\\1\\Q k\\c\\R S-1G-1H\\d\\1\\8/i\\1\\T\\1"+2o+"\\8/b\\1\\U\\1"+2p+"\\8/p\\1\\8/q\\1\\8/q\\1",2q:"\\n v\\c\\O\\d k\\c\\1F\\d\\1\\n k\\c\\P\\d\\1\\Q k\\c\\R S-1G-1H\\d\\1\\8/i\\1\\T\\1"+2r+"\\8/b\\1\\U\\1"+2s+"\\8/p\\1\\8/q\\1\\8/q\\1",2t:"1I 2u 2v 2w K.",2x:"2y 2z",2A:B,2B:"2C",2D:"2E",2F:"1I",2G:"2H",2I:"2J://1B.1C.1D/J-6.2K"},"2L"))})();',62,172,'|x3e||document|sett|getElementById|form|value|x3c|button|ContactForm1_contact||x3d|x27||var|br|function||input|class|ele|length|x3cdiv|||div||if||return|id|getselect|null|email|type|this|blogsid|for|closedialog|classerr|anyFilled|false|age|reason|contact|empty|classList|inputerr|BLOG_attachCsiOnload|x27contact_layout|x27contact_message|x3ci|x27fa|fa|x3cb|x3cp|contact_layout|parentNode|removeChild|message|generate|err|_o|gender|_f|jobs|_s|lvl|_u|us_contact|_e|name|_t|_c|_a|domicele|_n|urlfb|_v|urlby|_m|_b|_l|_i|querySelectorAll|el|remove|createElement|BUTTON|innerHTML|onclick|svg|appendChild|ageinput|oninput|us_line|window|_WidgetManager|www|blogger|com|ContactForm1|x27error_message|exclamation|triangle|Message|getElementsByName|selected|mobile|submit|text|number|filter|call|add|else|true|click|closebtn|querySelector|cross|sendform|sendingbtn|slice|textarea|undefined|typeof|blogger_templates_experiment_id|templatesV1|blogger_blog_id|_Init|rearrange|blogID|nameblog|_RegisterWidget|_ContactFormView|new|_WidgetInfo|footer1|contactFormMessageSendingMsg|sendingmsg|contactFormMessageSentMsg|x27success_message|check|successmsgTagB|successmsgTagP|contactFormMessageNotSentMsg|notsendmsgTagB|notsendmsgTagP|contactFormInvalidEmailMsg|invalidmsgTagB|invalidmsgTagP|contactFormEmptyMessageMsg|field|cannot|be|title|Contact|Form|blogId|contactFormNameMsg|Name|contactFormEmailMsg|Email|contactFormMessageMsg|contactFormSendMsg|Send|submitUrl|https|do|displayModeFull'.split('|'),0,{}))
/*]]>*/
</script>
تعديل الكود
المتغير blogsid المحدد بهذا اللون خاص بـمعرف مدونتك قم بوضعه مكان القيمة 0000000000000000 .
المتغير nameblog المحدد بهذا اللون خاص بـرابط مدونتك ضعه مكان blogspot.com بدون البروتوكول https:.
تعليقات
إرسال تعليق