اضافة نموذج الاتصال في صفحة ثابتة

اضافة نموذج الاتصال في صفحة ثابتة

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

معاينة

طريقة التركيب

اولا عليك اضافة نموذج الاتصال من التخطيط

1. الان قم بالدخول إلى لوحة تحكم المدونة
2. اختر قالب 
3. ثم انقر فوق تحرير 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;
}

الان قم بحفظ القالب و قم بإنشاء صفحة ثابتة مع وضع الخيارات مثل الصورة

و اخيرا انتقل إلى وضع HTML و قم بوضع الكود التالي

<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>

التنسيق

استبدل Droid Arabic Kufi بالخط الموجود في مدونتك ستجدها مكررة اكثر من مرة استبدلها كلها

يمكنك ايضا مشاهدة : تخصيص نموذج الاتصال الجزء الاول
                           إنشاء نموذج اتصال احترافي لمدونات بلوجر

اي سؤال او استفسار لا تترد بوضعه في تعليق بالتوفيق