/*----contact-button-----------*/
      .contact-button {}
      .contact-button a {padding: 9.7px;color: #FFFFFF;display: inline-block;width: 50px;height: 60px;font-family: droid arabic kufi;background: #22A1C4;text-shadow: 0 -1px 0 rgba(115, 114, 114, 0.3);float: left;}
      .contact-button a:hover {box-shadow:inset 0 60px 0 #2797B7;}
      #search-button button.open:hover {box-shadow:inset 0 60px 0 #2797B7;}
      .contact-close:hover {color: #0894D8;background: #2797B7;}
      .contact-sec {border: 1px solid #eee;position: fixed;top: 50%;margin-top: -190px;left: 50%;max-width: 300px;width: 90%;margin-left: -150px;background-color: #FFF;height: auto;z-index: 99999;display: none;-webkit-transform: scale(0);-moz-transform: scale(0);transform: scale(0);transition: all .5s ease;webkit-transition: all .2s ease;-moz-transition: all .2s ease;-o-transition: all .2s ease;}
      .contact-close {position: absolute;top:-1px;background-color: #2797B7;color: #FFF!important;height: 40px;width: 40px;text-align: center;line-height: 40px;font-size: 13px;left: 87.1%;}
      .contact-sec .widget {padding: 20px;}
      .contact-sec .contact-form-cross {display: none;}
      #ContactForm1 h2 {width: 116%;font-size: 16px;text-align: center;line-height: 40px;height: 40px;font-weight: 500;color: #fff;background-color: #22A1C4;padding-bottom: 8px;top: -21px;left: 20px;}
      .contact-sec.contact-show {-webkit-transform: scale(1);-moz-transform: scale(1);transform: scale(1);}
      contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-widget {max-width: none;padding: 5px;  text-align: right;}
      .contact-form-name, .contact-form-email, .contact-form-email-message {background-color: #f3f3f3;width: 250px;border: 0;}
      .contact-form-button-submit {max-width: none;width: 100%;height: 35px;border: 0;background-image: none;background-color: #0894D8;cursor: pointer;color: #fff;}
      .contact-form-name:focus, .contact-form-email:focus, .contact-form-email-message:focus {border: 0;box-shadow: none;}
      .contact-form-name:hover, .contact-form-email:hover, .contact-form-email-message:hover {border: 0;}
      .contact-form-button-submit:hover {background-color: #222;background-image: none;border: 0;}
      input#ContactForm1_contact-form-name, input#ContactForm1_contact-form-email{padding: 8px;background: #F7F7F7;border: 1px solid #ECECEC;margin-bottom: 10px; width:100%;}
      textarea#ContactForm1_contact-form-email-message {padding: 8px;background: #F7F7F7;border: 1px solid #ECECEC;margin-top: 10px;width: 100%;}
      .contact-button {margin-left:-50px;float: left;font-family: droid arabic kufi;}
      #ContactForm1_contact-form-submit {background: #FFFFFF;color: #4993A8;font-weight: 100;width: 110%;font-family:'ge_ss_threeregular',Droid Sans;height: 40px;margin-right: -16px;font-size: 14px;border: 1px dashed #4993A8;float: right;margin-top: 10px;}
      #ContactForm1_contact-form-submit:hover {color: #fff;background: #2797B7;}
      #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 135%;margin-top: 62px;font-size: 13px;font-weight: 100;color: #FFF;font-family: 'ge_ss_threeregular',Droid Sans;margin-right: -26px;background: #22A1C4;}
      .contact-form-error-message-with-border {background: #ED5345;border: none;box-shadow: none;color: #fff;padding: 5px 10px;font-family: 'ge_ss_threeregular',Droid Sans;font-weight: 100;}
      .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
      img.contact-form-cross {line-height:40px;margin-left:5px;}
      form i.fa.fa-pencil, form i.fa.fa-users,form i.fa.fa-envelope,form i.fa.fa-bars {padding:3px 5px;border-radius:3px;font-weight:normal;font-size:120%;float: right;
        margin-left: 10px;}
      form i.fa.fa-users {color:#ffa726;}
      form i.fa.fa-envelope {color:#22A1C4;}
      form i.fa.fa-pencil{color:#22A1C4;}
      .contact-button .fa.fa-envelope {
        margin: 7px;
        margin-top: 12px;
      }

4 . ابحث عن </body> وضع فوقه الكود التالي

<script type='text/javascript'>

   $(&quot;.contact-button a&quot;).click(function() {

        var e = $(&quot;.contact-sec&quot;);

        if (e.is(&quot;:hidden&quot;)) {

            e.fadeIn(300);

            e.addClass(&quot;contact-show&quot;);

            $(&quot;#outer-wrapper&quot;).addClass(&quot;pop_contact &quot;)

        }

        return false

    });

    $(document).bind(&quot;click&quot;, function(e) {

        if ($(e.target).parents(&quot;.contact-sec&quot;).length === 0) {

            $(&quot;.contact-sec&quot;).fadeOut(300);

            $(&quot;#outer-wrapper&quot;).removeClass(&quot;pop_contact &quot;);

            $(&quot;.contact-sec&quot;).removeClass(&quot;contact-show&quot;)

        }

    });

    $(&quot;.contact-close&quot;).click(function() {

        $(&quot;.contact-sec&quot;).fadeOut(300);

        $(&quot;#outer-wrapper&quot;).removeClass(&quot;pop_contact &quot;);

        $(&quot;.contact-sec&quot;).removeClass(&quot;contact-show&quot;);

        return false

    });

</script>

5 . إبحث عن <body> وضع الكود التالي اسفلها
*إذا لم تجد <body> قم بالبحث عن footerwrapper أو عن footer-wrapper وضع الكود التالي فوقه

<b:section class='contact-sec' id='contact-sec' maxwidgets='1' showaddelement='yes'>

     <b:widget id='ContactForm1' locked='true' title='إتصل بنا' type='ContactForm'>

       <b:includable id='main'>

<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'>

<data:title/>

</h2>

</b:if>

<div class='contact-form-widget'>

<div class='form'>

<form name='contact-form'>

<span style='text-align: right;'>

<i class='fa fa-users'/>

الإسم الكريم

</span>

<input id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>

<span style='text-align: right;'>

<i class='fa fa-envelope'/>

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

</span>

<input id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>

<span style='text-align: right;'>

<i class='fa fa-pencil'/>

الرسالة

</span>

<textarea cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'/>

<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>

</div>

<a class='contact-close' href='#'>

<i class='fa fa-times'/>

</a>

</b:includable>

     </b:widget>

   </b:section>

6 . الكود الآتي هو لتفعيل ظهر أيقونة الإتصال يمكنك إضافتها بأي مكان تراه مناسب

<div class='contact-button'><a href='#'><i class='fa fa-envelope'/></a></div>