نموذج الاتصال من الأشياء المهمة في اي مدونة فهي وسيلة الاتصال بينك وبين الزائر وأيضا مهمة جدا لجوجل أدسنس فهي تعبر عن مدي مصدقية موقعك لجوجل أدسنس اليوم في هذا الدرس سوف نتعلم معا كيفية إنشاء نموذذج اتصال تابع معي .
طريقة التركيب
عليك إضافة نموذج الاتصال من التخطيط ويكون بهذا الشكل
- الأن قم بالدخول الى القالب الخاص بك
- ثم اضغط على تحرير HTML
- قم بالبحث عن هذا الوسم </head> وإضافة هذا الكود فوقه
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
الان قم بالبحث عن هذا الوسم ]]></b:skin> وإضافة هذا الكود قبله
/* Contact Us mudwnp */
#ContactForm1 {
display: none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
width: 300px;
height: auto;
margin: 10px auto;
padding: 10px;
background: #F4F3F3;
color: #666;
border: 1px dashed #ddd;
transition: all 0.5s ease-in-out;
}
#ContactForm1_contact-form-email-message {
width: 450px;
height: 175px;
margin: 10px auto;
padding: 10px;
background: #fdfdfd;
color: #666;
font-family: 'Droid Arabic Kufi',sans-serif;
border: 1px dashed #ddd;
transition: all 0.5s ease-in-out;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
background: #fff;
outline: none;
border: 1px dashed #f8a82a;
}
#ContactForm1_contact-form-submit {
font-family: 'Droid Arabic Kufi';
font-size: 15px;
width: 101px;
height: 35px;
float: right;
color: #fff;
padding: 0;
margin: 10px 0 3px 0;
cursor: pointer;
background: #aaa;
border: none;
border-radius: 2px;
transition: background 0.4s linear;
}
#ContactForm1_contact-form-submit:hover {
background: #f8a82a;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {
width: 450px;
margin-top: 35px;
}
الأن قم بحفظ القالب
توجه الأن الى قسم الصفحات وقم بانشاء صفحة جديدة ولصق هذا الكود بالداخل
<form name="contact-form">
<span style="font-family: Droid Arabic Kufi, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i>
الإسم</span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<span style="font-family: Droid Arabic Kufi, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope"></i>
البريد الإلكتروني <span style="color: red; font-weight: bolder;">*</span></span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<span style="font-family: Droid Arabic Kufi, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil"></i>
الرسالة<span style="color: red; font-weight: bolder;">*</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="
إرسال " />
<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>
قم بضبط اعدادت الصفحة كما في الصورة القادمة واضغط على حفظ
