إنشاء صفحة الإتصال متعددة الإستخدامات لمنصة بلوجر
لا تقلق من ناحية الخصوصية فهي نفسها أداة -الإتصال- الخاصة بالبلوجر الفرق الوحيد أنها متعددة الإستخدامات أي يمكن إعادة إستخدامها فقط من خلال ضبط أكواد HTML الخاصة بالنموذج وصياغة محتواه ليتناسب مع ماتحتاجه من المتصل بك.
ووجب التنويه أن هذه الأداة معروضة في بعض المدونات لكنها لم تكن تعمل بشكل صحيح فقام -فريق العمل- بفك التشفير وإعادة ضبطها وإعطائها شكل عصري وإن شاء الله لن تواجهوا أي مشكلة في تركيبها كما انه يمكن تحميل أكواد الإضافة الأصلية من الملحقات (بدون تشفير أو ضغط) للإطلاع على محتوى السكريبت المستخدم.
الخطوة الأولى: إنشاء الصفحة و تركيب الأكواد
- إنتقل للمدونة >> ثم إلى الصفحات >> ثم قم بإنشاء صفحة جديدة بعنوان إنجليزي مثلا contact
- من خلال >> إعدادات الصفحة >> خيارات >> تعليقات القراء >> عدم السماح
- الآن إنتقل من وضع
التأليف إلىhtml ثم إحذف أي كود موجود - قم بنسخ كود 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>
يجب عليك تغيير 0000000000000000 بمعرف مدونتك ثم قم بوضعة
يجب عليك تغيير //exampel.blogspot.com/ برابط مدونتك بدون البروتوكول