كيفية اضافة صفحة اتصل بنا لمدونة بلوجر وحل جميع مشاكلها

كيفية اضافة صفحة اتصل بنا لمدونة بلوجر وحل جميع مشاكلها

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

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

كيفية اضافة صفحة اتصل بنا لمدونة بلوجر وحل جميع مشاكلها

أهمية صفحة اتصل بنا

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

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


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

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

أضافة نموذج اتصل بنا احترافي للمدونات في بلوجر

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

أولا إن كنت مستخدم لقالب سيو بلس أو قالب سكويز أو قالب ناز أو قالب ليفون فيجب عليك استخدام أكواد صفحة اتصل بنا التي تأتي جاهزة مع هذه القوالب حيث أن مصممين هذه القوالب قاموا بتضمين أكواد نموذج الاتصال مسبقا في القالب فكل ما عليك فعله هو استدعاء نموذج صفحة اتصل بنا عبر الخطوات التالية:

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


اذا كنت مستخدم لقالب سيو بلس فعليك استخدام كود صفحة اتصل بنا الخاص بقالب سيو بلس:
<div id='Pagecontactus'></div>
اذا كنت مستخدم لقالب سكويز فعليك استخدام كود صفحة اتصل بنا الخاص بقالب سكويز:
<div class="post-contact-form"></div>
اذا كنت مستخدم لقالب ناز فعليك استخدام كود صفحة اتصل بنا الخاص بقالب ناز:
<div class="post-contact-form"></div>
اذا كنت مستخدم لقالب ليفون فعليك استخدام كود صفحة اتصل بنا الخاص بقالب ليفون:
<div class="contact"></div>

 اذا كنت تستخدم قالب اخر غير القوالب المذكورة سابقا فعليك اتباع الشرح الاتي لتركيب صفحة اتصل بنا في مدونتك:
عمل صفحة اتصل بنا + شرح الكود
كيفية إنشاء وضبط صفحة اتصل بنا على مدونة بلوجر للقوالب الأخرى غير المذكورة سابقا:

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


هذه الخطوة مهمة جدا جدا ، دونها لن يعمل كود اتصل بنا الذي سنشرحه تاليا

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

الخطوة الثانية: وضع كود صفحة اتصل بنا في تبويب عرض 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-size: 25px;font-weight: 500;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-size:25px;font-weight: 500;width:100%;height:175px;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{background:#fff;color:#5f6368;font-size:24px;font-weight: 600;width:140px;height:45px;float:right;padding:0 20px 0 0px;margin:10px 0 20px 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;right: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:right;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn1{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>

صفحة اتصل بنا جاهزة

يمكنك تحميل كود صفحة اتصل بنا اخر تكم توفيرها لكم في حالة لم تعمل الاكواد التي في الأعلى. فيمكنكم تحميل الكود من هنا

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


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

كيفية اضافة صفحة اتصل بنا بسهولة في بلوجر
تعليقات
4 تعليقات
إرسال تعليق
  • Power Mode
    Power Mode 9 يونيو 2021 في 10:14 م

    بصراحة نادرا ما اعلق على شرح لاكن احببت ان اشكرك على هذا الشرح وفر عليك كثيرا من عناء البحث

    إرسال ردحذف
    • زياد ناصر
      زياد ناصر 8 يوليو 2021 في 10:00 م

      شكرا اخي الكريم وعلى الرحب والسعة، يشرفنا ان الشرح قد نال رضاك.

      حذف
    • صوت الأقصى
      صوت الأقصى 19 سبتمبر 2021 في 11:32 ص

      السلام عليكم ورحمة الله وبركاته
      النموذج ممتاز ورائع
      لكنه لا يعمل، يعني عندما نضغط إرسال لا يحدث شيء.
      أتحدث عن آخر نموذج.

      إرسال ردحذف
      • زياد ناصر
        زياد ناصر 19 سبتمبر 2021 في 12:03 م

        ماهو القالب الخاص بك اخي الكريم؟

        حذف



      وضع القراءة :
      حجم الخط
      +
      16
      -
      تباعد السطور
      +
      2
      -