أفضل طريقة لإضافة كود نموذج اتصل بنا احترافي لمدونة بلوجر
أهمية صفحة اتصل بنا للمواقع والمدونات
أفضل طريقة لإضافة أكواد صفحة أتصل بنا إحترافية
كود CSS
<style type=’text/css’>#ContactForm1,#ContactForm1 br{display:none}</style>
طريقة إنشاء صفحة اتصل بنا
بعد الانتهاء من الاعدادات السابقة وإضافة نموذج الاتصال، ثم إضافة كود CSS لإخفاء نموذج الاتصال من الصفحة الرئيسية، وظهوره فقط داخل صفحة اتصل بنا. ننتقل للخطوة الأساسية والمهمة وهي إنشاء صفحة تواصل معنا احترافية داخل مدونة بلوجر .
احدث كود HTML لنموذج صفحة اتصل بنا احترافية
<form name=”contact-form”>
<div class=”formcolumn1″><input id=”ContactForm1_contact-form-name” name=”name” placeholder=”الأسم” size=”30″ type=”text” value=”” /></div><div class=”formcolumn2″><input id=”ContactForm1_contact-form-email” name=”email” placeholder=”البريد الألكتروني الألكتروني” size=”30″ type=”text” value=”” /></div><div class=”formcolumn3″><textarea cols=”25″ id=”ContactForm1_contact-form-email-message” name=”email-message” placeholder=”الرسالة” rows=”7″></textarea></div><div class=”formcolumn4″><input class=”ripplelink” id=”ContactForm1_contact-form-submit” type=”button” value=”إرسال” /></div><div style=”max-width: 100%; text-align: center; width: 100%;”><div id=”ContactForm1_contact-form-error-message”></div><div id=”ContactForm1_contact-form-success-message”></div></div></form><script src=”https://www.blogger.com/static/v1/widgets/2271878333-widgets.js” type=”text/javascript”></script><style scoped=”” type=”text/css”>#ContactForm1,#comments,.post-body form.paypalpay br{display:none}.post-body form.paypalpay{margin:0;text-align:center}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{font-family:’Quicksand’,sans-serif;display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}#ContactForm1_contact-form-email-message{font-family:’Google Sans’,sans-serif;width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}#ContactForm1_contact-form-submit{font-family:’Quicksand’,sans-serif;background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}.formcolumn4{position:relative}.formcolumn4:before{background-image:url(https://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:”;display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}form{color:#888}.formcolumn1,.formcolumn2{float:left;width:50%}.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}.formcolumn2{padding:0 0 0 10px}@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>
بعد الانتهاء من إضافة كود صفحة اتصل بنا في تبويب html قم بالضغط علي نشر الصفحة بعد اختيار الاسم المناسب للصفحة. والأن أصبحت صفحة إتصل بنا متوفرة بشكل إحترافي وجذاب لموقعك الإلكتروني .
