الجمعة، 22 مارس 2019

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

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

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


طريقة التركيب

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

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


بعد إضافة الادة نقوم بعمل الخطوات التالية

  1. نتوجه إلى لوحة تحكم بلوجر
  2. ننقر على قالب
  3. ثم ننقر على تحرير HTML
تحديث : إن لم يعمل النموذج لا تقم بمسح الاكواد في هذه الخطوة

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



نبحث عن الوسم </head> و اضف الكود التالي فوقه
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>



ايضاابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
/* CSS Contact */
#ContactForm1,#ContactForm1 br{display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:96.5%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #e3e3e3;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #e3e3e3;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit {width:100%;font-family:'Open Sans';float:right;background:#fff;color:#aaa;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;background-image: linear-gradient(110deg, #7986cb 0%, #7986cb 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #e3e3e3;transition:all .8s ease, background-position .8s ease, color .8s ease;}
#ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#7986cb;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f36c60;border:none;box-shadow:none;color:#fff;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-right:5px;}

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

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

و اخيرا انتقل إلى وضع HTML و قم بوضع الكود التالي

اضافة نموذج اتصال مدون محترف الاحترافي في صفحة ثابتة
<form name="contact-form">
<span style="color: #999999; display: inline-block; font-family: Droid Arabic Kufi,Arial; font-weight: 700; margin-bottom: 10px; margin-top: 15px;"><i class="fa fa-user"></i> الإسم </span><br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  <br />
<br />
<span style="color: #999999; display: inline-block; font-family: Droid Arabic Kufi,Arial; font-weight: 700; margin-bottom: 10px; margin-top: 15px;"><i class="fa fa-envelope"></i> البريد الإلكتروني <span style="background: #aaa; border-radius: 3px; color: white; font-size: x-small; font-weight: normal; line-height: normal; margin-left: 5px; padding: 0 3px 1px 3px;">إجباري</span></span> <br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  <br />
<br />
<span style="color: #999999; display: inline-block; font-family: Droid Arabic Kufi,Arial; font-weight: 700; margin-bottom: 10px; margin-top: 15px;"><i class="fa fa-bars"></i> الرسالة <span style="background: #aaa; border-radius: 3px; color: white; font-size: x-small; font-weight: normal; line-height: normal; margin-left: 5px; padding: 0 3px 1px 3px;">إجباري</span></span><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br />
<input id="ContactForm1_contact-form-submit" type="button" value="إرسال" />  <br />
<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>
<br />
<style type="text/css">
#comments,#sidebar-wrapper,.banner,.banner2 {display:none;}
#post-wrapper {float:none;width:100%;margin:0 auto;}
.post-inner {padding:15px 0;}
.post-body {margin:0 auto;width:70%;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}
form i.fa.fa-user,form i.fa.fa-envelope,form i.fa.fa-bars {padding:3px 5px;border-radius:3px;font-weight:normal;font-size:120%;}
form i.fa.fa-user {background:#7986cb;color:#fff;}
form i.fa.fa-envelope {background:#ffa726;color:#fff;}
form i.fa.fa-bars {background:#00897b;color:#fff;}
</style>

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

إضافة تعليق

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *