اضافة نموذج اتصل بنا احترافي في صفحة مستقلة لمدونات بلوجر بدون اخطاء

Add-Contact-us-blogger

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

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


شكل النموذج هده لقد قمنا بتحويله إلى نموذج اتصل بناء على بلوجر لاحتوائه على شكل جميل واحترافي وغير موجود في المواضيع التي تتكلم عن طريقة تركيب نموذج الاتصال في بلوجر, بمعنى أخر النموذج حصري لدى مدونة عبدالله منقوش نتمنى منكم متابعتنا لتحصلوا على كل حصري يخص البلوجر تابعنا من هنا.

شرح التركيب 

هده الشرح الذي سنقدمه في طريقة التركيب يعتبر حصري وسهل جداً لا يحتاج إلى شيء سؤ كود أي بي المدونة وكود الاتصال سنقوم بنسخ الكود ووضعه في صفحة مستقلة ويتم تشغيله بكل سهوله, لنبدأ في الخطوات:

Add-Contact-us-blogger

1- اذهب الى التخطيط تم اضاف نموذج اتصل بنا ضمن اضافات بلوجر الاساسية, طبعاً اضفها في اي مكان في التخطيط لا مشكلة لان سنجعلها لا تظهر في المدونة لزوائر, بعد اضفتها في التخطيط توجة الى المظهر تم تحرير HTML تم ابحث عن ]]></b:skin> تم نضف اعلاء/فوقه الكود التالي:
.ContactForm{display: none!important;}

استخراج كود أي بي المدونة

في البداية يجب استخراج كود ID الخاص بالمدونة حتى يتم استقبال الرسائل منها, لاستخراج الكود نتوجه إلى التخطيط تم في الأعلى في الرابط الموجود في شريط المتصفح  ID=4371357773824486577# احتفظ بالكود الذي بلون الأحمر سنستخدمه في الخطوة التالية.
Add-Contact-us-blogger

تركيب نموذج اتصل بناء في صفحة مستقلة في بلوجر 

ألان بعد أن تم استخراج ID المدونة نبدأ في تركيب نموذج اتصل بنا, النموذج يركب في أي جزء من المدونة سوا في جوانب المدونة أو في الأسفل, لكن نحن سنشرح طريقة تركيبه في صفحة مستقلة.

في البداية يجب عليك أنشاء صفحة, طريقة إنشاء الصفحة سهله جدا تضغط على الصفحات الموجودة في العمود الأيمن سيتم توجيهك إلى لوحة تحكم الصفحات اضغط على "صفحة جديدة" بعد إنشاء الصفحة تابع التالي.

كل ما عليك لإضافة نموذج اتصل بنا هو نسخ هده الكود مع تغيير 4371357773824486577 إلى ID المدونة الذي أخدنها سابقان, تم توجه إلى الصفحة الذي تم إنشائها وحول طريقة العرض من "تأليف" إلى "HTML" قم بمسح ما بدخله وضع الكود التالي لا تنسى تغيير 4371357773824486577 وقم بحفظ ألصفحه ومبروك عليك نموذج اتصل بناء الاحترافي.

<link href='//fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet'/>
<script>
var blogId = '4371357773824486577';
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='جاري الارسال...';
var contactFormMessageSentMsg = 'تم ارسال رسالتك بنجاح.';
var contactFormMessageNotSentMsg = 'تعذر إرسال الرسالة. الرجاء معاودة المحاولة في وقت لاحق.';
var contactFormEmptyMessageMsg ='صندوق الرسالة لا يمكن أن يكون فارغا.';
var contactFormInvalidEmailMsg = 'ادخل بريد إلكتروني صحيح.'

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>

<style type="text/css">
.login-body{
    direction: rtl;
    background: #f93c64;
    display: -webkit-box;
    margin: 10px;
    border-radius: 5px;
font-family: Droid Arabic Kufi;

 }
.login-01{
  width:85%;
  margin:5% auto 3%;
}
form {
   padding: 0% 1%;
}
form li.first,li.second{
  border:none;
  list-style:none;
  margin-bottom:10px;
  width:100%;
}
.icon,.icon2  {
  height:55px;
  width:55px;
vertical-align: top;
  display: -webkit-inline-box;
  border-top-right-radius: 0.3em;
  -o-border-top-right-radius: 0.3em;
  -moz-border-top-right-radius: 0.3em;
  -webkit-border-top-right-radius: 0.3em;
  border-border-bottom-right-radius: 0.3em;
  -o-border-bottom-right-radius: 0.3em;
  -moz-border-bottom-right-radius: 0.3em;
  -webkit-border-bottom-right-radius: 0.3em;
}
.user1 {
    background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 14px 15px #f79d29;
}
.email{
  background:url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 15px -39px #f79d29;
}
.msg{
  background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/msg.png) no-repeat 16px 16px #f79d29;
}
li.first:hover .user1{
     background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 14px 15px #DB2048;
}
li.first:hover .email{
  background:url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 15px -39px #DB2048;
}
li.second:hover .msg {
  background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/msg.png) no-repeat 16px 16px #DB2048;
}
/*-----*/
input[type="text"],form textarea {
    width: 77%;
    padding: 1.13em 1em 1.13em 1em;
    color: #858282;
    font-size: 17px;
    outline: none;
    height: 16.2px;
    background: #fff;
    font-weight: 500;
    border: none;
    font-family: inherit;
    border-top-left-radius: 0.3em;
    -o-border-top-left-radius: 0.3em;
    -moz-border-top-left-radius: 0.3em;
    -webkit-border-top-left-radius: 0.3em;
    border-border-bottom-left-radius: 0.3em;
    -o-border-bottom-left-radius: 0.3em;
    -moz-border-bottom-left-radius: 0.3em;
    -webkit-border-bottom-left-radius: 0.3em;
  }
  .button{

  }
form textarea {
  resize: none;
  height: 140px;
}
.login-01 input[type="button"]{
  font-size: 17px;
  font-weight: 300;
  color: #fff;
    font-family: inherit;
  cursor: pointer;
  outline: none;
  padding: 5px 10px;
  width: 25%;
  border: 2px solid #F79D29;
  float: left;
  background: #F79D29;
  border-radius: 0.3em;
  -o-border-radius: 0.3em;
  -webkit-border-radius: 0.3em;
  -moz-border-radius: 0.3em;
  margin-right:2.85em;
}
input[type="button"]:hover{
-webkit-transform: rotate(4deg);
  transform: rotate(4deg);
  -o-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
}
li.lost {
  margin-bottom: 21px;
}
/*---------------*/
.copy-right {
  text-align: center;
  margin: 2em 0;
}
.copy-right p {
 color: #fff;
 font-size: 1em;
 font-weight:400;
}
.copy-right p a {
 color:#fff;
}
.copy-right p a:hover {
 text-decoration: underline;
}
.login-body .contact-form-email-message{
    height: 106px;
}
.login-body .contact-form-error-message-with-border{
    background: #c73352;
}
.login-body .contact-form-success-message{
    background: #c73352;
}
.login-body .contact-form-error-message-with-border,.all-emil contact-form-success-message{
    color: #fff;
    padding: 3px 0px;
    border-radius: 4px;
    margin: 10px 0 0 0;
    clear: both;
}
.login-body .contact-form-error-message-with-border img,.all-emil contact-form-success-message img{
cursor: pointer;
    float: right;
    padding: 0px 3px 0px 0;
}
/*-----start-responsive-design------*/
@media (max-width:1440px){
  .login-01 input[type="button"]{
  margin-right:1.85em;
  }

}
@media (max-width:1366px){
  .login-01 input[type="button"]{
  margin-right: 1.6em;
  }
   
}
@media (max-width:1280px){
   .login-01 {
    width: 40%;
    margin:5% auto 5%;
  }
  body h1 {
  font-size: 2.7em;
}

}
@media (max-width:1024px){
  .login-01 {
  width: 45%;
}
 body h1 {
  font-size: 2.5em;
}

}
@media (max-width:768px){
  .login-01 {
  width: 63%;
}
 body h1 {
  font-size: 2.3em;
}
}
@media (max-width:640px){
  .login-01 {
  width: 73%;
  }
  body h1 {
  font-size: 2.1em;
}
}
@media (max-width:480px){
   .login-01 {
    width: 85%;
 }
  .copy-right p {
    font-size: 0.9em;
  }
input[type="text"], form textarea{
 height: 14.2px;
}
form textarea {
    height: 140px;
}
   input[type="text"], form textarea {
  width: 77%;
  padding: 1em 1em 1em 1em;

  }
  .icon, .icon2 {
  height: 48px;
  width: 48px;
  }
  .user1 {
    background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 11px 12px #f79d29;
      background-size: 45%;
}
.email{
  background:url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 12px -36px #f79d29;
    background-size: 45%;
}
.msg{
  background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/msg.png) no-repeat 14px 11px #f79d29;
    background-size: 45%;
}
li.first:hover .user1{
     background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 11px 9px #DB2048;
      background-size: 45%;
}
li.first:hover .email{
  background:url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 12px -36px #DB2048;
   background-size: 45%;
}
li.second:hover .msg {
  background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/msg.png) no-repeat 14px 11px #DB2048;
   background-size: 45%;
}
form li.first, li.second {
  margin-bottom: 5px;
  }

}
@media (max-width:600px){
.login-01 {
    width: 100%;
}
}
input[type="text"], form textarea {
    width: 65%;
}

  }


</style>
 <div class="login-body">

 <div class="login-01">
   <form name="contact-form">
    <ul>
    <li class="first">
     <a class=" icon user1"></a><input id="ContactForm1_contact-form-name" type="text"  name="name" class="text" value="" placeholder="الأسم">
     <div class="clear"></div>
    </li>
    <li class="first">
     <a  class=" icon email"></a><input id="ContactForm1_contact-form-email" type="text" name="email" class="text"  value="" placeholder="البريد الالكتروني">
     <div class="clear"></div>
    </li>
    <li class="second">
    <a class=" icon msg"></a><textarea id="ContactForm1_contact-form-email-message" value="Message" placeholder="محتوى الرسالة" name="email-message" ></textarea>
    <div class="clear"></div>
    </li>
   </ul>
   <input id="ContactForm1_contact-form-submit" type="button" onclick="sendEmailMsg()" value="إرسال">
   <div class="clear"></div>

<div style="max-width: 450px; text-align: center; width: 100%;margin: 3px auto;">
<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 style="visibility: collapse; opacity: 0;" ><a href='https://abduallah0.blogspot.com/'>مدونة عبدالله منقوش</a></div>
</div>



لتغيير الون ابحث عن
#f93c64
وقم بتغييره بكود الون الذي تحب

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

نتمناء لكم جميعكم التوفيق في مشاريعكم ولا تنسوا متابعة المدونة حيث سنقدم محتوى حصري للجميع سواء كانوا مدونين أو مطورين أو مبرمجين, ونعدكم بمحتوى حصري دو امتيازات يعمل على تحسين مدوناتكم وتطوير مهارتكم في التعامل مع بلوجر بشكل كامل, لمتابعة المدونة يمكنك متابعتها من خلال صفحتنا على الفيس بوك من هنا.

نتمناء منكم أيضاً تشجيعنا بتعليق, ولو صادفتك مشكله ضعها أيضاً في تعليق وسنقوم بحلها إن شاء الله.

هناك 23 تعليقًا:

  1. اين استلم الرسائل؟

    ردحذف
    الردود
    1. في بريد المدونة اخي الكريم


      نعتدر على التاخر في الرد بسبب الطروف

      حذف
  2. عفواً أخي
    الأضافة رائعه
    لكن تتحول سريع الى مدونتك لوسمحت شرح او افاده كيفيه
    alqysrald@gmail.com

    ردحذف
  3. بارك الله فيك تمت الاضافة بنجاح

    ردحذف
  4. اين يكون بريد المدونة

    ردحذف
    الردود
    1. هو البريد الدي يتم تسجيل الدخول الى بلوجر عبره

      حذف
  5. عند الضغط على ارسال لا ترسل الرسالة

    ردحذف
    الردود
    1. غريب, يبدوا ان الاضافة توقفة عن العمل ساقوم باصلاحها في وقت لاحق

      حذف
    2. تم اصلاح الاضافة والمشكلة كانت في عدم تواجد نمودج الاتصل التخطيط لبعد مدونات الاخوه, فعليك العودة الى الخطوة الاولى الذي قمنا باضافتها الان

      حذف
  6. اخى الكريم موضوعك جميل مفيد
    لكن ليا استفسار بسيط انا نفذت كل الخطوات وظهرلى النموذج لكن بدون ايقونات او اسم الخانه مثل الاسم او البريداو الرساله
    حتى الخانات لايمكن الكتابه بها من قبل الزوار الاسم او البريد انما خانة الرساله تسمح بالكتابه بداخلها

    ردحذف
    الردود
    1. للاسف حتى عندي يبدوا ان الاضافة توقفت! ساقوم بحل مشاكلها في وقت لاحق عندما اعود الى التدوين

      حذف
  7. لدي صفحه اتصل بنا لكن الرسائل لاترسل الي و لا ياتيني اشعار انها ارسلت

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

      حذف
  8. اللون الودي لا يتغير ؟

    ردحذف
    الردود
    1. لتغيير الون ابحث عن
      #f93c64
      وقم بتغييره بكود الون الذي تحب

      حذف
  9. مع الاسف النموذج لا يعمل، حاولت إرسال رسالة للتجربة، لكن عندما اضغط على إرسال، لا يتم إرسالها، ولا يظهر اي شيء كما لو انني ضغطت على صفحة فارغة

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

      حذف
  10. اخي ممكن تراسلني
    majd.asaad.511@gmail.com

    ردحذف

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *