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

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

معاينة

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

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

الان قم بالدخول إلى لوحة تحكم المدونة
اختر قالب
ثم انقر فوق تحرير HTML

ابحث عن الوسم و اضف الكود التالي فوقه

الان ابحث عن الوسم ]]> و اضف الكود التالي فوقه

/* 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 و قم بوضع الكود التالي

الإسم

البريد الإلكتروني *

Droid Arabic Kufi, Arial, Helvetica, sans-serif;"> الرسالة*

التنسيق

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

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

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

Unknown

اضف تعليق

اضافات بلوجر, دروس بلوجر, CSS

الثلاثاء، 11 نوفمبر 2014

عن الكاتب مدون محترف

إسمي شرف ملقب بي فيدي عمري حوالي 28 سنة مدون مغربي مهووس بجديد تكنولوجيا المعلوميات مهتم بالحماية المعلوماتية يمكنك متابعتي من خلال الفيسبوك أو. تويتر.أو. جوجل بلس

0000000000

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

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

التنسيق

عن الكاتب مدون محترف

مقالات قد تهمك