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

المحترف العربي

8/12/2016

0

اضافات, بلوجر

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

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

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

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

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

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

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

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

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

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

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

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

ثم نختار 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>

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

اعلانك هنا

لا تنسا ان تكن من أعضاء المدونة من هنا , إذا واجهتك اي مشكلة لا تترد فى ترك تعليق

شاركه الان :

اضافات بلوجر