U3F1ZWV6ZTQzNTI1ODE0ODU2MzY5X0ZyZWUyNzQ1OTg0NzcyNjEzNg==

انشاء صفحة اتصل بنا بلوجر

ستناقش هذه المقالة كيفية إنشاء صفحة إتصل بنا لمدونة بلوجر بنموذج بنقرة واحدة. الأداة المتوفرة هنا ستنشئ صفحة إتصل بنا بنقرة واحدة. يجب عليك نسخ كود HTML و لصقه في صفحة إتصل بنا في مدونة بلوجر.

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


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

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



إنشاء صفحة إتصل بنا بلوجر


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

إنتقل إلى لوحة تحكم مدونة بلوجر > حدد المدونة > تنسيق

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

ملاحظة : يلزم إضافة نموذج الإتصال إلى مدونتك حتى يعمل نموذج الإتصال هذا على صفحة إتصل بنا في مدونة بلوجر . إذا لم تقم بإضافة نموذج إتصال و تحديد خانة الإختيار "إظهار نموذج الإتصال" ، فلن يعمل نموذج الإتصال.

إخفاء نموذج الإتصال في الشريط الجانبي للمدونة

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

  1. إنتقل إلى المظهر > أنقر فوق السهم بجانب تخصيص> تعديل HTML
  2. إبحث عن الكود التالي:
]]></b:skin>

إليك كيفية البحث بإستخدام بلوجر HTML.



3. الصق كود CSS التالي فوقه مباشرة.

div#ContactForm1{display: none !important;}

تحقق من لقطة الشاشة حول كيفية تنفيذها.



4. الآن ، أنقر فوق الرمز الحفظ لحفظ التغييرات.

بعد الإنتهاء من جميع الخطوات المذكورة في النقطة الثالثة. سيكون نموذج الإتصال الخاص بك موجودًا في الشريط الجانبي ولكنه لن يكون مرئيًا لزائر المدونة.

بعد ذلك ، إنتقل إلى قسم الصفحات

أنقر على أيقونة إنشاء صفحة جديدة.



الصق كود HTML التالي (لنموذج إنشاء صفحة إتصل بنا بلوجر) وأنشر الصفحة. إنه نموذج إتصال أنيق لـ بلوجر.

<style>
.contact-form-widget {max-width: 500px;}
.page-contact-form input,.page-contact-form textarea {width: 100%;max-width: 100%;margin-bottom: 10px; padding: 20px;}
.page-contact-form input.contact-form-button.contact-form-button-submit {padding-top: 10px;
    padding-bottom: 35px; background: #ea6337; color: #fff;border: none;font-size: 20px;
    font-family: cairo;border-radius: 10px;}
.page-contact-form input.contact-form-button.contact-form-button-submit:hover {background: none;color: #000; border:1px solid #ea6337}
</style>
<div class="contact-form-widget page-contact-form">
<div class="form">
<form name="contact-form">
الإسم:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
البريد الالكتروني: <span id="required">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
الرسالة: <span id="required">*</span><br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="إرسال" />
<br/>
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</form>
</div>
</div>


إذا لم تتمكن من نسخ الكود يمكنك تنزيله: من هنا


تحقق من لقطة الشاشة التالية:



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

إنتقل إلى قسم الصفحات و أنقر على أيقونة العين لعرض صفحة إتصال بنا.

ستبدو صفحة الإتصال بنا الخاصة بـ Blogger مشابهة لهذا المثال.




الكلمات الأخيرة


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


تعليقات
ليست هناك تعليقات
إرسال تعليق

إرسال تعليق

الاسمبريد إلكترونيرسالة