Cara Menambahkan Formulir Kontak ke Toko Shopify Anda

Layanan pelanggan dapat menjadi salah satu bagian yang paling menantang dari bisnis Anda, tetapi tanpa pelanggan yang bahagia, Anda tidak memiliki bisnis. Itulah mengapa sangat penting untuk menjadikan pengalaman pelanggan sebagai salah satu prioritas utama Anda, dan cara pelanggan Anda berkomunikasi dengan Anda adalah bagian dari pengalaman itu.

Banyak bisnis menggunakan alat helpdesk seperti Intercom atau ZenDesk, tetapi itu mungkin lebih dari yang Anda butuhkan saat ini.

Jika tema Shopify Anda belum memiliki formulir kontak, atau Anda menggunakan alat pihak ketiga seperti Typeform, Google Forms, atau Wufoo atau ingin sedikit menyederhanakan, Anda dapat membuat formulir kontak sederhana Anda sendiri langsung di Shopify .

Demi tutorial ini, saya akan menganggap toko Anda tidak memiliki formulir dan pada akhir tutorial ini, Anda akan memiliki sesuatu yang menerima informasi pelanggan dan terlihat seperti ini:

Sebelum Kita Mulai: Buat Salinan Tema Anda

Masuk ke dasbor Shopify Anda dan buka Toko Online > Tema . Temukan tema langsung Anda dan klik menu tarik-turun Tindakan dan klik Duplikat .

Setelah duplikat, klik menu Tindakan lagi dan klik Edit kode .

Mari Membangun Formulir Kontak!

Kita akan membutuhkan dua hal agar formulir kontak kita berfungsi: File template baru untuk menyimpan kode kita, dan halaman baru di toko kita.

Buat File Template Baru

Sekarang setelah Anda masuk ke editor kode, lihat ke sisi kiri layar di pohon folder Anda dan klik dan perluas Templates . Kemudian klik tautan Tambahkan template baru .

Kemudian pilih Page dari dropdown pertama dan beri nama Contact . Kemudian tekan tombol Buat template .

Salin dan Tempel Kode Kami

Berikut adalah semua kode yang kita butuhkan untuk membangun formulir kontak kita.

Salin dan tempel blok kode berikut ke file baru Anda dan tekan tombol Simpan .

<div class= “lebar halaman” >
<div class= “kisi” >
<div class= “grid__item medium-up–five-sixths medium-up–push-one-twelfth” >
<div class= “bagian-header text-center” >
<h1> {{ page.title }} </h1>
</div>

{% jika page.content.size > 0 %}
<div class= “rte” >
{{ halaman.konten }}
</div>
{% berakhir jika %}

<div class= “bentuk kontak-bentuk-vertikal” >
{%- tetapkan formId = 'ContactForm' -%}
{% formulir 'kontak', id: formId %}
{% termasuk 'form-status', form_id: formId %}

<div class= “grid grid–half-talang” >
<div class= “grid__item medium-up–one-half” >
<label for= “{{ formId }}-nama” > {{ '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= “benar” > * </span></label>
<input yang dibutuhkan type= “email” id= “{{ formId }}-email” name= “contact[email]” autocorrect= “off” autocapitalize= “off” aria-required= “true”
{%- jika form.errors berisi 'email' -%}
class= “masukan–kesalahan”
aria-invalid= “benar”
aria-describedby= “{{ formId }}-email-error”
{%- berakhir jika -%}
>
{%- jika form.errors berisi 'email' -%}
<span id= “{{ formId}}-email-error” class= “input-error-message” >
<span class= “tersembunyi secara visual” > {{ 'general.accessibility.error' | t }} </span>
{% termasuk 'icon-error' %}
<span> {{ form.errors.translated_fields['email'] | huruf besar }} {{ form.errors.messages['email'] }}. </span>
</span>
{%- berakhir jika -%}
</div>
</div>

<label for= “{{ formId }}-order” class= “hidden-label” > Nomor Pesanan: </label>
<input type= “text” id= “{{ formId }}-order” name= “contact[order]” placeholder= “#1234” >

<label for= “{{ formId }}-telepon” > {{ 'contact.form.phone' | t }} </label>
<input type= “tel” id= “{{ formId }}-phone” name= “contact[phone]” pattern= “[0-9\-]*” >

<label for= “{{ formId }}-pesan” > {{ 'contact.form.message' | t }} <span aria-hidden= “benar” > * </span></label>
<textarea required rows= “10” id= “{{ formId }}-message” name= “contact[body]” > {% if form.body %}{{ form.body }}{% endif %} </ area teks>

<input type= “kirim” class= “btn” value= “{{ 'contact.form.submit' | t }}” >

{% bentuk akhir %}
</div>
</div>
</div>
</div>

Cuplikan Validasi

Formulir kami memiliki beberapa validasi ringan di dalamnya yang akan membantu pengguna mengetahui jika mereka melakukan kesalahan saat mengisi formulir. Kode ini ada dalam file potongan cair terpisah yang disebut form-status.liquid .

Kembali ke dalam editor kode tema Anda dan klik dan perluas Cuplikan . Kemudian klik Tambahkan cuplikan baru .

Beri nama form-status dan tekan Create snippet .

Salin dan tempel kode yang ditemukan di sini ke dalam cuplikan baru dan tekan Simpan .

Buat Halaman Kontak Baru

Selanjutnya, kembali ke admin Shopify, klik Toko Online > Halaman .

Kemudian klik tombol Tambahkan halaman di kanan atas layar Anda. Pilih judul dan masukkan deskripsi (opsional). Kemudian di sisi kanan bawah layar, klik dropdown di bawah Template Suffix dan cari template baru yang baru saja kita buat. Itu harus disebut page.contact .

Sekarang, halaman baru ini akan menggunakan kode yang baru saja kita tempelkan ke file template baru kita. Jadi jika Anda membuat perubahan di sana, itu hanya akan tercermin pada halaman yang telah Anda pilih untuk menggunakan template page.contact . Setelah Anda puas dengan judul dan deskripsi, klik Simpan .

Sekarang, Anda dapat melihat pratinjau halaman dengan mengklik Lihat halaman di bagian atas.

Tapi tunggu! Apa Arti Semua Kode Itu?

Mari pelajari lebih lanjut tentang kode yang kami gunakan sehingga Anda dapat mengedit atau mengubah sendiri jika perlu. Jika Anda ingin mengunduh atau mem-bookmark kode, saya membuat Gist di sini sehingga Anda dapat dengan mudah menyalin dan menempelkannya.

Kodenya mungkin terlihat berlebihan tetapi setelah Anda melihat melewati semua pernyataan if, kelas, dan atribut lainnya, itu cukup mendasar.

Elemen utama yang Anda perlukan agar formulir dapat menangkap dan mengirimkan data dengan benar adalah label dan bidang input yang diperlukan yang menerima data formulir.

Lihatlah kode yang menangkap nama pelanggan:

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

Ini membutuhkan label dan elemen input . Label memiliki atribut for , yang mengaitkan (atau menghubungkan) ke elemen input yang cocok yang memiliki id yang sama.

Teks di antara tanda kurung adalah apa yang akan dilihat pelanggan Anda di halaman kontak. Sepertinya {{ 'contact.form.name' | t }} karena menggunakan tag dinamis yang mereferensikan pengaturan bahasa di dalam Admin Shopify Anda.

Area admin ini mungkin baru bagi Anda, tetapi di sinilah semua teks yang dapat diedit di dalam Shopify tinggal. Beberapa hal lain yang dapat Anda edit di sini adalah judul Checkout, atau teks pada tombol “Bayar sekarang”.

Untuk mengedit label “nama” untuk formulir kontak kami, buka Pengaturan > Bahasa Toko > Ubah bahasa tema .

Klik Kontak di navigasi.

Sekarang Anda dapat melihat semua bidang yang dapat Anda akses untuk digunakan di dalam formulir kontak kami.

Mengirim Email Uji

Kembali ke formulir kontak Anda di situs web Anda.com/pages/contact-us dan coba kirimkan formulirnya. Jika Anda berhasil, Anda akan melihat sesuatu seperti ini di layar.

Maka Anda akan menerima email yang terlihat seperti ini:

Bonus

Sekarang Anda telah berhasil membuat formulir kontak asli untuk toko Anda yang bahkan memiliki bidang tambahan untuk nomor pesanan! Dengan mengumpulkan ini di muka, Anda menghemat kerumitan dan waktu karena harus memintanya nanti. Ini sangat berharga untuk setiap toko dengan pelanggan tetap yang memiliki banyak pesanan dan yang dapat merujuk ke lebih dari satu.

Kesimpulan

Saya harap Anda menemukan tutorial ini berharga. Saya dulu menggunakan salah satu alat pihak ketiga yang saya bicarakan di awal untuk mengumpulkan informasi ini dan meskipun hebat, mereka tidak terintegrasi ke etalase Anda dan harganya mahal!