أفضل طريقة لإضافة كود نموذج اتصل بنا احترافي لمدونة بلوجر
كيفية إنشاء وضبط صفحة اتصل بنا على مدونة بلوجر ، هل تبحث عن أحدث طريقة لإضافة كود اتصل بنا احترافي لمدونة بلوجر ، هل تعاني من مشكلة أثناء تركيب كود html لنموذج اتصل بنا، لا تقلق انت في المكان المناسب، سوف نقدم لكم أفضل كود لصفحة اتصل بنا احترافية ومميزة، و سنعرض لكم كافة الحلول لمشاكل صفحة اتصل بنا التي تواجه المستخدمين.
أهمية صفحة اتصل بنا للمواقع والمدونات
يبحث الكثير من أصحاب المواقع والمدونات، على أفضل كود صفحة اتصل بنا html خالي من الاخطاء، حيث تُعد تلك الصفحة من أهم الصفحات التي يجب توافرها في موقعك للقبول في جوجل أدسنس، كما يوجد أيضا بعض الصفحات المهمة، والتي ذكرناها سابقاً في شرح أهم النصائح لقبول موقعك في جوجل أدسنس.
وهناك العديد من أكواد صفحة اتصل بنا، التي تحتوي على بعض المشكلات أو الأخطاء التي تتسبب في إيقاف عمل نموذج اتصل بنا في موقعك ، لكن هناك طريقة صحيحة لإنشاء نموذج اتصل بنا احترافي دون أخطاء. وسنعرضها لكم من خلال موقع إبداع تقني.
أفضل طريقة لإضافة أكواد صفحة أتصل بنا إحترافية
كيفية إنشاء صفحة اتصل بنا احترافية، طريقة انشاء وضبط هذه الصفحة هي سهلة للغاية ولا تتطلب منك مجهود كبير، في البداية يجب عليك تنفيذ الخطوات التالية بشكل صحيح ومتابعة الشرح خطوة بخطوة حتى تتمكن من إنشاء صفحة اتصل بنا احترافية ومميزة لموقع الويب الخاص بك.
الخطوة الأولى : إضافة نموذج الاتصال Contact Us ، يجب عليك اولاً التأكد من إضافة نموذج الاتصال داخل مدونتك، ولمعرفة طريقة إضافة نموذج الاتصال، قم بفتح لوحة تحكم بلوجر، ثم اضغط على التخطيط أو التنسيق، وبعد ذلك اضغط على إضافة أداة، ثم اختر اضافة نموذج الاتصال Contact Us .
الخطوة الثانية : بعد الانتهاء من إضافة نموذج الاتصال الخاص بمدونة بلوجر، يجب عليك إضافة كود html أسفل وسم <head>، حيث يساعد هذا الكود في اخفاء نموذج اتصل بنا من الصفحة الرئيسية لمدونتك، ويقتصر فقط على ظهوره داخل الصفحة المخصصة لنموذج اتصل بنا.
إذا كنت بالفعل أضفت نموذج الأتصال Contact Us إلي مدونتك، فقد تحتاج لاضافة كود اخفاء نموذج الاتصال. فيما يلي خطوات إضافة كود اخفاء نموذج Contact Us ، اولاً من لوحة تحكم بلوجر انقر فوق "المظهر" ثم انقر فوق خيار "تعديل HTML"، بعد ذلك ابحث عن وسم "head" ثم وضع كود CSS الموجود بالأسفل، وذلك لإخفاء نموذج الاتصال من الصفحة الرئيسية وظهورة فقط داخل صفحة اتصل بنا.
كود CSS
<style type='text/css'>#ContactForm1,#ContactForm1 br{display:none}</style>
طريقة إنشاء صفحة اتصل بنا
بعد الانتهاء من الاعدادات السابقة وإضافة نموذج الاتصال، ثم إضافة كود CSS لإخفاء نموذج الاتصال من الصفحة الرئيسية، وظهوره فقط داخل صفحة اتصل بنا. ننتقل للخطوة الأساسية والمهمة وهي إنشاء صفحة تواصل معنا احترافية داخل مدونة بلوجر .
كيفية انشاء صفحة اتصل بنا لمدونة بلوجر، اولا قم بالذهاب الى لوحة تحكم بلوجر الخاصة بمدونتك ثم انقر فوق قائمة الصفحات، بعد ذلك انقر علي زر انشاء صفحة جديدة واختر الاسم المناسب للصفحة مثل "إتصل بنا - تواصل معنا - نموذج الاتصال " ، ثم اختر كود HTML وأضف الكود أدناه في علامة تبويب HTML.
احدث كود 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 قم بالضغط علي نشر الصفحة بعد اختيار الاسم المناسب للصفحة. والأن أصبحت صفحة إتصل بنا متوفرة بشكل إحترافي وجذاب لموقعك الإلكتروني .
إلى هنا نكون قد وصلنا لنهاية موضوع اليوم ، قدمنا لكم شرح كيفية إضافة كود صفحة اتصل بنا احترافي ومييز، نتمنى أن تشاركونا تعليقاتكم وارائكم حول أفضل اكواد صفحة اتصل بنا، ولمزيد من الأخبار والشروحات التقنية، وبرامج الحماية، ومراجعة الهواتف، وتحميل افضل البرامج والتطبيقات، اشتركوا في قائمتنا البريدية ليصلكم كل ما هو جديد من موقع إبداع تقني.