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

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

معايــنة

المقارنة

البنود	نموذج بلوجر	foxyform
دعم اللغة
سهولة التركيب
امكانية تنسق الشكل
تنسيق الرسالة المرسلة
الحماية من السبام عبر كلمة التحقق

طريقة التركيب

قم بالدخول لصفحة التخطيط ثم أضف آداة نموذج الإتصال ستجدها في المزيد من الأدوات

بعد ذلك قم بالدخول لصفحة تحرير القالب ثم اختار الآداة بالشكل التالي

ثم اضغط على أسهم توسعة الآداة واحذف كل ما هو مجود بين هاذين الكودين

<b:includable id='main'>
</b:includable>

وهذه صورة توضيحية لما تم حذفه

ملحوظة في حالة أن الآداة تحمل رقم آخر غير الرقم واحد أي مثلاً ContactForm2 قم بتغييره الى واحد

آخر جزء في عملية التركيب

ننشئ صفحة ثابته جديد أو ان كانت لديك واحده منشئه

قم بوضع الكود التالي بها بعد أن تحول صندوق المواضيع من وضع تأليف الى وضع Html احذف اى شئ موجود ثم أضف الكود

<style>
.cnmufourm {
background: #ddd;background: -moz-linear-gradient(top,#ddd,#fff);background: -webkit-linear-gradient(top,#ddd,#fff);
border-radius: 10px;
box-shadow: 0 0 9px 2px #777777;
margin: 10px auto;
padding: 20px 20px 20px 30px;
text-align: center;
width:80%;
max-width:600px;
-webkit-padding-end:20px;
border:2px solid #777;
}

.contact-form-widget {
max-width: 100%;
width: 100%;
height:100%;
}

.contact-form-name,.contact-form-email,.contact-form-email-message {
border: 1px solid #BBBBBB;
color: #605F5F;
max-width: 100%;
padding: 3px 5px 5px;
width: 100%;
font-size:16px;
height:40px;
font-family: tahoma;
text-align:right;
}

.contact-form-email-message {
margin-bottom:15px;
min-height:150px
}

.contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover {
border: 1px solid #8F8F8F;
color:#000;
}

.contact-form-button-submit {
background: #F68B00;background: -moz-linear-gradient(top,#FBB74B,#FA6400);background: -webkit-linear-gradient(top,#FBB74B,#FA6400);
border:0;
color:#000;
font-size:16px;
padding:0 15px 26px;
font-family: tahoma;
box-shadow: 0 0 1px 0 #F86401;
border-radius:20px;
}

.contact-form-button-submit:hover {
background:#EC992C;
border:0;
color:#000;
box-shadow: 0 0 1px 0 #F86401;
border-radius:20px;
}

#ContactForm1_contact-form-submit2 {
background: #000;background: -moz-linear-gradient(top,#6F6F6E,#000);background: -webkit-linear-gradient(top,#6F6F6E,#000);
box-shadow: 0 0 1px 0 #000;
color:#fff;
font-size:16px;
padding:0 15px 26px;
font-family: tahoma;
border:0;
border-radius:20px;
}

#ContactForm1_contact-form-submit2:hover {
background:#424242;
box-shadow: 0 0 1px 0 #000;
color:#fff;
border:0;
border-radius:20px;
}

</style>

<div class="cnmufourm">
<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' value="الإسم" size='30' type='text' onblur='if (this.value == "") {this.value = "الإسم";}' onfocus='if (this.value == "الإسم") {this.value = "";}' />
    <p></p>
    <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="البريد الإلكتروني" size='30' type='text' onblur='if (this.value == "") {this.value = "البريد الإلكتروني";}' onfocus='if (this.value == "البريد الإلكتروني") {this.value = "";}'/>
    <p></p>
    <textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' value='اكتب رسالتك هنا' onblur='if (this.value == "") {this.value = "اكتب رسالتك هنا";}' onfocus='if (this.value == "اكتب رسالتك هنا") {this.value = "";}'></textarea>
    <p></p>
    <input class='contact-form-button contact-form-button-submit CNMU-button-color' id='ContactForm1_contact-form-submit' type='button' value='إرسال'/>
    <input class='contact-form-button contact-form-button-submit CNMU-button-color' id='ContactForm1_contact-form-submit2' type='reset' value='مسح'/>
    <p></p>
    <div style='text-align: center; max-width: 222px; width: 100%'>
    <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
    <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
    </div>
    </form>
    </div>
</div>
</div>
</div>

بعض التنسيقات

اللونين #ddd,#fff هما الوان تدرج الخلفية

الرقم 777 هو لون الظل ولون الإطار الخارجي

الكودين الأخضر والازرق هما الوان تدرجات الأزرار يمكنك تغيرهما

وطبعا مع قليل من الخبرة في CSS ستستطيع تنسيقها بشكل أفضل

وبالتوفيق

201