របៀប​ដាក់​សំ​ណុំ​បែប​បទ​ទំនាក់​ទំនង​ Contact Form

​​   សំណុំ​បែប​បទ​ទំនាក់​ទំនង ឬ Contact Form គឺ​ជា​​ផ្ទាំង​ Form មួយ​ដែល​មាន​ដូច​ជា​ឈ្មោះ​ អា​សយ​ដ្ឋាន​ Email និង​សំណេរ​នៃ​សារ​ជា​ដើម​។ ប្លុក​ហ្គ័រមាន​ Widget មួយ​ដែល​មាន​ឈ្មោះ​ថា Contact Form Gadget ដែល​អនុញ្ញាត​ឲ្យ​យើង​អាច​ដាក់​សំណុំ​បែប​បទ​ទំនាក់​ទំនង​គ្នា​បាន​តាម​រយៈ​ Email នៃ​ប្លុក​នីមួយ​ៗ​។ ក្នុង​អត្ថបទ​មួយ​នេះ​ដែរ​ខ្ញុំ​នឹង​បង្ហាញ​អ្នក​ទាំង​អស់​គ្នា​ពី​របៀប​ដាក់​ Contact Form នេះ​តែ​ម្ដង​ តោះ​! កុំ​ឲ្យ​ខាត​ពេល​យូរ​ទៅ​មើល​របៀប​ដាក់​ជា​មួយ​ខ្ញុំ​នៅ​ខាង​ក្រោម​ទាំង​អស់​គ្នា​។

ចុច​មើល​ Contact Form សាក​ល្បង​/preview/button

១-សូម​ចូល​ទៅ​កាន់​គណនី​ប្លុក​របស់​អ្នក​
២-ចូល​ទៅ​កាន់ Theme បន្ទាប់​មក Edit HTML
៣-ចម្លង​កូដ​ខាង​ក្រោម​ដាក់​ពី​ខាង​លើ ]]></b:skin>

.hidden-widgets{display:none;visibility:hidden}
.contact-form{overflow:hidden}
.contact-form .widget-title{display:none}
.contact-form .contact-form-name{width:calc(50% - 5px)}
.contact-form .contact-form-email{width:calc(50% - 5px);float:right}
.contact-form-widget form{font-weight:400}
.contact-form-name{float:left;width:100%;height:40px;font-family:inherit;font-size:13px;line-height:40px;box-sizing:border-box;padding:5px 10px;margin:0 0 10px;border:1px solid #ebebeb}
.contact-form-email{float:left;width:100%;height:40px;font-family:inherit;font-size:13px;line-height:40px;box-sizing:border-box;padding:5px 10px;margin:0 0 10px;border:1px solid #ebebeb}
.contact-form-email-message{float:left;width:100%;height:250px;font-family:inherit;font-size:15px;box-sizing:border-box;padding:5px 10px;margin:0 0 10px;border:1px solid #ebebeb}
.contact-form-button-submit{float:left;width:100%;height:40px;background-color:#2196F3;font-size:13px;color:#fff;line-height:35px;cursor:pointer;box-sizing:border-box;padding:0 10px;margin:0;border:0;border-bottom:2px solid rgba(0,0,0,0.1)!important;border-radius:3px;transition:all 0.7s}
.contact-form-button-submit:hover{background-color:#222222;color:#ffffff}
.contact-form-error-message-with-border{float:left;width:100%;background-color:#fbe5e5;font-size:11px;text-align:center;line-height:11px;padding:3px 0;margin:10px 0;box-sizing:border-box;border:1px solid #fc6262}
.contact-form-success-message-with-border{float:left;width:100%;background-color:#eaf6ff;font-size:11px;text-align:center;line-height:11px;padding:3px 0;margin:10px 0;box-sizing:border-box;border:1px solid #5ab6f9}
.contact-form-cross{margin:0 0 0 3px}
.contact-form-error-message,.contact-form-success-message{margin:0}

៤-ចម្លង​កូដ​ខាង​ក្រោម​ដាក់​ពី​ខាង​លើ </body>

<script type='text/javascript'>
//<![CDATA[
$(".post-body strike").each(function () {
    var t = $(this),
        c = t.text().trim();
    t.html();
    c.match("contact-form") && (t.replaceWith('<div class="contact-form"/>'),
 $(".contact-form").append($("#ContactForm1")))
});
//]]>
</script>

៥-ចម្លង​កូដ​ខាង​ក្រោម​ដាក់​ពី​ខាង​ក្រោម​កូដ​នៃ​ Footer ប្លុក​របស់​អ្នក

<div class='hidden-widgets' style='display:none'>
    <b:section class='hidden-widgets' deleted='true' id='hidden-widgets' maxwidgets='1' showaddelement='no'>
      <b:widget id='ContactForm1' locked='true' title='Contact Form' type='ContactForm' version='2' visible='true'>
        <b:includable id='main'>
          <b:include name='widget-title'/>
          <b:include name='content'/>
        </b:includable>
        <b:includable id='content'>
          <div class='contact-form-widget'>
            <div class='form'>
              <form name='contact-form'>
                <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' expr:placeholder='data:contactFormNameMsg + &quot; *&quot;' name='name' size='30' type='text' value=''/>
                <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' expr:placeholder='data:contactFormEmailMsg + &quot; *&quot;' name='email' size='30' type='text' value=''/>
                <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' expr:placeholder='data:contactFormMessageMsg + &quot; *&quot;' name='email-message' rows='5'/>
                <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
                <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
                <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
              </form>
            </div>
          </div>
        </b:includable>
      </b:widget>
    </b:section>
  </div>

៦-ចុច​ពាក្យ Save Theme​។

* របៀប​ដាក់​ Contact Form ចូល​ទំព័រ​ Blog Page:
-បង្កើត​ទំព័រ​ថ្មី New Page ដោយ​ដាក់​ឈ្មោះ​ដែល​អ្នក​ពេញ​ចិត្ត​ ឬ​បើក​ Edit Page ដែល​មាន​ស្រាប់​
-នៅ​លើ​ផ្ទាំង​ Compose Mode សរសេរ​ពាក្យ contact-form រួច​ Select បន្ទាប់​មក​ Add Strikethrough (Icon ABC)
-ចុច​ពាក្យ​ Publish ឬ Update ជា​ការ​ស្រេច​៕