اضافة صفحة اتصل بنا بتصميم الماتيريال الرائع

---- your ads -----

طبعا في هذا المقال لن اتحدث عن اهمية صفحة اتصل بنا ولا عن دورها في تسهيل التواصل مع زوار ومتابعي المدونة, لكن سأطرح كيفية إضافة  هذه الصفحة المهمة بالطريقة الصحيحة وبسهولة.


مـعـاينة الــصــفحـة

أولا وقبل كل شيء عليك اضافة الاداة الاساسية للإضافة ,وذلك عبر الذهاب الى تخطيط ثم اختر اضافة أداة ( لايهم اين مكانها إن كان في السايدبار أو غيره) ثم أضف أداة نموذج الإتصال ثم اضغط على حفظ.
الان وبعد  قيامنا بإاضافة أداة نموذج الإتصال التي غالبا بعد اضافتها سيظهر نموذج  الاتصال عبر صفحات المدونة بمكان إضافته , لكن نحن نريد تفعيله فقط في صفحة اتصل بنا, ولحل هذه المشكلة نحتاج لإخفاء النموذج وذالك عبر الذهاب الى المظهر ثم اختر تعديل HTML ثم ابحث بواسطة Ctrl + F عن الوسم </head> ثم ألصق الكود التالي أعلاه/قبله

<style type='text/css'>
#ContactForm1,#ContactForm1 br{display:none}
</style>

إذا لم يظهر النموذج في صفحات المدونة لا داعي لإضافة الكود السابق غالبا الكثير من القوالب تحتويه.
الأن نتجه الى الصفحات ونقوم بإنشاء صفحة جديدة ولنسميها مثلا contact-us أو contact وثم نقوم بالضغط على تبويب  HTML و نقوم بمسح جميع الأكواد الموجودة و نلصق الكود التالي

<div dir="rtl" style="text-align: right;" trbidi="on">
<style scoped="scoped">
.blanterinput{float:none;position:relative;margin-bottom:45px;margin-left:10px}.blanterinput input,.blanterinput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.blanterinput input:focus,.blanterinput textarea:focus{outline:none}.blanterinput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;right:0;top:10px;transition:.2s ease all}.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label{top:-20px;font-size:14px;color:#2d87fb}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#2d87fb;transition:.2s ease all}.bar:before{right:50%}.bar:after{left:50%}.blanterinput input:focus ~ .bar:before,.blanterinput input:focus ~ .bar:after,.blanterinput textarea:focus ~ .bar:before,.blanterinput textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;right:0;pointer-events:none;opacity:.5}.blanterinput input:focus ~ .highlight,.blanterinput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label{top:-20px;font-size:13px;color:#2d87fb}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{color:#fff!important;background:#2d87fb;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:right; font-family: unset;margin-top:15px}
input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
#ContactForm1_contact-form-error-message{float:left;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:left;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
form{
    padding: 0 0 40px 0;
}
</style>
<form name="contact-form">
<div class="blanterinput">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>الإســـم</label>
</div>
<div class="blanterinput">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>البريد الإلكتروني</label>
</div>
<div class="blanterinput">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
<span class="highlight"></span>
<span class="bar"></span>
<label>الرسالة</label>
</div>
<input id="ContactForm1_contact-form-submit" type="button" value="إرســــال" />

<br />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</form>
</div>

وقم أيضا بجعل اعدادات الصفحة كالتالي  ثم نضغط على حفظ

الأن نقوم بمراجعة النتائج عبر معاينة او عرض الصفحة
قم بالضغط على زر الارسال فقط لإختبار نموذج الإتصال إذا ظهرت رسالة   يلزم ادخال بريد الكتروني صالح   فهذا يعني أن النموذج يعمل على أكمل وجه ,أما ان لم تظهر فهذا يعني أن المدونة مسرعة عبر استبال أكواد <head> و <body> و ]]></b:skin>
و لحل هذه المشكلة نقوم بلصق الكود التالي ضمن صفحة اتصل بنا التي أنشاناها

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '4717033401200122451';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4717033401200122451','//blog.itheric.com/','4717033401200122451');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'جار&#1613; الإرسال...', 'contactFormMessageSentMsg': 'تم إرسال رسالتك.', 'contactFormMessageNotSentMsg': 'تعذر إرسال الرسالة&#1548; يرجى المحاولة مرة أخرى في وقت لاحق.', 'contactFormInvalidEmailMsg': 'يلزم إدخال عنوان بريد إلكتروني صالح.', 'contactFormEmptyMessageMsg': 'لا يمكن أن يكون حقل الرسالة فارغ&#1611;ا.', 'title': 'نموذج الاتصال', 'blogId': '4717033401200122451', 'contactFormNameMsg': 'الاسم', 'contactFormEmailMsg': 'بريد إلكتروني', 'contactFormMessageMsg': 'رسالة', 'contactFormSendMsg': 'إرسال', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

قم بإستبدال 4717033401200122451  بـ ID الخاص بمدونتك مكرر 4 مرات, واستبدل blog.itheric.com  برابط مدونتك
ثم قم بالحفظ وبتجربة النموذج
الى هنا نكون قد انتهينا من هذا المقال أمل ان أكود قد وفقت بطرحه , ولا تبخلو علينا بتعليقاتكم المشجعة

---- your ads -----

 CSS

 إضافات بلوجر

Share This :