วิธีการเพิ่มแบบฟอร์มติดต่อ (หน้าติดต่อเรา) ในบล็อกเกอร์

เผยแพร่แล้ว: 2020-11-10

การเพิ่มแบบฟอร์มติดต่อเราใน Blogger เป็นงานที่น่าเบื่อเนื่องจากไม่รองรับปลั๊กอินเช่น WordPress

สิ่งที่บล็อกเกอร์ Blogspot ส่วนใหญ่ทำคือการขอความช่วยเหลือจากเว็บไซต์ของบุคคลที่สาม (foxyform, jotform, 123contactform ฯลฯ )

หน้าแบบฟอร์มติดต่อของ Blogger แต่วันนี้คุณจะได้เรียนรู้วิธีเพิ่มหน้าติดต่อเราอย่างเป็นทางการใน Blogger

อย่างที่บอกไปก่อนหน้านี้ว่าสามารถเอารหัสของบุคคลที่สามไปใส่ในหน้าใหม่ได้เช่นการเดินเล่นในสวนสาธารณะ แต่แบบฟอร์มการติดต่ออย่างเป็นทางการนั้นดีกว่าแบบนั้นมาก

ประโยชน์ของแบบฟอร์มบล็อกเกอร์อย่างเป็นทางการ

คุณจะได้รับข้อความทันทีที่มีคนส่ง และความสามารถในการส่งมอบก็ 100% เช่นกัน
อินเทอร์เฟซที่เรียบง่ายช่วยให้ผู้เยี่ยมชมติดต่อคุณได้ง่าย
หากคุณรู้จักภาษา Cascade Style Sheet (CSS) คุณจะปรับแต่งแบบฟอร์มได้ง่ายตามความชื่นชอบ
ทั้งหน้าจะไม่ได้รับการโหลดซ้ำสำหรับการส่งข้อความ

ฉันได้แบ่งบทช่วยสอนนี้ออกเป็นสามส่วนเพิ่มแกดเจ็ตผู้ติดต่อซ่อนและติดตั้งโค้ดอย่างเป็นทางการในหน้าใหม่

ส่วนที่ 1: การเพิ่ม Contact Gadget

ทำตามขั้นตอนด้านล่างเพื่อเพิ่มแกดเจ็ตติดต่อเราในบล็อกของคุณ

ขั้นตอนที่ 1 : ไปที่ blogger.com และลงชื่อเข้าใช้บัญชีของคุณ หากคุณใช้งานหลายบล็อกคุณต้องเลือกบล็อกที่ต้องการจากรายการ

ขั้นตอนที่ 2 : คลิกที่เค้าโครงจากแถบด้านข้างทางซ้ายเพื่อรับตัวเลือกในการเพิ่มแกดเจ็ต

ขั้นตอนที่ 3 : คุณสามารถเห็นลิงก์ เพิ่ม Gadget บนแผงหลักทางด้านขวา เมื่อคลิกที่มันจะนำคุณไปสู่รายการแกดเจ็ต

ขั้นตอนที่ 4 : จากนั้นเลือก แกดเจ็ตเพิ่มเติม จากด้านซ้าย ตอนนี้คุณจะเห็น แบบฟอร์มการติดต่อ เพียงแค่เพิ่มเหมือนกัน

ส่วนที่ 2: การซ่อน Gadget

ตอนนี้คุณจะได้เรียนรู้วิธีซ่อนแกดเจ็ตผู้ติดต่อ

ขั้นตอนที่ 1 : เราต้องเล่นกับส่วนเทมเพลตที่นี่ คลิกที่เทมเพลตจากเมนูด้านซ้าย

ขั้นตอนที่ 2 : จากนั้นคลิกที่ แก้ไข HTML และคุณจะได้รับรหัสทั้งหมดของบล็อกในช่องขนาดใหญ่

ขั้นตอนที่ 3 : ค้นหา ]]> </ b: skin> และวางรหัสต่อไปนี้ไว้ข้างหน้า

div # ContactForm1 {
แสดง: ไม่มี! สำคัญ;
}

จากนั้นคลิกบันทึกเพื่อเก็บการเปลี่ยนแปลง

หลังจากขั้นตอนที่สามคุณจะไม่เห็นวิดเจ็ตผู้ติดต่อในบล็อกของคุณ

ส่วนที่ - 3: การเพิ่มแบบฟอร์มการติดต่อลงในเพจ

คุณจะได้รับรหัสแบบฟอร์มการติดต่อของบล็อกเกอร์อย่างเป็นทางการที่กำหนดเองที่นี่เพื่อเพิ่มเพื่อแสดงในหน้าแยกต่างหาก

ขั้นตอนที่ 1 : ไปที่ Pages และคลิกที่ New page

ขั้นตอนที่ 2 : วางโค้ดต่อไปนี้ลงในโปรแกรมแก้ไขโพสต์ HTML หลังจากลบทุกอย่างในนั้น

<div id =” custom_ContactForm1″ class =” widget ContactForm”>
<div class =” contact-form-widget”>
<p> ติดต่อกับเราโดยกรอกแบบฟอร์มด้านล่าง </p>
<div class =” form”>
<form name =” contact-form”>
<p> </p>
ชื่อ
<br>
<input type =” text” value =”” size =” 30″ name =” name” id =” ContactForm1_contact-form-name” class =” contact-form-name”>
<p> </p>
อีเมล์
<span style =” font-weight: bolder;”> * </span>
<br>
<input type =” text” value =”” size =” 30″ name =” email” id =” ContactForm1_contact-form-email” class =” contact-form-email”>
<p> </p>
ข้อความ
<span style =” font-weight: bolder;”> * </span>
<br>
<textarea row =” 5″ name =” email-message” id =” ContactForm1_contact-form-email-message” cols =” 25″ class =” contact-form-email-message”> </textarea>
<p> </p>
<input type =” button” value =” Send” id =” ContactForm1_contact-form-submit” class =” contact-form-button contact-form-button-submit”>
<p> </p>
<div style =” text-align: center; ความกว้างสูงสุด: 222px; ความกว้าง: 100%”>
<p id =” ContactForm1_contact-form-error-message” class =” contact-form-error-message”> </p>
<p id =” ContactForm1_contact-form-success-message” class =” contact-form-success-message”> </p>
</div>
</form>
</div>
</div>
<div class =” clear”> </div>
<span class =” widget-item-control”>
<span class =” item-control blog-admin”>
<a title =” แก้ไข” target =” configContactForm1″ onclick =” return _WidgetManager._PopupConfig (document.getElementById (“ ContactForm1″));” href =” // www.blogger.com/rearrange?blogID=8799058979810298021&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1″ class =” quickedit”>
<img width =” 18″ height =” 18″ src =” // img1.blogblog.com/img/icon18_wrench_allbkg.png” alt =””>
</a>
</span>
</span>
<div class =” clear”> </div>
</div>

ขั้นตอนที่ 3: เพิ่มชื่อ (เช่นติดต่อเรา) จากนั้นเปลี่ยนการตั้งค่าที่ให้ไว้ด้านล่าง

ขั้นตอนที่ 4: สุดท้ายคลิกปุ่มเผยแพร่ นั่นคือทั้งหมด

ข้อความที่ส่งจากแบบฟอร์มติดต่อนี้จะถูกส่งไปยังอีเมลของผู้ดูแลระบบ หากบล็อกมีผู้ดูแลระบบมากกว่าหนึ่งคนทุกคนจะได้รับ

➜บทช่วยสอน Blogspot ที่มีประโยชน์อื่น ๆ :

วิธีเพิ่มไฟล์ Robots.txt แบบกำหนดเองใน Blogger
จะส่งแผนผังเว็บไซต์ของบล็อกเกอร์ไปยัง Google Search Console ได้อย่างไร

ห่อ

ฉันหวังว่าคุณจะรู้วิธีเพิ่มหน้าติดต่อเราในบล็อกเกอร์แล้ว หากคุณพบปัญหาใด ๆ เช่นความสามารถในการส่งมอบเป็นศูนย์แม้หลังจากข้อความสำเร็จแล้วฉันขอแนะนำให้ติดตั้งวิดเจ็ตผู้ติดต่อใหม่

และใช่ถ้าคุณมีความรู้เพียงพอในการจัดการกับ CSS และตัวอย่าง JavaScript คุณสามารถปรับแต่งเพจเพื่อให้ดูน่าสนใจยิ่งขึ้น

อย่าลืมแชร์โพสต์นี้กับเพื่อนบล็อกเกอร์ของคุณ