أحدث طريقة لإضافة كود اضافة نموذج اتصل بنا احترافي لبلوجر html

مرحباً بالجميع اليوم سنقدم شرح عن كيفية إنشاء وضبط صفحة اتصل بنا على مدونة blogger،في يومنا هذا تعد صفحة أتصل بنا من أهم الصفحات للقبول في أدسنس وقد ذكرنا ذلك مسبقاً في موضوع نصائح للقبول في جوجل أدسنس 2019 ولكن سنشرح اليوم

طريقة إضافة صفحة أتصل بنا إحترافية جاهزة

 وبعد متابعة الشرح خطوة بخطوة ستتمكن من صفحة اتصل بنا احترافية لموقعك.

أولاً ، قم بفتح لوحة تحكم بلوجر إضافة نموذج الاتصال إلى مدونتك. في صفحة التخطيط انقر فوق إضافة أداة بعد فتح القائمة ، انقر فوق علامة الجمع في القائمة  نموذج جهة الاتصال ، ثم انقر فوق حفظ.


يرجى تخطي هذه الخطوة إذا كنت بالفعل قمت بأضافة نموذج الأتصال Contact Form إلي مدونتك.

بعد ذلك ، انقر فوق "المظهر"> انقر فوق زر "تعديل  HTML"> أضف كود  CSS التالي  قبل </head>

<style type='text/css'>
#ContactForm1,#ContactForm1 br{display:none}
</style>

بعد ذلك انقر على زر حفظ المظهر.

ثم انقر فوق قائمة الصفحات> ثم انقر فوق زر صفحة جديدة وأضف الكود أدناه في علامة تبويب  HTML.

مع التعديل علي الخيارات من القائمة الجانبية مثل الخطوة رقم 3.

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSEu6JanjKvNePNEpLHn-pyq1dH3KQdlB3MJQaWYn_VyUZsgEdrv39PI5l46f964UaUojUqQz9Uh2kIOOqoUYFuk1hDmcZrMQfUhI3hfbsCvEzzyDQghCwTUh4ShtpXSD2_Jyk3X_peIWA/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 قم بالضغط علي نشر بعد تغير الأسم بما يناسبك.
والأن تم إضافة صفحة إتصل بنا إحترافية بشكل جذاب.

معاينة صفحة إتصل بنا

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