إنشاء صفحة اتصل بنا بلوجر جاهزة | قالب اتصل بنا HTML 2022
صفحة اتصل بنا بلوجر، يوفرلك نموذج الاتصال لزوارك واجهة سهلة لإرسال رسالة إليك مباشرة من موقع الويب الخاص بك.و توفر صفحة اتصل بنا على الموقع تجربة مستخدم أفضل و اكثر احترافية.
ولكن بالنسبة للمبتدئين الذين بدأوا في التدوين على بلوجر - Blogger منذ فتؤة ليست بالطويلة، فإن الأمر مرهق لأن بلوجر - Blogger ليس لديه ميزات مثل منصة ووردبريس - WordPress.و لا يمكن تخصيص بلوجر - Blogger كما تشاء و بسهولة ، كما أن إضافة نموذج صفحة اتصل بنا إلى بلوجر - Blogger مهمة صعبة شيئا ما،(كود نموذج صفحة اتصل بنا احترافية جاهزة بلوجر).
لا تقلق، سأساعدك خطوت بخطوت على تضمين نموذج صفحة اتصل بنا على بلوجر - Blogger. سأقدم دليلاً مفصلاً لإنشاء نموذج اتصال بنا لمدونتك أنيق للغاية.
ولكن قبل إضافة نموذج اتصال ، يجب أن تعرف ما هو الفرق بين إضافة نموذج اتصال رسمي من بلوجر - Blogger ونموذج اتصال مخصص.
مزايا نموذج اتصال بنا من بلوجر - Blogger.
- مجاني وآمنة و بدون مشاكل أمنية 100%.
- من السهل إضافته على المدونتك.
- ستتلقى الرسالة بمجرد أن يتصل بك شخص ما فورا.
- لم يتم إعادة تحميل الصفحة بالكامل لإرسال الرسالة اليك من طرف المرسل (الزائر).
- صفحة اتصل بنا بلوجر بدون أخطاء.
فوائد نموذج اتصال بنا مخصص.
- يتم إنشاء صفحة اتصال بنا مخصص لتنمية موقعك.
- يجعل نموذج الاتصال الخاص بك أكثر أناقة و اكثر جاذبية.
- من السهل إضافة عناصر متعددة إلى نموذج الاتصال بنا الخاص بك.
- يمكنك تلقي رسائل من جهات الاتصال على أي عنوان بريد إلكتروني تظيفه.
طريقة إضافة نموذج اتصال بنا أنيق وعصري على بلوجر - Blogger؟
الصق كود HTML التالي (لنموذج انشاء صفحة اتصل بنا بلوجر) وانشر الصفحة. إنه نموذج اتصال أنيق لـ بلوجر.
<div id="contact-form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="الاسم" size="30" type="text" value="" />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="بريد إلكتروني" size="30" type="text" value="" />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="الرسالة" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="إرسال" />
<br />
<div style="text-align: center;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<style type="text/css">#contact-form{background:#ececec;padding:10px;box-shadow:0 0 0 1px #d9dce1}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{margin:5px auto;border:1px solid #e3e3e3;transition:all .5s ease-out;width:100%;border-radius:10px;padding:8px 15px;margin-bottom:10px;font-family:'bein',Roboto,sans-serif}#ContactForm1_contact-form-submit{border:1px solid #e3e3e3;font:unset;text-shadow:1px 1px 5px #111;font-weight:700;font-size:14px;padding:5px 15px;background-color:#264079;border-radius:5px;color:#fff;font-family:'bein',Roboto,sans-serif;letter-spacing:1px;cursor:pointer}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7)}.contact-form-error-message-with-border{color:#b90000;font-weight:700}</style>
<script src="https://www.blogger.com/static/v1/widgets/2227587253-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
_WidgetManager._Init('');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'contact-sec', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'جارٍ الإرسال...', 'contactFormMessageSentMsg': 'تم إرسال رسالتك.', 'contactFormMessageNotSentMsg': 'تعذر إرسال الرسالة، يرجى المحاولة مرة أخرى في وقت لاحق.', 'contactFormInvalidEmailMsg': 'يلزم إدخال عنوان بريد إلكتروني صالح.', 'contactFormEmptyMessageMsg': 'لا يمكن أن يكون حقل الرسالة فارغًا.', 'title': 'نموذج الاتصال', 'blogId': '8813784617122054906', 'contactFormNameMsg': 'الاسم', 'contactFormEmailMsg': 'بريد إلكتروني', 'contactFormMessageMsg': 'رسالة', 'contactFormSendMsg': 'إرسال', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
</script>تحقق من لقطة الشاشة التالية
افتح الصفحة في متصفح الويب الخاص بك وتحقق مما إذا كانت الصفحة تعمل بشكل صحيح ويمكن للمستخدمين إرسال رسائل إليك.
انتقل إلى قسم الصفحات وانقر على أيقونة العين لعرض صفحة اتصال بنا.
ستبدو صفحة الاتصال بنا الخاصة بـ Blogger مشابهة لهذا المثال.
الكلمات الأخيرة
في هذه المقالة ، فهمنا كيفية اضافة صفحة اتصل بنا لمدونة بلوجر بنقرة واحدة باستخدام كود نموذج اتصل بنا. أتمنى أن تكون قد أحببت هذا المقال. في حالة وجود أي مشكلة ، لا تتردد في السؤال في قسم التعليقات الموضح أدناه. شكرا لك
"لا تقرأ وترحل، ضع بصمتك.. وشاركنا برأيك ..."
تعليقات
إرسال تعليق
تذكر دائمًا أن هناك إنسانًا آخر ، شخص يشبهك كثيرًا ، على الجانب الآخر من تلك الشاشة. كن لطيفا في تعليقاتك!