اهلا وسهلا بكم متابعينا الكرام ان كل مدون داخل موقع يسعى لانشاء موقع متميز حتى ينتشر بسرعة كبيرة بين الناس ومن اهم الميزات التى تجعل الزوار دائما مقبلين علي الدخول على موقعك باستمرار هوا انت تكون انت في تواصل دائم معهم وتبادلة نفس التفعال وهذا الاتصال يمكن إنشائة عن طريق صفحة اتصل بنا Contact US ومن الجميل ان تكون هذه الصفحة بشكل جذاب
فاليوم اقدم لكم هذه الصفحة بشكل جذاب جدا تابع الشرح
فاليوم اقدم لكم هذه الصفحة بشكل جذاب جدا تابع الشرح
خطوات الشرح
- اولا الدخول الى لوحة تحكم بلوحر
- بعد ذلك الدخول للصفحات كما هوا موضح بالصورة
- ثم الضغط علي انشاء تدوينة جديدة ولصق الكود
- الكود
- بعد لصق الكود قم بحفظ التدوينة
- ستظهر معك الاضافة بهذ الشكل الرائع
<div dir="rtl" style="text-align: right;" trbidi="on">
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:100%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #ddd;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:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ddd;border-radius:3px;transition:all 0.5s ease-out;direction: rtl;text-align: justify;}
#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:left;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 #ddd;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-left:5px;}
</style>
<form name="contact-form">
<span style="color: #666666; font-family: "open sans" , "arial" , "helvetica" , sans-serif; font-weight: 700;"><i class="fa fa-user"></i> الاسم </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<span style="color: #666666; font-family: "open sans" , "arial" , "helvetica" , sans-serif; font-weight: 700;"><i class="fa fa-envelope"></i> البريد الإلكترونى <span style="color: #f56954; font-size: x-small; font-weight: bold;">مهم</span></span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<span style="color: #666666; font-family: "open sans" , "arial" , "helvetica" , sans-serif; font-weight: 700;"><i class="fa fa-pencil-square-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="إرسال" />
<br />
<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>
</div>