منجز
معلومة جديدة كل يوم

8 اشكال انيقة للحصول على صفحة ثابتة مدون الاتصال

يعد نموذج الاتصال في Blogger مهمًا للغاية لمنح القراء فرصة للتواصل معك. لا تعد إضافة نموذج جهة اتصال إلى مدونة Blogger الخاصة بك صعبة للغاية. هناك عنصر واجهة مستخدم Blogger Contact Form متوفر في قائمة الأدوات الافتراضية لـ Blogger. ولكن قبل بضعة أيام ، كان الأمر صعباً للغاية لأنه لم يكن هناك مثل هذا النوع من الأدوات المصغرة المتاحة هناك. اليوم سنتعلم كيفية إضافة نموذج اتصال Blogger أنيق في صفحة ثابتة؟

بهذه الطريقة ، سنقوم بإنشاء صفحة اتصال لمدونة مدوننا. أداة نموذج جهة الاتصال الافتراضية في Blogger جديدة جدًا وخفيفة الوزن. لجعلها أكثر جاذبية ، سأقدم بعض عناصر واجهة مستخدم Blogger Contact Form المصممة بشكل جميل. ستكون قادرًا على استخدام تلك الموجودة في صفحة الاتصال الخاصة بمدونتك الإلكترونية. دعنا نبدأ.

شاهد اكتر

كيفية إضافة / تمكين نموذج الاتصال في Blogger في Blogger؟

بادئ ذي بدء ، سيتعين علينا إضافة عنصر واجهة مستخدم نموذج مدون الاتصال في أي مكان في مدونة مدون لدينا. سيمكن هذا وظيفة نموذج الاتصال. خلاف ذلك ، لن نتلقى رسائل البريد الإلكتروني من أشكال الاتصال لدينا. للقيام بذلك ، أولاً وقبل كل شيء:

1. تسجيل الدخول إلى حساب مدون الخاص بك.
2. انتقل إلى لوحة معلومات / نظرة عامة على Blogger .
3. حدد قسم التخطيط من القائمة اليمنى.
4. انقر فوق إضافة أداة (سيكون الشريط الجانبي / التذييل أفضل)> المزيد من الأدوات .
5. انقر فوق زر Blue Plus في أداة نموذج جهة الاتصال ، ثم قم بحفظه .

إضافة المدون تلامس شكل في ومدون

لقد قمت بنجاح بإضافة عنصر واجهة مستخدم Blogger Contact Formget في مدونتك. لقد حان الوقت الآن لإخفاء عنصر واجهة مستخدم Blogger الافتراضي هذا لأننا سنقوم بإنشاء نموذج الاتصال الأنيق في صفحة ” اتصل بنا ” الثابتة .

كيفية إخفاء نموذج الاتصال الافتراضي في Blogger؟

لإخفاء نموذج الاتصال في Blogger الافتراضي ، انتقل إلى قسم ” القالب وانقر على زر تحرير HTML “. الآن ابحث عن كود نهاية النمط: ]]> </ b: skin> . الصق كود CSS الصغير هذا أعلى بقليل. حفظ القالب الخاص بك وانت القيام به. أعد تحميل مدونتك وسترى أداة جهات الاتصال الافتراضية تختفي.

الشفرة :

div # ContactForm1 {
عرض: لا شيء!
}

، كيف لإخفاء الافتراضي المدون تلامس شكل

أدخل أيقونات Font Awesome في Blogger:

لقد استخدمت بعض الرموز Font Awesome في نموذج الاتصال المخصص للمدون. لذلك سيكون عليك إدراج ورقة الأنماط هذه في مدونتك. لفعل هذا:

  • انتقل إلى قسم القالب > انقر فوق تحرير HTML > ابحث عن رأس النهاية: </ head>
  • انسخ الرمز والصقه مباشرةً أعلى “</head>”.

الشفرة :

<link href = "// netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel = "stylesheet" />
  • انقر على زر ” حفظ القالب “. انتهيت.

إدراج الخط بين رهيبة-رموز في مدون

ملاحظة: إذا كان القالب الخاص بك يحتوي بالفعل على هذا الرمز ، فلن تضطر إلى تطبيق هذا مرتين.

كيفية إضافة نموذج الاتصال Blogger في صفحة ثابتة؟

الآن يمكننا إنشاء صفحة “اتصل بنا” الثابتة للمدون لتطبيق نموذج اتصل بنا أنيق وجذاب. للقيام بذلك ، يجب علينا إنشاء صفحة الاتصال بنا على بلوق. إذا كان لديك بالفعل صفحة اتصل بنا ، يمكنك استخدامها ، ولكن إذا لم يكن لديك ، يمكنك إنشاءها بهذه الطريقة.

  • انتقل إلى قسم الصفحات وانقر على زر صفحة جديدة كما هو موضح أدناه:

إضافة المدون تلامس شكل في واحد ساكنة صفحة 1

  • ملء عنوان الصفحة مع الاتصال بنا / الاتصال . (اسم صفحة الاتصال الخاصة بك). أدخل هذه الصفحة في وضع HTML بالنقر فوق علامة التبويب HTML.
  • انتقل الآن إلى خيارات إعدادات الصفحة . انقر عليه. حدد تعليقات القراء ” عدم السماح ، إخفاء القائمة “. انقر على زر القيام به . انظر لقطة الشاشة لتصبح أكثر وضوحًا:

إضافة المدون تلامس شكل في واحد ساكنة صفحة 2

  • اختر الآن تصميم نموذج جهة اتصال Blogger الذي تفضله أكثر من القائمة أدناه. انسخ الرمز والصقه في صفحة الاتصال الخاصة بك كما هو موضح أعلاه. انشر الصفحة وشاهد السحر.

1. تصميم نموذج الاتصال بمدون 1:

هذا نموذج اتصال مدون جميل وسريع الاستجابة. لديها تصميم بسيط وجذاب. أيضًا ، يحتوي هذا النموذج على بعض الميزات الإضافية. لديها زر واضح لجعل منطقة النص فارغة بنقرة واحدة. لديها بعض الأزرار الاجتماعية لإعلام المستخدمين بالصفحات الاجتماعية.

تصميم نموذج الاتصال في Blogger 6

الشفرة :

<نمط>
.tb-contact-form-widget {background-colour: # A4A4A4؛ background-image: url ("https://2.bp.blogspot.com/-JgcTvhPBO1o/WU1E2reu27I/AAAAAAAAAAE4/op_AzQXKXBXCXBX img-2.jpg ") ؛ تكرار الخلفية: تكرار ؛ موضع الخلفية: 100٪ 100٪ ؛ اللون: أبيض ؛ الحشو: 25 بكسل ؛}
.srbtn {عرض: مضمنة كتلة؛}
.cform-button ، .btn-reset {background-color: # f1f1f1؛ padding: 5px 30px؛}
.cform-button: hover {background-color: # 2980b9؛ color: #fff؛}
.btn-reset: hover {background-color: red؛ color: #fff؛}
.tb-contact-form-widget h3 {text-align: center؛ الهامش: 20px 0 ؛ الحشو: 10px 0 ؛ الحد العلوي: 1px dotted # f5f5f5؛}
.c-form-name ، .c-form-email {width: 50٪؛ أقصى عرض: 50 ٪ ؛ الهامش السفلي: 10px ؛ الحشو: 10px ؛ الحد: 1px صلب #CCC ؛ حد نصف القطر: 5px ؛
-Moz-border-radius: 5px ؛
-Wkkit-border-radius: 5px ؛
-moz-box-shadow: 0 1px 1px #ccc inset، 0 1px 0 #fff؛
-webkit-box-shadow: 0 1px 1px #CCC inset، 0 1px 0 #FFF؛
box-shadow: 0 1px 1px #CCC inset، 0 1px 0 #FFF؛}
.c-form-email-message {width: 95٪؛ أقصى عرض: 95 ٪ ؛ الهامش السفلي: 10px ؛ الحشو: 10px ؛ الحد: 1px صلب #CCC ؛ حد القطر: 5px ؛ صندوق الظل: 0 1px 1px #CCC داخلي ، 0 1px 0 #FFF ؛
-Moz-border-radius: 5px ؛
-Wkkit-border-radius: 5px ؛
-moz-box-shadow: 0 1px 1px #ccc inset، 0 1px 0 #fff؛
-webkit-box-shadow: 0 1px 1px #CCC inset، 0 1px 0 #FFF؛}
.c-form-name ، و .c-form-email ، و .c-form-email-message input: focus {background-color: #FFF؛ box-shadow: 0 0 0 1px # E8C291 inset؛-border-color: # E8C291 ؛ مخطط: لا شيء ؛
-moz-box-shadow: 0 0 0 1px # e8c291 inset؛
-webkit-box-shadow: 0 0 0 1px # E8C291 inset؛}
. ب-أزرار الاجتماعية {قائمة على النمط من نوع: لا شيء؛ مواءمة النصوص: مركز؛}
.b-social-buttons li {display: inline-block؛ padding: 15px؛ background-color: # f5f5f5؛ border-radius: 5px؛}
.b-social-buttons li a {color: # 333؛ text-decoration: none؛}
# ContactForm1_contact-form-success-message ، # ContactForm1_contact-form-error-message {width: 100٪؛ margin-top: 35px؛}
</ النمط>
<div class = "tb-contact-form-widget"> <form name = "contact-form"> <div class = "form-name"> <span> <i class = "fa fa-pencil-square-o "> </i> اسمك: </span> <br /> <input class =" c-form-name "id =" ContactForm1_contact-form-name "name =" name "size =" 30 "type =" text "value =" "/> </div> <div class =" form-email "> <span> <i class =" fa fa-envelope-o "> </i> عنوان البريد الإلكتروني *: </ span> <br /> <input class = "c-form-email" id = "ContactForm1_contact-form-email" name = "email" size = "30" type = "text" value = "" /> </ div > <div style = "clear: both؛"> </div> <div class = "form-message "> <span> <i class =" fa fa-keyboard-o "> </i> الرسالة *: </span> <br />
<textarea class = "c-form-email-message" cols = "25" id = "ContactForm1_contact-form-email-message" name = "email-message" rows = "5"> </textarea> <div class = "srbtn"> <input class = "cform-button" id = "ContactForm1_contact-form-submit" type = "button" value = "Submit" /> <input type = "reset" class = "btn-reset" value = "مسح" /> </div> <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>
<h3> مواقعنا الاجتماعية </ h3>
<ul class = "b-social-buttons">
<li> <a href=" # "class="btn-lg"> <i class =" fa fa-twitter "> <span class =" network-name "> Twitter </span> </i> </ أ> </ لى>
<li> <a href=" # "class="btn-lg"> <i class =" fa fa-facebook "> <span class =" network-name "> Facebook </span> </i> </ أ> </ لى>
<li> <a href=" # "class="btn-lg"> <i class =" fa fa-youtube-play "> <span class =" network-name "> Youtube </span> </i> </A> </ لى>
</ UL> </ div> </ form> </ div>

ترتيب:

  • يستخدم هذا النموذج بعض الرموز رهيبة الخط. لذلك ، يجب عليك تثبيت مكتبة الخط رائع كما هو موضح أعلاه.
  • إذا تلقيت رسالة الخطأ ” https ” أثناء تثبيت هذه الأداة ، فما عليك سوى ” استبعاد ” ذلك والنقر على زر التحديث مرة أخرى لأنه إذا استخدمنا https في أي وقت ، فسيتم إعادة توجيه جميع موارد هذا النموذج تلقائيًا.
  • لاستخدام الأزرار الاجتماعية ، ما عليك سوى استبدال ” # ” المميز بعناوين URL الخاصة بك على twitter و facebook و youtube.

2. تصميم نموذج الاتصال بمدون 2:

تصميم نموذج الاتصال في Blogger-1rالشفرة :

<style> .contact-form-widget {color: # 000؛ margin-left: auto؛ max-width: 100٪؛ margin-right: auto؛ padding: 0px؛ width: 600px؛} .form_name، .form_email {float : left ؛ العرض: 48٪ ؛ padding: 5px ؛} .form_message {padding: 5px؛} .contact-form-name ، .contact-form-email {font-size: 16px؛ width: 100٪؛ height: 40px؛ الحد الأقصى للعرض: 100٪ ؛ الهامش السفلي: 10 بكسل ؛ الحشو: 10 بكسل ؛}. نموذج اتصال البريد الإلكتروني للرسالة {الارتفاع: 100 بكسل ؛ العرض: 100٪ ؛ حجم الخط: 16 بكسل ؛ الحد الأقصى للعرض: 100٪ ؛ الحشو : 10px ؛ أسفل الهامش: 10px ؛} .contact-form-button-submit {font-size: 16px؛ الارتفاع: 30px ؛ لون الحدود: # C1C1C1 ؛ العرض: 20٪ ؛ الخلفية: # E3E3E3 ؛ العرض الأقصى: 20٪ ؛ اللون: # 585858 ؛ الهامش السفلي: 10px ؛} .contact-form-button-submit: hover {color: # 000000؛ والحدود: 1px solid #FAFAFA؛ background: #ffffff؛} </style> <div class = "contact-form-widget"> <div class = "form"> <form name = "contact-form "> <div class =" form_name "> اسمك: <input class =" contact-form-name "id =" ContactForm1_contact-form-name "name =" name "size =" 30 "type =" text "value =" "/> </div> <div class =" form_email "> عنوان البريد الإلكتروني *: <input class =" contact-form-email "id =" ContactForm1_contact-form-email "name =" email " size = "30" type = "text" value = "" /> </div> <div style = "clear: both؛"> </div> <div class = "form_message"> الرسالة *: <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 =" Submit "/> <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> </div> </form> </div> </div>ContactForm1_contact-form-success-message "> </div> </div> </form> </div> </div>ContactForm1_contact-form-success-message "> </div> </div> </form> </div> </div>

3. تصميم نموذج الاتصال بمدون 3:

مدون الاتصال على شكل تصميم-2الشفرة :

<style> .contact-form-widget {-moz-border-radius: 5px؛ -Wkkit-border-radius: 5px ؛ لون الخلفية: #eaeaea ؛ الخلفية: - التدرج اللوني الخطي (أعلى ، # fffff ، #eaeaea) ؛ الخلفية: -تدرج-الويب (خطي ، أعلى اليسار ، أسفل اليسار ، لون توقف (0.0 ، #ffffff) ، لون توقف (1.0 ، #eaeaea)) ؛ اللون: # 444 ؛ الحدود: 1px # الكاكاكا الصلبة. الهامش: 0 0 25 بكسل ؛ أقصى عرض: 96 ٪ ؛ حجم الخط: 1.4em ؛ الحشو: 8px 10px ؛ } .contact-form-name ، .contact-form-email {width: 50٪؛ أقصى عرض: 50 ٪ ؛ الهامش السفلي: 10 بكسل ؛ } .contact-form-email-message {width: 100٪؛ أقصى عرض: 100 ٪ ؛ الهامش السفلي: 10 بكسل ؛ } </style> <div class = 'widget ContactForm' id = 'ContactForm2'> <div class = 'contact-form-widget'> <div class = 'form'> <form name = 'contact-form'> < P>

4. تصميم نموذج الاتصال بمدون 4:

تصميم نموذج الاتصال في Blogger - 3rالشفرة :

<style> # ContactForm2 {background: # 98AFC7؛ } .c-form {border: 1px solid # f5f5f5؛ الحشو: 0 0 20px 0 ؛ إخفاء الفائض؛ } .c-form-left {padding: 20px؛ } .c-form-right {padding: 20px؛ } .contact-form-widget {margin: 0 auto؛ الحشو: 10px. العرض: 400 بكسل ؛ أقصى عرض: 100 ٪ ؛ } .contact-form-email-message {width: 100٪؛ max-width: 100٪؛ margin-bottom: 10px؛} </style> <div class = 'c-form'> <div class = 'c- form-left '> <div class =' ​​form 'style =' float: left؛ '> <div class =' ​​widget ContactForm 'id =' ContactForm2 '> <div class =' ​​contact-form-widget '> <div class = 'form'> <form name = 'contact-form'> <p> الاسم </ p> <input class = 'contact-form-name' id = 'ContactForm1_contact-form-name' name = 'name' p class = 'contact-form-success-message' id = 'ContactForm1_contact-form-success-message'> </p> </form> </div> </div> </div> </div> </ div> <div class = 'c-form-right'> <div style = 'float: right؛'> <div dir = "ltr" style = "text-align: left؛" trbidi = "on"> <div class = "separator" style = "clear: both؛ text-align: left؛"> <a href = "https://3.bp.blogspot.com/-yRd1HyVntQc/WBnoEKlsRFI/AAAAAAAAD8I/12a9gt1XgNga_lTUQFMPhOsa5qAoCnwpgCLcB/s1600/bo-contact-avatar.jpg "imageanchor =" 1 "> <IMG الحدود =" 0 "SRC =" الشبكي: / /3.bp.blogspot.com/-yRd1HyVntQc/WBnoEKlsRFI/AAAAAAAAD8I/12a9gt1XgNga_lTUQFMPhOsa5qAoCnwpgCLcB/s1600/bo-contact-avatar.jpg "/> </A> </ div> <br /> سطر العنوان 1 <br /> عنوان السطر 2 <br /> سطر العنوان 3 <br /> الحالة <br /> الهاتف: +49 30 47373795 <br /> البريد الإلكتروني: mail@blogornate.com      </div> </div> </div> < / div> <div style = 'clear: both؛'> </div>

يجب أن يكون القسم المميز باللون الأصفر هو عنوان URL لملف التعريف الخاص بك.  يجب أن يكون القسم المميز بالجير هو عنوان URL للصورة. سيحتوي القسم المميز باللون البرتقالي على عنوانك. تغيير هذه المقاطع بالطريقة التي تريدها.

5. تصميم نموذج الاتصال بمدون 5:

تصميم نموذج الاتصال في Blogger -4rالشفرة :

"> مهم </ span> </span> <br /> <textarea cols =" 25 "id =" ContactForm1_contact-form-email-message "name =" email-message "rows =" 5 "> </textarea> <br /> <input id = "ContactForm1_contact-form-submit" type = "button" value = "Send" /> <br /> <div style = "max-width: 222px؛ محاذاة النص: المركز ؛ width: 100٪؛ "> <div id =" ContactForm1_contact-form-error-message "> </div> <div id =" ContactForm1_contact-form-success-message "> </div> </div> </ form > <br /> <style scoped = "" type = "text / css"> # comments، .post_meta، # blog-pager {display: none؛} # ContactForm1_contact-form-name، # ContactForm1_contact-form-email {height : تلقائي ؛ الهامش: 5px تلقائي ؛ الحشو: 10px ؛ الخلفية:

6. تصميم نموذج الاتصال بمدون 6:

أنيقة المدون تلامس شكل 5الشفرة :

value = 'Submit' /> <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> </form> </div> </div> <style> .contact-form-widget p.text {color: #fff؛ font-size: 16px ؛ الخط الوزن: جريئة. font-family: sans-serif ؛ ارتفاع الخط: 0.5em ؛ تحويل النص: أحرف كبيرة ؛} .contact-form-widget {margin-right: auto ؛ margin-left: auto ؛ الارتفاع: 100٪ ؛ أقصى عرض: 90٪ ؛ حشوة: 30 بكسل ؛ نصف قطر الحد: 5 بكسل ؛ حد: 1 بكسل x rgba صلب (0،0،0 ، .2) ؛ خلفية: rgba (0 ، 0 ، 0 ، 0.5) ؛ خلفية مقطع: padding-box؛ تجاوز السعة: مخفي ؛ -moz-border-radius: 5px ؛ -webkit-border-radius: 5px ؛ -webkit-background-clip: padding-box؛ -moz-background-clip: padding؛} .form textarea {background: # عفاف ؛ العرض: 93٪ ؛ عدم التكرار ؛ الحشو - اليسار: 45 بكسل ؛} box.png) ؛ الخلفية المكررة: عدم التكرار ؛ حشوة يسار: 45 بكسل ؛ خلفية موضع: 11 بكسل × 8 بكسل ؛ حجم خلفية: 28 بكسل × 28 بكسل ؛} .form input.message {background-image: url (https://2.bp.blogspot.com/-KaDr1HCm_JA/WU1Gt3F5ufI/ AAAAAAAAAFE / YST5aPPM-MgKh09SWXoOn-fhfbK_iJmtACLcBGAs / s1600 / pencil.png) ؛ تكرار الخلفية: عدم التكرار ؛ حجم الخلفية: 30 بكسل × 30 بكسل ؛ تركيز الخلفية: 11 بكسل × 8 بكسل ؛ التركيز البادري: 45 بكسل .form textarea: focus {-moz-box-shadow: 0 0 5px 1px rgba (255،255،255، .5)؛ - webkit-box-shadow: 0 0 5px 1px rgba (255،255،255، .5)؛ box-shadow: 0 0 5px 1px rgba (255،255،255، .5) ؛ تجاوز السعة: مخفي ؛} .btn {الخلفية: # 416b68 ؛ العرض: 138 بكسل ؛ مهم ؛ الارتفاع: 45 بكسل ؛ نصف قطر الحدود: 4px ؛ الحدود: 1px solid # 253737 ؛ -wkkit-border-radius: 4px؛ -moz-border-radius: 4px؛ float: right ؛ background: -webkit-gradient (خطي ، أعلى اليسار ، أسفل اليسار ، من (# 6da5a3) ، إلى (# 416b68)) ؛ الخلفية: -moz-linear-gradient (أعلى ، # 6da5a3 ، # 416b68) ؛ الخلفية: - التدرج اللوني الخطي (أعلى ، # 6da5a3 ، # 416b68) ؛ الخلفية: - التدرج اللوني الخطي (أعلى ، # 6da5a3 ، # 416b68) ؛ خلفية الصورة: -ms-linear-gradient (أعلى ، # 6da5a3 0٪ ، # 416b68 100٪) ؛ الخلفية: - التدرج اللوني الخطي (ms ، # 6da5a3 ، # 416b68) ؛ الحشو: 10.5px 21px ؛ صندوق الظل: rgba (255،255،255،0)) 0 1px 0 ، inset rgba (255،255،255،0.7) 0 1px 0 ؛ -webkit-box-shadow: rgba (255،255،255،0.1) 0 1px 0، rgba inset (255،255،255،0.7) 0 1px 0؛ -moz-box-shadow: rgba (255،255،255.1) 0 1px 0 ، داخلي rgba (255،255،255،0.7) 0 1px 0؛ text-shadow: # 333333 0 1px 0؛ color: # e1e1e1؛} .btn: hover {الخلفية: # 416b68؛ الحدود: 1px solid # 253737؛

7. تصميم نموذج الاتصال بمدون 7:

أنيقة نموذج الاتصال مدون

الشفرة :

<style> .c-form-name ، .c-form-email ، .c-form-email-message {padding: 10px؛ margin: 8px 0 8px 0؛ border: 1px solid # E5E5E5؛ width: 50٪؛ colour : # 999999 ؛ box-shadow: rgba (0،0،0،0.1) 0px 0px 8px ؛ -moz-box-shadow: rgba (0،0،0،0.1) 0px 0px 8px؛ -webkit-box-shadow: rgba (0،0،0،0.1) 0px 0px 8px؛}
.C شكل البريد الإلكتروني، رسالة {العرض: 95٪؛ الطول: 150px؛ خط الطول: 18px؛}
.tb-contact-form-widget الإدخال: التحويم ، textarea: التحويم ، الإدخال: البؤرة ، textarea: البؤرة {border-color: 1px solid # C9C9C9 ؛ box-shadow: rgba (0،0،0،0.2) 0px 0px 8px ؛ -moz-box-shadow: rgba (0،0،0،0.2) 0px 0px 8px؛ -webkit-box-shadow: rgba (0،0،0،0.2) 0px 0px 8px؛}
.tb-contact-form-widget {{margin-left: 10px؛ colour: # 999999؛}
.cform-button {width: 100px ؛ الارتفاع: 40px ؛ لون الخلفية: # 474E70 ؛ color: #FFF ؛ حد نصف القطر: 3px ؛ -moz-border-radius: 3px ؛ -webkit-border-radius: 3px؛}
# ContactForm1_contact-form-success-message ، # ContactForm1_contact-form-error-message {width: 50٪؛ margin-top: 25px؛}
</style> <div class = "tb-contact-form-widget"> 
<form name = "contact-form"> 
<div class = "name"> 
<input class = "c-form-name" id = "ContactForm1_contact-form-name" name = "name" size = "30" type = "text" value = "" placeholder = "Your Name" />
<label for = "name"> الاسم </label>
</ div> 
<div class = "email">
<input class = "c-form-email" id = "ContactForm1_contact-form-email" name = "email" size = "30" type = "text" value = "" placeholder = "mail@example.com" />
<label for = "email"> E-mail * </label>
</ div> 
<div style = "clear: both؛"> </div>
<div class = "message"> 
<textarea class = "c-form-email-message" cols = "25" id = "ContactForm1_contact-form-email-message" name = "email-message" rows = "5" placeholder = "اكتب شيئًا إلينا .. ">
</ textarea> من
<div class = "srbtn">
<input class = "cform-button" id = "ContactForm1_contact-form-submit" type = "button" value = "Submit" />
</ div>
<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>

يتم اختبار كل من هذه التصميمات النموذجية للاتصال بمدون الخمسة. يمكنك استخدام أحد أشكال جهات الاتصال هذه في مدونتك. في حالتي ، هذه الأشكال تعمل بشكل جيد. إذا لم يعمل أحدهم بشكل صحيح ، فيرجى إخبارنا بالتعليق. إذا كان هذا مفيدًا لك ، فالرجاء ألا تنسى مشاركة هذا مع صديقك.

اترك تعليقا