إضافة نموذج أتصل بنا الرسمي لمدونات بلوجر بشكل جميل

نشارك معكم اليوم نموذج أتصل بنا الخاص لمدونات بلوجر والرسمي لها، في موضوعنا اليوم سوف نتعلم كيفية إضافته إلى صفحة على بلوجر بالرغم من أنه لا يمكن إضافته إلا من خلال التخطيط والأدوات.
وكذلك سوف نضع شكل جميل لنموذج الأتصال ليصبح بشكل متجاوب وسهل وفعال يمكن أن نرى معاينة.

معاينة

كيفية إضافة نموذج أتصل بنا في صفحة ثابته على بلوجر؟
1 - حرر القالب >> ابحث عن ]]></b:skin> وضع الكود التالي فوقه

<style>#ContactForm1,#ContactForm1 br{display:none;}#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{width:96.5%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #e3e3e3;border-radius:3px;transition:all 0.5s ease-out;}#ContactForm1_contact-form-email-message{width:96%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:droid arabic kufi;border:1px solid #e3e3e3;border-radius:3px;transition:all 0.5s ease-out;}#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#BEBEBE;}#ContactForm1_contact-form-submit {width:100%;font-family:droid arabic kufi;;float:left;background:#fff;color:#aaa;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;background-image:linear-gradient(110deg, #FC4F3F 0%, #FC4F3F 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #e3e3e3;transition:all .8s ease, background-position .8s ease, color .8s ease;}#ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#DD4537;}#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 100%;margin-top: 35px;font-family: cursive;font-size: 14px;color: #FFF;background: #FC4F3F;}.contact-form-error-message-with-border {background: #ED5345;border: none;box-shadow: none;color: #fff;padding: 5px 10px;font-family: cursive;}.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}img.contact-form-cross {line-height:40px;margin-left:5px;}form i.fa.fa-pencil, form i.fa.fa-user,form i.fa.fa-envelope,form i.fa.fa-bars {padding:3px 5px;border-radius:3px;font-weight:normal;font-size:120%;float: right; margin-left: 10px;}height:36px;transition:All 0.6s ease-out;}form i.fa.fa-user {background:#7986cb;color:#fff;}form i.fa.fa-envelope {background:#ffa726;color:#fff;}form i.fa.fa-pencil{background:#FC4F3F;color:#fff;}.social_network {margin: 8px -10px;padding: 10px;overflow: hidden;width: 100%;border: 1px solid #eee;border-right: none;border-left: none;border-bottom: none;margin-bottom: -10px;}h3.cnt-title {font-family: droid arabic kufi;background: #676565;color: #fff;padding: 10px;margin-top: -10px;width: 102%;margin-left: -20px;text-align: center;}#social_networks{ text-align: center;display: block;clear: both;padding: 15px;}#social_networks ul {display:block;margin:0 auto;padding:0;list-style:none;}#social_networks li{text-align:center;display:inline-block;margin:0 5px;width:36px;#social_networks li:hover{color:#eee;cursor:pointer;}#social_networks li a.facebook:hover,#social_networks li a.twitter:hover,#social_networks li a.youtube:hover,#social_networks li a.googleplus:hover,#social_networks li a.pinterest:hover{color:#fff;}#social_networks li:hover a{color:#fff;}#social_networks li a{display:inline-block;color:#aaa;line-height:36px;font-size:1.2em;transition:All 0.3s ease-out;}#social_networks li a:hover{color:#fff;}#social_networks li a span{display:none;}#social_networks li.facebook,#social_networks li.twitter,#social_networks li.youtube,#social_networks li.googleplus,#social_networks li.pinterest{text-align:center;background:none;cursor:pointer;box-shadow:0 0 0 1px #eee;background-image: linear-gradient(110deg, #FC4F3F 0%, #FC4F3F 50%, transparent 50%, transparent 100%);background-size:200%;background-position:150% 0;background-repeat:no-repeat;transition: background-position .4s ease, color .4s ease;}</style>#social_networks li.facebook:hover,#social_networks li.twitter:hover,#social_networks li.youtube:hover,#social_networks li.googleplus:hover,#social_networks li.pinterest:hover{color:#fff;background-position:0 0;box-shadow:0 0 0 1px #f56954;}

2 - قم بانشاء صفحة جديدة ثم انتقل الى تبويب html

وضع الكود تالي داخل الصفحة

<div dir="rtl" style="text-align: right;" trbidi="on"><form name="contact-form"><span style="font-family: cursive,droid arabic kufi;"><i class="fa fa-user"></i> الإسم الكريم </span><input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  
<span style="font-family: cursive,droid arabic kufi;"><i class="fa fa-envelope"></i> البريد الإلكتروني <span style="background: #595656; border-radius: 3px; color: white; font-family: ge_ss_threeregular; font-size: x-small; font-weight: normal; line-height: normal; margin-left: 5px; padding: 0 3px 3px 3px;"> مهم </span></span> <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  
<span style="font-family: cursive,droid arabic kufi;"><i class="fa fa-pencil"></i> الرسالة <span style="background: #595656; border-radius: 3px; color: white; font-family: ge_ss_threeregular; font-size: x-small; font-weight: normal; line-height: normal; margin-left: 5px; padding: 0 3px 3px 3px;"> مهم </span></span><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <input id="ContactForm1_contact-form-submit" type="button" value="أرسل" />  <br /><div style="max-width: 222px; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><div class="social_network wow bounceInDown animated" style="visibility: visible;"><h3 class="cnt-title">وسائل اتصال اخرى</h3><div id="social_networks"><ul><li class="sorting-01 facebook" title="Follow us on Facebook"><a href="https://www.blogger.com/blogger.g?blogID=1662072996028568162#" target="_blank"><i class="fa fa-facebook"></i><span class="inv"></span></a></li><li class="sorting-02 youtube" title="Follow us on Youtube"><a href="https://www.blogger.com/blogger.g?blogID=1662072996028568162#" target="_blank"><i class="fa fa-youtube"></i><span class="inv"></span></a></li><li class="sorting-03 twitter" title="Follow us on Twitter"><a href="https://www.blogger.com/blogger.g?blogID=1662072996028568162#" target="_blank"><i class="fa fa-twitter"></i><span class="inv"></span></a></li><li class="sorting-05 googleplus" title="Follow us on Google+"><a href="https://www.blogger.com/blogger.g?blogID=1662072996028568162#" target="_blank"><i class="fa fa-google-plus"></i><span class="inv"></span></a></li><li class="sorting-04 pinterest" title="الرئيسية"><a href="https://www.blogger.com/"><i class="fa fa-home"></i><span class="inv"></span></a></li></ul><div class="other-cnt"><div class="phone">06 38 897 79 962+ </div><div class="emailtxt">assadalqaisi77@gmail.com</div></div></div></div></div>

الان قم بحفظ الصفحة ومعاينتها ومبروك عليك نموذج اتصل بنا احترافي لمدونتك

إذا واجهت مشكلة في المظهر لا تتردد في وضعه بالتعليقات .