القائمة الرئيسية

الصفحات

إنشاء صفحة اتصل بنا Contact US بشكل احترافي وجذاب






إنشاء صفحة اتصل بنا Contact US بشكل احترافي وجذاب
اهلا وسهلا بكم متابعينا الكرام ان كل مدون داخل موقع يسعى لانشاء موقع متميز حتى ينتشر بسرعة كبيرة بين الناس ومن اهم الميزات التى تجعل الزوار دائما مقبلين علي الدخول على موقعك باستمرار هوا انت تكون انت في تواصل دائم معهم وتبادلة نفس التفعال وهذا الاتصال يمكن إنشائة عن طريق صفحة اتصل بنا Contact US ومن الجميل ان تكون هذه الصفحة بشكل جذاب
فاليوم اقدم لكم هذه الصفحة بشكل جذاب جدا تابع الشرح

  • خطوات الشرح :
  • اولا الدخول الى لوحة تحكم بلوحر 
  • بعد ذلك الدخول للصفحات كما هوا موضح بالصورة 
  • ثم الضغط علي انشاء تدوينة جديدة ولصق الكود 
  • الكود   


    <div dir="rtl" style="text-align: right;" trbidi="on">
    
    <style scoped="" type="text/css">
    #comments,.post_meta,#blog-pager {display:none;}
    #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
    width:100%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
    #ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ddd;border-radius:3px;transition:all 0.5s ease-out;direction: rtl;text-align: justify;}
    #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
    #ContactForm1_contact-form-submit {width:100%;font-family:'Open Sans';float:left;background:#fff;color:#aaa;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;background-image: linear-gradient(110deg, #7986cb 0%, #7986cb 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #ddd;transition:all .8s ease, background-position .8s ease, color .8s ease;}
    #ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#7986cb;}
    #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
    width:100%;margin-top:35px;}
    .contact-form-error-message-with-border {background:#f36c60;border:none;box-shadow:none;color:#fff;padding:5px 0;}
    .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
    img.contact-form-cross {line-height:40px;margin-left:5px;}
    </style>
    
    <form name="contact-form">
    <span style="color: #666666; font-family: "open sans" , "arial" , "helvetica" , sans-serif; font-weight: 700;"><i class="fa fa-user"></i> الاسم </span>
    <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  
    
    <span style="color: #666666; font-family: "open sans" , "arial" , "helvetica" , sans-serif; font-weight: 700;"><i class="fa fa-envelope"></i> البريد الإلكترونى <span style="color: #f56954; font-size: x-small; font-weight: bold;">مهم</span></span> 
    <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  
    
    <span style="color: #666666; font-family: "open sans" , "arial" , "helvetica" , sans-serif; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> محتوى الرساله <span style="color: #f56954; font-size: x-small; font-weight: bold;">مهم</span></span>
    <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> 
    <input id="ContactForm1_contact-form-submit" type="button" value="إرسال" />  
    <br />
    <div style="max-width: 222px; text-align: center; width: 100%;">
    <div id="ContactForm1_contact-form-error-message">
    </div>
    <div id="ContactForm1_contact-form-success-message">
    </div>
    </div>
    </form>
    </div>
    
  • بعد لصق الكود قم بحفظ التدوينة 
  • ستظهر معك الاضافة بهذ الشكل الرائع 

لمعاينة الاضافة اضغط هنا 
شكرا لم زوارنا الكرام نتمنى ان ينال محتوانا اعجابكم
هل اعجبك الموضوع :

تعليقات