نموذج اتصل بنا لمدونات بلوجر

اضافة نموذج اتصل بنا عن طريق اضافة اداة في بلوجر ولكن سوف نجعلها اكثر احترافية وتكون بصفحة مستقلة دون ظهورها بالصفحةارئيسية او اي صفحات اخرى 

اولآ   التوجه الى التخطيط اضافة اداة جديدة نموذج اتصل بنا

وبعدهاعليك التوجه الى لوحة التحكم html والبحث عن هذا الكود عن طريق Ctrl+F
واضف الكود التالي اعلى  منه (فوقه)

 <style>
#ContactForm1 {display: none;}
</style>

والان توجه لانشاء صفحة جديدة اضغط علىHTML بعد ان تفتح انشاء صفحة جديدة امسح اي كود موجود والصق الكود التالي

<div dir="rtl" style="text-align: right;" trbidi="on">
<!-- contact us page by bloggeram.com --> 
<br />
<div class="bloggeram-contact-page">
<div style="text-align: center;">
<span style="font-size: large;"><b>يمكنك مراسلتنا عبر النموذج التالي :</b></span></div>
<div style="text-align: center;">
<span style="font-size: large;"><b>ولكن تذكر كتابة الموضوع بشكل مختصر والاستفسار او السؤال يكون واضح حتى يتم الرد عليك&nbsp;</b></span></div>
<div style="text-align: center;">
<span style="background-color: white; color: red; font-size: large;"><b>وسوف يتم تجاهل الرسائل الاخرى ذات الموضوع الطويل والغير مفهوم&nbsp;</b></span></div>
<div style="text-align: center;">
<span style="font-size: large;"><b>وشكرآ لكم</b></span></div>
<div style="text-align: center;">
<span style="font-size: large;"><br /></span></div>
<div style="text-align: center;">
<span style="font-size: large;"><br /></span></div>
<center>
<div class="contact-us-page">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<span style="font-size: large;"><b><span class="contact-us-text">الاسم</span>
<input autocomplete="off" class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
</b></span><br />
<span style="font-size: large;"><b><span class="contact-us-text">بريد إلكتروني <span style="font-weight: bolder;">*</span></span>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
</b></span><br />
<span style="font-size: large;"><b><span class="contact-us-text">رسالة <span style="font-weight: bolder;">*</span></span>
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
</b></span><br />
<span style="font-size: large;"><b><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="إرسال" />

</b></span><br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<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>
</div>
</form>
</div>
</div>
</div>
<b><span style="font-size: large;"><br />
تأكد من ظهور (<span style="color: red;"> تم أرسال رسالتلك</span> )</span><br />

</b></center>
<center>
<span style="font-size: large;"><b><br /></b></span></center>
<center>
<span style="font-size: large;"><b>ادارة</b></span></center>
<center>
<span style="font-size: large;"><b>عالم الابداع</b></span></center>
</div>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"></link>
<link href="https://fonts.googleapis.com/earlyaccess/droidarabickufi.css" rel="stylesheet" type="text/css"></link>

<style>

.bloggeram-contact-page {
direction: rtl;
text-align: center;
}

.contact-us-page { 
width:98%; max-width:400px;
}

.contact-us-text { 
float: right;
}

.contact-form-button, .contact-form-button-submit, #ContactForm1_contact-form-submit {
font-family: 'Droid Arabic Kufi';
color: #fff;
background: #446faa;
border-color: #425c80;
width: 95%;
height: 45px;
font-size: 1.1em;
    ;margin-top: 35px
}


.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: none !important;
width: 95% !important;
min-height: 40px !important;
font-family: 'Droid Arabic Kufi' !important;
}
.contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover {
box-shadow: none;
}
.contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus {
box-shadow: none;
outline: none;
}



.contact-form-widget {
width: inherit;
max-width: none !important;
padding: 10px 12px 5px 0px;
font-size: .90em;
}

#ContactForm1_contact-form-submit {
font-family: 'Droid Arabic Kufi', Voces;
color: #fff;
background: #446faa;
border-color: #111;
width: 95%;
height: 45px;
font-size: 1.1em;
    ;margin-top: 35px

}
#ContactForm1_contact-form-submit:hover {
background: #1d1c1a;
border: #1d1c1a;
}

</style></div>

وبعدها اضغط على تأليف وضع عنوان وليكن مثلآ اتصل بنا واعمل نشر  ستجد ان الصفحة ظهرت بشكل نموذج اتصل بنا انسخ الرابط وضعه في قسم اتصل بنا وهكذا انتهينا من تركيب النموذج والرسائل سوف تذهب مباشر على البريد الذي انشأت به المدونة

ومبروك عليك