شرح انشاء صفحة اتصل بنا عربى وانجليزى لمدونات بلوجر

2

كيفية إنشاء وضبط صفحة اتصل بنا على مدونة blogger

شرح انشاء صفحة اتصل بنا عربى وانجليزى لمدونات بلوجر،كيفية إنشاء نموذج اتصل بنا لمدونات بلوجر ،يعتبر أهم شيئ من بين عناصر المدونة لكونها وسيلة الاتصال بين مدير المدونه والقراء ،أو أى جهه أخرى فالذي لا يجب على المدون التغاضي عنه هي معلومات الإتصال ، فهي تلعب دوراً هاماً في خلق إتصال بين مدير المدونة والقراء، فهم يمثلون دوراً هاما من خلال تصفحهم لمواضيع المدونه فى اكتشاف الأخطاء ،او طرح افكار واسئله من صميم اختصاص المدونه والذي بدوره يساعدك على التحسين والإرتقاء بموقعك، والكتابه فيما يطلبه الزوار عبر التواصل معهم، فيجب ان يكون هناك إحتكاك بين المدون والزوار حتى يعلم حاجتهم وينتفع من نقدهم، كما أنها تفتح باب من الأفكار والتي تساعدك على الإبتكار وخلق مواضيع جديدة ،ويكون موقعك دائما في أوائل نتائج البحث.
جوجل لم تغفل عن أمر هام كهذا، لذلك قامت بتوفير أداة نموذج الإتصال بنا حيث يمكن إضافتها في الشريط الجانبي للمدونة Sidebar ،أو على الفوتر Footer وهي متاحة في صفحة التخطيط من لوحة التحكم في بلوجر.
لكن معظم المدونين لا يرغبون بتلك الأداة ذات التصميم الرديئ ،فهناك من يرغب بالتعديل عليها لتتوافق مع تصميم موقعه ،وذلك بإضافة بعض أكواد CSS، والغالبيه يرغبون في صفحة منفردة  وذات تصميم مميزوهو الأصح والأفضل ،وهو ما سنشرحه في هذا الموضوع وهو شرح انشاء صفحة اتصل بنا عربى وانجليزى لمدونات بلوجر بطرق مختلفه.
سأتطرق فى هذا الشرح المدعوم بالصور فى وضع نموذج اتصل بنا أو Contact Us لمدونات بلوجر بأكثر من كود ،وكذلك استخدام احد المواقع ممن تقوم بتقديم هذه الخدمه مجانا.

شرح انشاء صفحة اتصل بنا عربى وانجليزى لمدونات بلوجر

أولا :صفحة اتصل بنا احترافية باللغة العربية

يتم ذلك عبر خطوات بسيطه ومرتبه وأرجوا منك اتباعها بدقه لكى لايحدث أى خطأ لديك بالمدونه ولكى يعمل النموذج بشكل صحيح على ايميلك الرسمى بالمدونه,
1- قم بتفعيل خاصية الاتصال بنا والخاصه ببلوجر ،وهذا أول شرط أساسى لكى تعمل كافة النماذج التى سيتم تركيبها ولاتقلق لاننا سنضع كود لإخفائها من المدونه .
وطريقة التفعيل كالتالى :-
من التخطيط اختر اضافة اداة فى اى مكان ويفضل فى الفوتر الخاص بالمدونه او على السايدبارثم ابحت عن أداة الإتصال واضغط على علامة الزائد + ثم فى النموذج الذى يظهر اضغط على حفظ كما بالصور التاليه على الترتيب

شرح انشاء صفحة اتصل بنا عربى وانجليزى لمدونات بلوجر

ثم

شرح انشاء صفحة اتصل بنا عربى وانجليزى لمدونات بلوجر

2- قم بتحميل كود CSS التالى:-
اكواد CSS
ثم قم بفتح قالب مدونتك وعن طريق البحث داخل القالب عبر الامر Ctrl+F ابحث عن الوسم التالى :

]]></b:skin>

ثم فوقه مباشرة ضع كود CSS الذى قمت بتحميله سابقا  كما بالصوره التاليه :

شرح انشاء صفحة اتصل بنا عربى وانجليزى لمدونات بلوجر

ثم اضغط على حفظ
3- بعد ذلك ستقوم بإنشاء صفحه جديده من خلال الصفحات ثم انشاء صفحه جديده

شرح انشاء صفحة اتصل بنا عربى وانجليزى لمدونات بلوجر

ثم قم بتسمية الصفحه contact us أو اتصل بنا ،ثم حول الصفحه الى خانة HTML واحذف الاكواد التى تظهر لك والصق احد الأكواد التاليه :-
تحميل الكود الأول
تحميل الكود الثانى
تحميل الكود الثالث
ويتم كما بالصوره التاليه :

شرح انشاء صفحة اتصل بنا عربى وانجليزى لمدونات بلوجر

ثم ستكون النتيجه كالتالى لأحدهما :-

شرح انشاء صفحة اتصل بنا عربى وانجليزى لمدونات بلوجر

وهكذا لأى كود .

ثانيا :صفحة اتصل بنا احترافية باللغة الإنجليزيه

1- قم بتفعيل أداة الاتصال كماشرحنا فى البند1 بالأعلى .
2- من خلال البحث فى القالب قم بالبحث عن الوسم الاتى :

]]></b:skin>

اعلاه ضع الكود التالى :

div#ContactForm1 { 
display: none !important; 
}

كما بالصوره التاليه :

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

Code to add:<!-- Contact Form Code --> <style> .page-contact-form input, .page-contact-form textarea { width: 100%; max-width: 100%; margin-bottom: 10px; } .page-contact-form input.contact-form-button.contact-form-button-submit { padding: 10px; background: #000; /* Button background color */ color: #fff; /* Button text color */ border: none; } .page-contact-form input.contact-form-button.contact-form-button-submit:hover { background: #777; /* Button background hover color */ color: #fff; /* Button text hover color */ } </style> <div class="contact-form-widget page-contact-form"> <div class="form"> <form name="contact-form"> Name:<br /> <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> E-mail: <span id="required">*</span><br /> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> Message: <span id="required">*</span><br /> <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> </form> </div> </div> <!-- End Contact Form Code -->

ثم حفظ ونشر
نموذج آخر

    1.  قم بتفعيل خاصية اداة الاتصال – اذا كنت لم تفعلها من قبل – وذلك من التخطيط بلوحة تحكم مدونتك كما ذكرنا سابقا .

    1. قم بحذف أى اكواد CSS قمت بوضعها داخل القالب وكذلك صفحة اتصل بنا وذلك لكى تضع النموذج الجديد.

3- اذا كنت قد وضعت كود اخفاء أداة الاتصال من واجهة المدونه – كما ذكرنا فى فى البند 2 سابقا – فلاتضع كود الاخفاء التالى ،واذا كنت لم تفعل فضع الكود التالى بعد أعلا الوسم

</head>

ثم احفظ القالب.

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

4- انشىء صفحه جديده وضع فيها الكود التالى :

<form name="contact-form"> <div class='formcolumn1'> <input id="ContactForm1_contact-form-name" name="name" placeholder='Name' size="30" type="text" value="" /> </div> <div class='formcolumn2'> <input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" /> </div> <div class='formcolumn3'> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Message' rows="7"></textarea> </div> <div class='formcolumn4'> <input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" /> </div> <div style="max-width: 100%; text-align: center; width: 100%;"> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </div> </form> <style scoped="" type="text/css"> #ContactForm1,#comments{display:none} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)} #ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)} #ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)} .formcolumn4{position:relative} .formcolumn4:before{background-image:url(https://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0} #ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px} form{color:#888} .formcolumn1,.formcolumn2{float:left;width:50%} .formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0} .formcolumn2{padding:0 0 0 10px} @media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}} </style>

وهذا نموذج آخر تستطيع تحميله من الرابط التالى ويتم وضعه كما شرحنا وهو باللغة الانجليزيه
تحميل نموذج آخر

ثالثا:انشاء صفحة اتصل بنا عبر موقع JotForm مجانا

موقع JotForm هو موقع مجانى لعمل صفحة اتصل بنا بألوان رائعه ،وهو مجانى 100% ،ولكى تقوم بإنشاء نموذج لصفحة اتصل بنا عبر الموقع لابد أولا من التسجيل بالموقع ،ثم تفعل التسجيل به ،وبعدها تستطيع عمل صفحة اتصل بنا بكل سهوله وللحساب المجانى حوالى 100 قالب شهريا.
تابع الشرح التالى وبه طريقة عمل صفحة اتصل بنا

والموقع أيضا يوفر شرح بالفيديو لعمل صفحة اتصل بنا عبر الموقع .

طريقة تركيب نموذج اتصل بنا على قالب سيو بلس

ولمستخدمى قالب سيو بلس 

استخدم النموذج التالى :

<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="إرسال" />  
<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 type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2227587253-widgets.js"></script>
<script type='text/javascript'>
_WidgetManager._Init('');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'contact-sec', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'جار&#1613; الإرسال...', 'contactFormMessageSentMsg': 'تم إرسال رسالتك.', 'contactFormMessageNotSentMsg': 'تعذر إرسال الرسالة&#1548; يرجى المحاولة مرة أخرى في وقت لاحق.', 'contactFormInvalidEmailMsg': 'يلزم إدخال عنوان بريد إلكتروني صالح.', 'contactFormEmptyMessageMsg': 'لا يمكن أن يكون حقل الرسالة فارغ&#1611;ا.', 'title': 'نموذج الاتصال', 'blogId': '5666337625103699220', 'contactFormNameMsg': 'الاسم', 'contactFormEmailMsg': 'بريد إلكتروني', 'contactFormMessageMsg': 'رسالة', 'contactFormSendMsg': 'إرسال', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
</script>

من داخل الكود ابحث عن :

blogId’: ‘5666337625103699220

قم بتغييره الى Id الخاص بمدونتك ، ولكى تعرف الــ Id الخاص بمدونتك عليك بالتالى :

ادخل لوحة تحكم مدونات بلوجر عبر ايميلك وحدد المدونة المطلوب تركيب صفحة اتصل بنا بها

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

اذا لم تفعل ذلك فلن يعمل الكود معك لإختلاف الــ id عن الــ id الخاص بمدونتك .

إقرأ ايضا :-
سياسة الخصوصية لبلوجر 2019 باللغة العربية والانجليزية
ارجوا أن اكون وفقت فى الشرح
متمنيا لك كل التوفيق

إشترك فى نشرتنا البريدية
إشترك فى نشرتنا البريدية
إشترك معنا هنا لكى يصلك عبر بريدك الإلكترونى كل جديد نقوم بنشرة بالمدونة ... ماذا تنتظر!! إشترك الآن
تستطيع إلغاء الإشتراك فى أى وقت
تعليق
  1. حمزة يقول

    تم عمل كل الخطوات ونجحت كلها لكن عندما ارسل رسالة لا تكمل الارسال علما اني استعمل قالب سيوبلس النسخة المجانية ارجو الرد

  2. aldewaghry يقول

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

اترك تعليق

يرجي التسجيل لترك تعليقك

شكرا للتعليق

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More