9 ขั้นตอนในการสร้างหน้าติดต่อ (Contact Form) ภายใน Blogger สำหรับผู้เริ่มต้น

ปกติการสร้าง Contact Form ใน Blogger มันต้องเข้าไปเพิ่ม Gadget ใน Template ซึ่งถ้าทำแบบนี้ Contact Form ของเรา จะเป็นพื้นที่ส่วนเล็กที่เพิ่มใน Template ของ Blog เราเท่านั้น ดังรูปที่ 1

รูปที่ 1 แสดงตัวอย่าง Contact Form ที่ Blogger มีให้ 

แต่ถ้าคุณต้องการทำหน้า Contact Form แยกออกมาเป็นหน้า Contact Us ละ (ไม่ งง กันใช่ไหม 👌👌👌หมายถึง คุณสามารถคลิกเมนู Contact Us แล้วจะเปิดหน้าที่มีรายละเอียดของ ชื่อ อีเมล์ และข้อความ ให้กรอก) ดังรูปที่ 2

รูปที่ 2 แสดงตัวอย่างการสร้างหน้า Contact Form ใน Blogger

บทความนี้ จะอธิบาย 9 ขั้นตอนการสร้างหน้า Contact Form ใน Blogger 
โดยทั้ง 9 ขั้นตอนนี้ จะต้องดำเนินการกับ 3 เมนู ดังนี้
1. "Layout" หรือ "รูปแบบ"
2. "Template" หรือ "ธีม"
3. "Page" หรือ "หน้าเว็บ"


วิธีการเพิ่มฟังค์ชั่น Contact Form ใน Blogger 
ขั้นตอนที่ 1. ไปที่หน้า Dashboard
ขั้นตอนที่ 2. เลือกเมนู "Layout" หรือ "รูปแบบ" ที่ด้านซ้าย
ขั้นตอนที่ 3. คลิกที่ "เพิ่ม Gadget" ดังรูปที่ 3

รูปที่ 3 แสดงหน้าจอการเพิ่ม Contact Form

ขั้นตอนที่ 4. จะเกิด PopUp ขึ้นมา ให้เลือก "More Gadget >> Contact Form" หรือ "แกดเจ็ด >> ฟอร์มรายชื่อติดต่อ" ดังรูปที่ 4

รูปที่ 4 แสดงหน้าจอเพื่อเลือก Contact Form

ขั้นตอนที่ 5.  เลือกเมนู "Template" หรือ "ธีม" ที่ด้านซ้าย แล้วคลิกปุ่ม HTML เพื่อแก้ไขโค้ด

ขั้นตอนที่ 6.  ค้นหาคำว่า "ContactForm" จะเจอ Code ด้านล่างนี้ ก็ให้ Hi-Light ข้อความระหว่าง Code ทั้งสองข้างบนนี้ 
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
...
<b:includable id='main'>

ขั้นตอนที่ 7.  ให้เลือกข้อความส่วนสีส้ม แล้วตัดข้อความสีส้มทั้งหมดไปว่างในหน้าติดต่อ (Contact us) ที่สร้างไว้
<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'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <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/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <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;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>

ขั้นตอนที่ 8: ค้นหาคำว่า ]]></b:skin> และคัดลอก Code ด้านล่างนี้ ไปวางที่ด้านบน

/*CUSTOM CONTACT FORM BY ICANBUILDABLOG.COM */
.contact-form-widget {
margin-left:auto;
margin-right:auto;
width: 600px;
max-width: 100%;
padding: 0px;
color: #000;
}
.fm_name, .fm_email {
float:left;
padding:5px;
width:48%
}
.fm_message {
padding:5px;
}
.contact-form-name, .contact-form-email {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
height:40px;
padding:10px;
font-size:16px;
}
.contact-form-email-message {
width:100%;
max-width: 100%;
height:100px;
margin-bottom:10px;
padding:10px;
font-size:16px;
}
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
height:30px;
font-size:16px;
}
.contact-form-button-submit:hover{
background: #ffffff;
color: #000000;
border: 1px solid #FAFAFA;
}

ขั้นตอนที่ 9: เลือกเมนู "Page" หรือ "หน้าเว็บ" ที่ด้านซ้าย และสร้างหน้าเว็บใหม่ ด้วยการคลิกปุ่ม "หน้าเว็บใหม่" และคัดลอก Code ในขั้นตอนที่ 7 ไปวางในหน้าเว็บที่สร้างมาใหม่เมื่อสักครู่ และกด Save

คุณจะได้หน้าติดต่อเรียบร้อย

😥😥😥😥😥

ปล. แต่ใน Blog นี้เรามีการปรับหน้าติดต่อเรานิดหน่อย ถ้าอยากได้รูปแบบเดียวกับเรา ให้เปลี่ยน ดังนี้
ขั้นตอนที่ 7 ทำการลบ Code ทิ้งไป 
ขั้นตอนที่ 8 ทำการลบ Code ทิ้งไป
ขั้นตอนที่ 9 วาง Code ด้านล่างนี้
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<br />
<style>
.twist_blogger_cntct_form_wrap {
  margin: 0 auto;
  max-width: 840px;
  padding: 0 10px;
  position: relative;
  background-color: #FDFDFD;
}
.twist_blogger_cntct_form_wrap:after, .twist_blogger_cntct_form_wrap:before {
  content: '';
  display: table;
  clear: both;
}
/*----Change Contact Form Background Color Here----*/
div#twist_blogger_cntct_form {
  padding: 30px 30px 20px 30px;
  background: #AA999B;
  border-radius: 3px;
  margin: 30px auto 30px;
  color: #FFF;
  font-size: 16px;
  max-width: 400px;
}
input#ContactForm1_contact-form-name, .contact-form-email, .contact-form-email:hover, .contact-form-email:active, .contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover {
  padding: 5px;
  box-shadow: none!Important;
  min-width: 200px;
  max-width: 400px;
  width: 100%;
  border: 0 !important;
  line-height: 1em;
  min-height: 31px;
  background: #FCFCFC;
  margin-bottom: 15px;
}
/**** Submit button style ****/
.contact-form-button-submit {
  background: #AA999A;
  font-size: 20px;
  letter-spacing: 2px;
  cursor: pointer;
  outline: none!important;
  color: #FFFFFF;
  border: 2px solid rgba(255,255,255,1);
  border-radius: 50px;
  min-width: 200px;
  max-width: 400px;
  width: 100%;
  text-transform: uppercase;
  height: 46px;
  margin-top: 10px!important;
  transition: all 300ms ease-;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
}
/**** Submit button on mouse hover ****/
.contact-form-button-submit:hover {
  border: 2px solid;
  color: #FFFFFF;
  background: #EF4800 !important;
}
/**** Submit button on Focus ****/
.contact-form-button-submit:focus, .contact-form-button-submit.focus {
  border-color: #FFFFFF;
  box-shadow: none !important;
}
/**** Error message and Success Message ****/
.contact-form-error-message-with-border .contact-form-success-message {
  background: #f9edbe;
  border: 1px solid #f0c36d;
  bottom: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  color: #666;
  font-size: 12px;
  font-weight: bold;
  padding-bottom: 10px;
  line-height: 19px;
  margin-left: 0;
  opacity: 1;
  position: static;
  text-align: center;
}
</style>

<br />
<div class="twist_blogger_cntct_form_wrap">
<div id="twist_blogger_cntct_form">
<form name="contact-form">
Your Name<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Enter your name here..." size="30" type="text" value="" /><br />
<br />
Your Email*<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Enter your email here..." size="30" type="text" value="" /><br />
<br />
Your Message*<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Write your message here..." rows="5"></textarea><br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /><br />
<div style="max-width: 400px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<br /></div>
</div>
</div>