شرح اضافة نموذج اتصل بنا في صفحة خاصة

السلام عليكم ورحمة الله وبركاته

اليوم موضوعنا هو اضافة نموذج اتصل بنا في صفحة 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>

وبعدها قم بحفض الاضافة واستعراضها وستجدها في غاية الجمالية

كتب بواسطة Saif alshamry

سيف الشمري وألقب ب (ابوعلي) عراقي الوطن والجنسية، أبلغ من العمري 20 عاماً، بدأت في مجال التدوين في عام 2011، تدرجت في هذا المجال حتي يومنا هذا وقد بلغت من العلم قليله.