السلام عليكم .... , من منا لا يريد تركيب نموذج الاتصال على الصفحات الثابتة بشكل احترافي ومميز , ليعرضها لزواره عندما يريدون الاتصال به , هل تعبت من البحث عن نموذج احترافي لتضعة على صفحتك الثابتة , اليومجلبت لكم نموذج اتصال بشكل احترافي ورائع يتناسب مع مدونات بلوجر , ومتجاوب بأحترافية بالوان هادئة وبمنظر بسيط ورائع , كي لا اطيل عليكم تفضلو بالمعاينة وسوف نتجة الي طريقة التركيب
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'/>