8/12/2016

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

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

شرح طريقة التركيب :
أولا : وهى أهم خطوة
وهى أن تقوم بتفعيل نموذج اتصل بنا على مدونتك
وذلك عن طريق الذهاب الى
التخطيط >> ثم اضافة اداة >> ثم اختيار نموذج اتصل بنا واضافته 
ولا يشترط وضعه فى مكان معين لانه سوف يختفى 
ثانيا : الذهاب الى انشاء صفحة
ثم نختار 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>

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


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

اضف تعليقك