اليوم موضوعنا هو اضافة نموذج اتصل بنا في صفحة html خاصة
وعدم ضهوره في التخطيط وبشكل جميل جدا واحترافي وعدم الحاجة الى
اكواد ال css
ـــــــــــــــــــــــــــــــــ
الخطوات
ـــــــــــــــــــــــــــــــــــــــ
اذهب الى >>blogger << بعدها الى >>الصفحات<<
ومن ثم قم بانشاء صفحة جديدة وضع فيها كود ال html التالي :
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
أسمك الكريم
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
البريد الألكترونى
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
نص الرسالة
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="أرسال" />
<br />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</form>
</div>
</div>
</div>
<style>
/* Contact Form Container - www.cairo-pro.com */
.contact-form-widget {
text-align: right;
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Submit button style */
.contact-form-button-submit {
font-family: GESSTwoMediumRegular,Georgia;
font-size: 17px;
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}
/* www.cairo-pro.com - Submit button on mouseover */
.contact-form-button-submit:hover{
cursor:pointer;
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}
P.comment-footer ,.comments{ visibility:hidden; }
</style>
</div>
وبعدها قم بحفض الاضافة واستعراضها وستجدها في غاية الجمالية


و أين تذهب الرسائل ؟
ردحذفبسئل نفس السؤال هههه
حذف