شرح تركيب نموذج وصفحة اتصل بنا الخاص بمدونة الأمل معرب - Contact Us Form

قمنا اليوم بتركيب نموذج اتصل بنا الخاص بمدونة الأمل

وسوف نعرض لكم الان طريقة تركيبه فى صفحة ثابته حيث قمت

بتعريب الكود .. وهو بسيط جدا جدا لم يأخذ منى مجهود

ويمكنك معاينة صفحة نموذج اتصل بنا من هنا : اتصل بنا

وهذه صورة توضيحية للاضافة :

شرح تركيب نموذج اتصل بنا - مدونة الأمل

شرح طريقة التركيب :

أولا : وهى أهم خطوة

وهى أن تقوم بتفعيل نموذج اتصل بنا على مدونتك

وذلك عن طريق الذهاب الى

التخطيط >> ثم اضافة اداة >> ثم اختيار نموذج اتصل بنا واضافته 

ولا يشترط وضعه فى مكان معين لانه سوف يختفى 

ثانيا : الذهاب الى انشاء صفحة

ثم نختار HTML لوضع الكود التالى لانشاء الصفحة

========================

الكود :

<form name="contact-form">
<span><i class="fa fa-pencil-square-o"></i> الاسم </span>
<br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> 
<br />
<span><i class="fa fa-envelope-o"></i> البريد الالكترونى <span style="color: #f56954; font-size: x-small; font-weight: bold;">مهم</span></span>
<br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> 
<br />
<span><i class="fa fa-keyboard-o"></i> الرسالة <span style="color: #f56954; font-size: x-small; font-weight: bold;">مهم</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" /> 
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ccc;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{font-family:'Open Sans';float:left;background:#cf4d35;color:#fff;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:.5px;border-radius:4px;border:0;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>

======================

بعد لصق الكود داخل الصفحة قم بالضغط على نشر
وبذلك تم انشاء صفحة اتصل بنا الخاصة بك

مع تحيات مدونة الأمل
كل ما هو جديد وحصرى تجده لدينا