نموذج اتصال مدونة بلوجر

 

صفحة اتصل بنا مدونة بلوجر

يوليو 9, 2020 بقلم esoftkwm

نموذج اتصال مدونة بلوجر

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

انشاء نموذج اتصال بلوجر

في هذا المقال سوف نتعرف على كيفية اضافة صفحة اتصل بنا او تواصل معنا نموذج اتصال لمدونة بلوجر بكل جودة و احترافية مجاني يعمل بكل كفاءة و مضمون 100 % .

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

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

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

عمل صفحة اتصل بنا نموذج اتصال بلوجر

شرح تركيب نموذج اتصال بلوجر

من لوحة تحكم بلوجر اضغط على التخطيط ثم اضافة اداة

من ادوات بلوجر اختر نموذج اتصال

سوف يظهر نموذج الاتصال بالصفحة الرئيسية للمدونة

اذا كنت لا ترغب ان يظهر بالصفحة الرئيسية للمدونة يمكنك استخدام هذا الكود لمنع ظهور نموذج الاتصال

قم باضافة الكود التالي قبل نهاية القسم /head

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

سوف تلاحظ اختفاء نموذج الاتصال من مدونتك

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

الان من قسم الصفحات قم بانشاء صفحة جديدة و حرر 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip_I6BU5nlLNgb8fygLX3tSZTdoIUrWUfinMleP-oobTyn5OH_OGCfW21oM3GrwBIejkEfVV3ex6z3ja45u0HQJFfa0-9AI8EBqiwA1i_Zu6cF462PATU4150i17-5ZbIRBHshMvgMTuRf/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>

قم بحفظ الصفحة و اختبر نموذج الاتصال