random
أخبار ساخنة

نموذج الاتصال بشكل جميل للبلوجر

مدير الموقع
الصفحة الرئيسية

السلام عليكم .... �� , من منا لا يريد تركيب نموذج الاتصال على الصفحات الثابتة بشكل احترافي ومميز ⭐, ليعرضها لزواره عندما يريدون الاتصال به , �� هل تعبت من البحث عن نموذج احترافي لتضعة على صفحتك الثابتة ‼ , اليومجلبت لكم نموذج اتصال بشكل احترافي ورائع يتناسب مع مدونات بلوجر , ومتجاوب بأحترافية بالوان هادئة وبمنظر بسيط ورائع , كي لا اطيل عليكم تفضلو بالمعاينة وسوف نتجة الي طريقة التركيب

شرح طريقة التركيب
1. من القالب ابحث عن ]]></b:skin> وضع كود التالي فوقه

الكود

#ContactForm1 {
    display: none;
}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
    width: 300px;
    height: auto;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    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: 'Roboto',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: 'Roboto';
    font-size: 15px;
    width: 101px;
    height: 35px;
    float: left;
    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;
}
2. ثم توجه الى الصفحات ثم انشاء " صفحة جديدة " واضغط علي Html
3. ثم ضع بها الكود التالي

الكود

<form name="contact-form">
<span style="font-family: Helvetica Neue, 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: Helvetica Neue, 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: Helvetica Neue, 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="Kirim" />  
<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>
</form>
4. اضبط اعدادات الصفحة كما بالصورة
التغييرات الأساسية
* إذا لم تظهر لك الأيقونات أضف الكود التالي فوق </head>

الكود

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
google-playkhamsatmostaqltradent