اضافة نموذج اتصال مدونة تيم إكسور

بسم الله الرحمن الرحيم 

السلام عليكم اخواني ورحمة الله وبركاته 

اليوم سنتعلم طريقه اضافة نموذج اتصال لمدونة بلوجر بطريقة سهلة وبشرح مبسط للمبتدئين  ...

______________________________________________________

اولا : ندخل للمدونة ونختار من اليمين اختيار صفحات كما مبين لكم بالصورة رقم 1 

- صورة رقم 1 -

_________________________________________________________________________

ثانيا : نختار صفحة جديدة من اعلى الموقع كما مبين لكم بالصورة رقم 2

- صورة رقم 2 -

_________________________________________________________________________

ثالثا : وبعد ان ندخل لاضافة صفحة جديدة نغير الخيار من تأليف ل HTML كما نرى بالصورة رقم 3

- صورة رقم 3 - 

_________________________________________________________________________

رابعا : نضيف هذا الكود داخل صفحة HTML ونحفظها تحت اسم اتصل بنا .

<div dir="rtl" style="text-align: right;" trbidi="on">

<form name="contact-form">

<span style="color: #666666; font-family: &quot;open sans&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: large; font-weight: 700;"><i class="fa fa-user"></i> الأسم&nbsp;</span>

<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> 

<span style="color: #666666; font-family: &quot;open sans&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: large; font-weight: 700;"><i class="fa fa-envelope"></i> البريد الإلكتروني&nbsp;<span style="color: #f56954; font-size: 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: &quot;open sans&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: large; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> الرسالة&nbsp;<span style="color: #f56954; font-size: 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>

<style scoped="" type="text/css">

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{

width:100%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #00a102;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 #00a102;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 {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 #5cc35d;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></div>

__________________________________________________________________________

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

_______________________________________________________________________

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

في أمان الله