إضافة نموذج اتصل بنا لموقعك او مدونتك

إضافة نموذج اتصل بنا لموقعك او مدونتك
    تعد صفحة "اتصل بنا Contact us " من بين الإضافات المهة لأي مدونة أو موقع فهي من الأسباب التي تكسب بها ثقة الزوار بالإضافة أنها تضفي نوع من الاحترافية لمدونتك أو موقعك، ولكي لا أطيل عليك عزيزي القارئ نمر الى الشرح.
    هذا هو شكل الصفحة بعد اضافتها:

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





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

    <style>
    #ContactForm1 {display: none;}
    </style>

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

    قم بكتابة اسم الصفحة  وليكن مثلا "اتصل بنا"و في نفس الصفحة قم بالدخول لمنطقة تعديل الأكواد المعروفة ب "HTML" ثم قم بمسح جميع الاكواد بها وقم بلصق الاكواد التالية بها مباشرة كما توضح الصورة:


    <!-- contact us page by bloggeram.com -->
    <div class="bloggeram-contact-page">
    <p>هنا تقوم  بكتابة رسالة توضحية للزائر</p>
    <center>
    <div class="contact-us-page">
    <div class="contact-form-widget">
    <div class="form">
    <form name="contact-form">
    <p>
    </p>
    <span class="contact-us-text">الاسم</span>
    <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" autocomplete="off">
    <p>
    </p>
    <span class="contact-us-text">بريد إلكتروني <span style="font-weight: bolder;">*</span></span>
    <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="">
    <p>
    </p>
    <span class="contact-us-text">رسالة <span style="font-weight: bolder;">*</span></span>
    <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
    <p>
    </p>
    <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="إرسال">
    <p>
    </p>
    <div style="text-align: center; max-width: 222px; width: 100%">
    <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>
    </div>
    </form>
    </div>
    </div>
    </div>
    <br />
    <p>تأكد من ظهور "تم أرسال رسالتلك"</p>
    </center>

    </div>


    <link href='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css' rel='stylesheet'/>
    <link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>

    <style>

    .bloggeram-contact-page {
    direction: rtl;
    text-align: center;
    }

    .contact-us-page {
    width:98%; max-width:400px;
    }

    .contact-us-text {
    float: right;
    }

    .contact-form-button, .contact-form-button-submit, #ContactForm1_contact-form-submit {
    font-family: 'Droid Arabic Kufi';
    color: #fff;
    background: #111;
    border-color: #111;
    width: 95%;
    height: 45px;
    font-size: 1.1em;
    }


    .contact-form-name, .contact-form-email, .contact-form-email-message {
    max-width: none !important;
    width: 95% !important;
    min-height: 40px !important;
    font-family: 'Droid Arabic Kufi' !important;
    }
    .contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover {
    box-shadow: none;
    }
    .contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus {
    box-shadow: none;
    outline: none;
    }



    .contact-form-widget {
    width: inherit;
    max-width: none !important;
    padding: 10px 12px 5px 0px;
    font-size: .90em;
    }

    #ContactForm1_contact-form-submit {
    font-family: 'Droid Arabic Kufi', Voces;
    color: #fff;
    background: #111;
    border-color: #111;
    width: 95%;
    height: 45px;
    font-size: 1.1em;
    }
    #ContactForm1_contact-form-submit:hover {
    background: #FFA200;
    border: #FFA200;
    }

    </style>

     واضغط على نشر لحفظ الصفحة، بعدها إضغط على عرض لأخذ رابط الصفحة ولصقه في أي مكان في المدونة.




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

    غير معرف
    @مرسلة بواسطة
    كاتب ومحرر اخبار اعمل في موقع دليلك نحو الاحتراف .