حصرياتالمزيد

الاثنين، 6 نوفمبر 2017

احصل على هذة الاداة من هنا

نمودج طلب الانضمام لفريق العمل



السلام عليكم ورحمة
الله وبركاته
--
نعود لكم بتدوينة جديدة نقدم لكم فيها نمودج الاتصال بتقنية احترافية وحصرية 








طريقة التركيب:

    1. توجه الى القالب ثم تحرير html
    2. ضع الكود التالي في المكان الذي يناسبك
<div class="wrapper">
      <ul class="steps">
        
       
        <li class="is-active">الخطوة 1</li>
        <li>الخطوة 2</li>
         <li>الخطوة 3</li>
        
        
      </ul>
      <form class="form-wrapper">
        <fieldset class="section is-active">
          <h3>معلوماتك</h3>
          <input type="text" name="name" id="name" placeholder="الاسم الكريم">
          <input type="text" name="email" id="email" placeholder="البريد الالكتروني">
          <div class="button">التالي</div>
        </fieldset>
        <fieldset class="section">
          <h3>اختصاصك</h3>
          <div class="row cf">
            
            <div class="four col">
              <input type="radio" name="r1" id="r3"><label for="r3">
                <h4>مطور</h4>
              </label>
            </div>
            <div class="four col">
              <input type="radio" name="r1" id="r2"><label for="r2">
                <h4>مبرمج</h4>
              </label>
            </div>
            <div class="four col">
              <input type="radio" name="r1" id="r1" checked>
              <label for="r1">
                <h4>مصمم</h4>
              </label>
            </div>
            
          </div>
          <div class="button">التالي</div>
        </fieldset>
        <fieldset class="section">
          <h3>نبذة عنك</h3>
          <input type="text" name="text" id="textnabda" placeholder="النص">
      
          <input class="submit button" type="submit" value="ارسال">
        </fieldset>
        <fieldset class="section">
          <h3>تم الارسال!</h3>
          <p>سيتم مراجعة طلبك في اقرب وقت</p>
          <div class="button">تحديث</div>
        </fieldset>
      </form>
    </div>
  

      1. ابحث عن ]]></b:skin> وضع فوقه الكود التالي
    /* STEPS */
    input#name {
        text-align: right;
    }
    input#email {
        text-align: right;
    }
    input#textnabda {
        text-align: right;
    }
    .steps{
      list-style-type: none;
        margin: 0;
        padding: 0 198px 0 198px;
        background-color: #fff;
        text-align: center;
        display: table;
        z-index: 9999;
        position: relative;
        margin: 0 auto;
    }
    
    
    .steps li{
      display: inline-block;
      margin: 20px;
      color: #ccc;
      padding-bottom: 5px;
      float: right;
    }
    
    .steps li.is-active{
      border-bottom: 1px solid #3498db;
      color: #3498db;
    }
    
    /* FORM */
    
    .form-wrapper .section{
      padding: 0px 20px 30px 20px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background-color: #fff;
      opacity: 0;
      -webkit-transform: scale(1, 0);
      -ms-transform: scale(1, 0);
      -o-transform: scale(1, 0);
      transform: scale(1, 0);
      -webkit-transform-origin: top center;
      -moz-transform-origin: top center;
      -ms-transform-origin: top center;
      -o-transform-origin: top center;
      transform-origin: top center;
      -webkit-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
      text-align: center;
      position: absolute;
      width: 100%;
      min-height: 300px
    }
    
    .form-wrapper .section h3{
      margin-bottom: 30px;
    }
    
    .form-wrapper .section.is-active{
      opacity: 1;
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      transform: scale(1, 1);
    }
    
    .form-wrapper .button, .form-wrapper .submit{
      background-color: #3498db;
      display: inline-block;
      padding: 8px 30px;
      color: #fff;
      cursor: pointer;
      font-size: 12px !important;
      font-family: droidkufi-bold;
      position: absolute;
      right: 20px;
      bottom: 20px;
    }
    
    .form-wrapper .submit{
      border: none;
      outline: none;
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }
    input#textnabda{
      display: block;
        padding: 10px;
        margin: 10px auto;
        background-color: #f1f1f1;
        border: none;
        width: 50%;
        outline: none;
        font-size: 14px !important;
    padding-bottom: 100px !important;
    }
    .form-wrapper input[type="text"],
    .form-wrapper input[type="password"]{
      display: block;
        padding: 10px;
        margin: 10px auto;
        background-color: #f1f1f1;
        border: none;
        width: 50%;
        outline: none;
        font-size: 12px !important;
        font-family: droidkufi-bold;
    }
    
    .form-wrapper input[type="radio"]{
      display: none;
    }
    
    .form-wrapper input[type="radio"] + label{
      display: block;
      border: 1px solid #ccc;
      width: 100%;
      max-width: 100%;
      padding: 10px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      cursor: pointer;
      position: relative;
    }
    
    .form-wrapper input[type="radio"] + label:before{
      content: "✔";
      position: absolute;
      right: -10px;
      top: -10px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      border-radius: 100%;
      background-color: #3498db;
      color: #fff;
      display: none;
    }
    
    .form-wrapper input[type="radio"]:checked + label:before{
      display: block;
    }
    
    .form-wrapper input[type="radio"] + label h4{
      margin: 15px;
      color: #ccc;
    }
    
    .form-wrapper input[type="radio"]:checked + label{
      border: 1px solid #3498db;
    }
    
    .form-wrapper input[type="radio"]:checked + label h4{
      color: #3498db;
    }
    @font-face {
    font-family: "DroidKufi-Bold";
    font-style: normal;
    font-weight: 700;
    src: url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.eot?#iefix") format("embedded-opentype"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff2") format("x-woff2"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff") format("woff"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.ttf") format("truetype");
    }
    
    
    
    
    

        1. ثم ابحث عن </body> وضع الكود التالي فوقه
      <script type='text/javascript'>
      $(document).ready(function(){
        $(".form-wrapper .button").click(function(){
          var button = $(this);
          var currentSection = button.parents(".section");
          var currentSectionIndex = currentSection.index();
          var headerSection = $('.steps li').eq(currentSectionIndex);
          currentSection.removeClass("is-active").next().addClass("is-active");
          headerSection.removeClass("is-active").next().addClass("is-active");
      
          $(".form-wrapper").submit(function(e) {
            e.preventDefault();
          });
      
          if(currentSectionIndex === 3){
            $(document).find(".form-wrapper .section").first().addClass("is-active");
            $(document).find(".steps li").first().addClass("is-active");
          }
        });
      });
      
      </script>
      
      

          1. ثم ابحث عن </head> وضع الكود التالي فوقه
        <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
          1. غير ما يناسبك



          هناك 3 تعليقات

          1. لم تفلح معي ياتي خط في الكود الثالث فوق body

            ردحذف
          2. ممكن رابط للمعاينة

            ردحذف
          3. الكود هل أضعه في صفحة من القالب أم أضعه في القالب نفسه

            ردحذف


          EmoticonEmoticon