วิธีเพิ่มแบบฟอร์มการติดต่อไปยังร้านค้า Shopify ของคุณ

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

ธุรกิจจำนวนมากใช้เครื่องมือโปรแกรมช่วยเหลือ เช่น Intercom หรือ ZenDesk แต่นั่นอาจมากกว่าที่คุณต้องการในตอนนี้

หากธีม Shopify ของคุณไม่มีแบบฟอร์มการติดต่อ หรือคุณกำลังใช้เครื่องมือของบุคคลที่สาม เช่น Typeform, Google Forms หรือ Wufoo หรือต้องการลดความซับซ้อนลงเล็กน้อย คุณสามารถสร้างแบบฟอร์มติดต่อแบบง่ายของคุณเองได้ใน Shopify .

เพื่อประโยชน์ของบทช่วยสอนนี้ ฉันจะถือว่าร้านค้าของคุณไม่มีแบบฟอร์ม และในตอนท้ายของบทช่วยสอนนี้ คุณจะมีบางอย่างที่ยอมรับข้อมูลลูกค้าและมีลักษณะดังนี้:

ก่อนที่เราจะเริ่มต้น: ทำสำเนาธีมของคุณ

เข้าสู่ระบบแดชบอร์ด Shopify และไปที่ ร้านค้าออนไลน์ > ธีม ค้นหาธีมสดของคุณแล้วคลิกเมนูดรอปดาวน์ Actions แล้วคลิก Duplicate

เมื่อซ้ำกัน ให้คลิกเมนูการ ทำงาน อีกครั้งแล้วคลิก แก้ไขโค้ด

มาสร้างแบบฟอร์มการติดต่อกันเถอะ!

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

สร้างไฟล์เทมเพลตใหม่

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

จากนั้นเลือก เพจ จากเมนูดรอปดาวน์แรกและเรียกมันว่า ติดต่อ จากนั้นกดปุ่ม สร้างแม่แบบ

คัดลอกและวางรหัสของเรา

นี่คือรหัสทั้งหมดที่เราต้องการเพื่อสร้างแบบฟอร์มการติดต่อของเรา

คัดลอกและวางบล็อคโค้ดต่อไปนี้ลงในไฟล์ใหม่ของคุณแล้วกดปุ่ม บันทึก

<div class= “page-width” >
<div class= “ตาราง” >
<คลาส div = “grid__item medium-up–five-sixths medium-up–push-one-twelth” >
<div class= “section-header text-center” >
<h1> {{ page.title }} </h1>
</div>

{% ถ้า page.content.size > 0 %}
<div class= “rte” >
{{ page.content }}
</div>
{% สิ้นสุด %}

<div class= “แบบฟอร์มการติดต่อ-แบบฟอร์มแนวตั้ง” >
{%- กำหนด formId = 'ContactForm' -%}
{% แบบฟอร์ม 'ติดต่อ', id: formId %}
{% รวม 'สถานะแบบฟอร์ม', form_id: formId %}

<div class= “กริดกริด–ครึ่งรางน้ำ” >
<div class= “grid__item medium-up–one-half” >
<label for= “{{ formId }}-name” > {{ 'contact.form.name' | t }} </label>
<input type= “text” id= “{{ formId }}-name” name= “contact[name]” >
</div>
<div class= “grid__item medium-up–one-half” >
<label for= “{{ formId }}-email” > {{ 'contact.form.email' | t }} <span aria-hidden= “จริง” > * </span></label>
<input required type= “email” id= “{{ formId }}-email” name= “contact[email]” autocorrect= “off” autocapitalize= “off” aria-required= “true”
{%- ถ้า form.errors มี 'email' -%}
class= “อินพุต–ข้อผิดพลาด”
aria-invalid= “จริง”
aria-describedby= “{{ formId }}-email-error”
{%- สิ้นสุด -%}
>
{%- ถ้า form.errors มี 'email' -%}
<span id= “{{ formId}}-email-error” class= “input-error-message” >
<span class= “ซ่อนอยู่” > {{ 'general.accessibility.error' | t }} </span>
{% รวม 'ไอคอนข้อผิดพลาด' %}
<span> {{ form.errors.translated_fields['email'] | ตัวพิมพ์ใหญ่ }} {{ form.errors.messages['email'] }} </span>
</span>
{%- สิ้นสุด -%}
</div>
</div>

<label for= “{{ formId }}-order” class= “hidden-label” > หมายเลขคำสั่งซื้อ: </label>
<input type= “text” id= “{{ formId }}-order” name= “contact[order]” placeholder= “#1234” >

<label for= “{{ formId }}-โทรศัพท์” > {{ 'contact.form.phone' | t }} </label>
<input type= “tel” id= “{{ formId }}-phone” name= “contact[phone]” pattern= “[0-9\-]*” >

<label for= “{{ formId }}-message” > {{ 'contact.form.message' | t }} <span aria-hidden= “จริง” > * </span></label>
<textarea required rows= “10” id= “{{ formId }}-message” name= “contact[body]” > {% if form.body %}{{ form.body }}{% endif %} </ พื้นที่ข้อความ>

<ประเภทอินพุต= “ส่ง” คลาส= “btn” ค่า= “{{ 'contact.form.submit' | t }}” >

{% สิ้นสุดรูปแบบ %}
</div>
</div>
</div>
</div>

ตัวอย่างข้อมูลการตรวจสอบ

แบบฟอร์มของเรามีการตรวจสอบความถูกต้องเล็กน้อย ซึ่งจะช่วยให้ผู้ใช้ทราบว่าพวกเขาทำผิดพลาดเมื่อกรอกแบบฟอร์มหรือไม่ รหัสนี้อยู่ในไฟล์ตัวอย่างของเหลวแยกต่างหากที่เรียกว่า form-status.liquid

กลับไปที่เครื่องมือแก้ไขโค้ดธีม แล้วคลิกและขยาย Snippets จากนั้นคลิก เพิ่มข้อมูลโค้ดใหม่

ตั้งชื่อเป็น form-status และกด Create snippet

คัดลอกและวางโค้ดที่พบที่นี่ลงในข้อมูลโค้ดใหม่ แล้วกด บันทึก

สร้างหน้าติดต่อใหม่

ถัดไป กลับไปที่ส่วน Shopify admin คลิกที่ ร้านค้าออนไลน์ > เพจ

จากนั้นคลิกที่ปุ่ม เพิ่มหน้า ที่ด้านบนขวาของหน้าจอ เลือกชื่อและป้อนคำอธิบาย (ไม่บังคับ) จากนั้นที่ด้านล่างขวาของหน้าจอ ให้คลิกดรอปดาวน์ใต้ ส่วนต่อท้ายเทมเพลต แล้วมองหาเทมเพลตใหม่ที่เราเพิ่งสร้างขึ้น ควรเรียกว่า page.contact

ตอนนี้ หน้าใหม่นี้จะใช้โค้ดที่เราเพิ่งวางลงในไฟล์เทมเพลตใหม่ของเรา ดังนั้น หากคุณทำการเปลี่ยนแปลงที่นั่น การเปลี่ยนแปลงจะมีผลกับหน้าเว็บที่คุณเลือกใช้เทมเพลต page.contact เท่านั้น เมื่อคุณพอใจกับชื่อและคำอธิบายแล้ว ให้คลิก บันทึก

ตอนนี้คุณสามารถดูตัวอย่างหน้าได้โดยคลิก ดูหน้าที่ ด้านบน

แต่เดี๋ยวก่อน! รหัสทั้งหมดนั้นหมายถึงอะไร?

มาเรียนรู้เพิ่มเติมเล็กน้อยเกี่ยวกับโค้ดที่เราใช้เพื่อให้คุณสามารถแก้ไขหรือเปลี่ยนแปลงได้เองหากต้องการ หากคุณต้องการดาวน์โหลดหรือบุ๊กมาร์กโค้ด ฉันได้สร้าง Gist ที่นี่ เพื่อให้คุณสามารถคัดลอกและวางได้อย่างง่ายดาย

โค้ดอาจดูล้นหลาม แต่เมื่อคุณมองข้ามคำสั่ง if, คลาส และคุณลักษณะอื่นๆ ทั้งหมดแล้ว มันค่อนข้างเรียบง่าย

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

ดูรหัสที่จับชื่อลูกค้า:

<label for= “{{ formId }}-name” > {{ 'contact.form.name' | t }} </label>
<input type= “text” id= “{{ formId }}-name” name= “contact[name]” >

ต้องมี ป้ายกำกับ และองค์ประกอบ อินพุต ป้ายกำกับมีแอตทริบิวต์ for ซึ่งเชื่อมโยง (หรือเชื่อมต่อ) กับองค์ประกอบอินพุตที่ตรงกันซึ่งใช้ รหัส เดียวกันร่วมกัน

ข้อความระหว่างวงเล็บคือสิ่งที่ลูกค้าของคุณจะเห็นในหน้าติดต่อ ดูเหมือนว่า {{ 'contact.form.name' | t }} เนื่องจากใช้แท็กไดนามิกที่อ้างอิงการตั้งค่าภาษาภายใน Shopify Admin ของคุณ

ผู้ดูแลระบบในส่วนนี้อาจใหม่สำหรับคุณ แต่นี่คือจุดที่ข้อความทั้งหมดที่แก้ไขได้ภายใน Shopify สิ่งอื่น ๆ ที่คุณสามารถแก้ไขได้คือชื่อการชำระเงิน หรือข้อความบนปุ่ม "ชำระเงินทันที"

หากต้องการแก้ไขป้ายกำกับ “ชื่อ” สำหรับแบบฟอร์มติดต่อของเรา ให้ไปที่การ ตั้งค่า > ภาษาของร้านค้า > เปลี่ยนภาษาของธีม

คลิกที่ ติดต่อ ในการนำทาง

ตอนนี้คุณสามารถดูฟิลด์ทั้งหมดที่คุณสามารถเข้าถึงได้เพื่อใช้ในแบบฟอร์มการติดต่อของเรา

การส่งอีเมลทดสอบ

กลับไปที่แบบฟอร์มการติดต่อของคุณที่ yourwebsite.com/pages/contact-us และลองส่งแบบฟอร์ม หากคุณทำสำเร็จ คุณควรเห็นสิ่งนี้บนหน้าจอ

จากนั้นคุณควรได้รับอีเมลที่มีลักษณะดังนี้:

โบนัส

ตอนนี้ คุณได้สร้างแบบฟอร์มการติดต่อดั้งเดิมสำหรับร้านค้าของคุณแล้ว ซึ่งยังมีฟิลด์เพิ่มเติมสำหรับหมายเลขคำสั่งซื้ออีกด้วย! การรวบรวมล่วงหน้านี้จะช่วยประหยัดเวลาและไม่ต้องขอในภายหลัง ซึ่งมีค่ามากเป็นพิเศษสำหรับร้านค้าที่มีลูกค้าประจำซึ่งมีคำสั่งซื้อจำนวนมากและอาจอ้างอิงถึงร้านอื่นได้มากกว่าหนึ่งแห่ง

บทสรุป

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