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

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

والان بعد ان اضفتها اضغط علي حفظ ومبروك عليك النموذج الجديد

شارك الموضوع مع أصدقائك

Facebook Google+ Twitter Digg