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


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




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

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

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

بعد لصق الكود داخل الصفحة قم بالضغط على نشر
وبذلك تم انشاء صفحة اتصل بنا الخاصة بك
$ تـبـرع لـنـا
مثلما يعود النهر إلى البحر هكذا يعود عطاؤك إليك
إذا كانت خدماتنا تنال رضاك وترى أن علينا الإستمرار يرجى التبرع لنا لتقديم المزيد لغيرنا

تعليقات

الأرشيف

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

إرسال