Membangun hubungan dengan pelanggan dimulai dengan memudahkan orang untuk menghubungi Anda. Namun jika formulir kontak Anda tersembunyi di dalam menu atau penuh dengan bidang yang tidak perlu, calon pelanggan akan meninggalkan proses sebelum mereka mengirim pesan. Saat pengunjung tidak bisa terhubung dengan mudah dengan Anda, Anda kehilangan prospek, masukan, dan peluang untuk mengubah pengunjung yang penasaran menjadi pelanggan yang membayar.
Dengan widget Contact Form, Anda bisa membuat formulir kontak profesional yang bisa disesuaikan langsung di toko Shopify Anda — tidak perlu coding. Ini responsif seluler, melindungi dari spam, dan terintegrasi mulus dengan email, CRM, atau alat otomatisasi Anda. Siap mencoba di situs web Anda?
- Integrasikan formulir kontak profesional ke Shopify tanpa coding.
- Tambahkan formulir kontak ke Shopify melalui metode bawaan dan kustom.
- Optimalkan formulir Anda untuk konversi yang lebih baik.
- Perbaiki masalah umum pengaturan formulir kontak.
Untuk membantu Anda memulai, kami membagi petunjuk menjadi dua bagian: pengaturan cepat 4 langkah dan panduan menyeluruh nanti – pilih yang sesuai dengan alur kerja Anda.
Panduan Cepat: Siapkan Formulir Kontak Shopify Seketika
Ini adalah pintasan pengaturan bagi siapa saja yang ingin menambahkan formulir kontak ke Shopify dalam beberapa langkah mudah:
- Buka editor Elfsight dan pilih template formulir kontak.
- Sesuaikan bidang formulir, tata letak, dan branding Anda.
- Klik ‘Tambahkan ke situs web gratis’ dan salin potongan kode yang dihasilkan.
- Tempelkan kode ke backend toko Shopify Anda dan publikasikan.
🔧 Bangun formulir kontak Shopify Anda di editor langsung: tanpa coding, coba gratis.
Fitur Utama yang Membuat Widget Form Kontak Menonjol
Sekarang Anda telah melihat betapa cepat dan mudahnya proses integrasi ini. Berikut gambaran singkat fitur-fiturnya yang membuatnya sangat efektif:
| Fitur Utama | Mengapa Ini Penting |
|---|---|
| 15+ tipe bidang yang dapat disesuaikan | Rancang formulir persis yang Anda perlukan dengan bidang seperti nama, email, telepon, pesan, tanggal, waktu, unggahan berkas, menu dropdown, kotak centang, dan lainnya – semua tanpa coding. |
| Proteksi Spam Bawaan | Jaga Kotak Masuk tetap rapi dengan penyaringan spam otomatis, sehingga Anda hanya menerima pertanyaan pelanggan yang sah. |
| Desain responsif untuk seluler | Formulir Anda tampak sempurna dan berjalan mulus di semua perangkat – desktop, tablet, atau ponsel – sehingga setiap pengunjung bisa mengirimkannya dengan mudah. |
| Tata Letak Mengambang dan Tersemat | Pilih antara formulir mengambang yang persisten, formulir tertanam inline, atau tata letak gaya panel untuk menyesuaikan dengan desain toko Anda dan alur pengguna. |
| Integrasi Pintar | Hubungkan dengan Google Sheets, Zapier, Mailchimp, dan layanan email untuk mengotomatiskan manajemen prospek dan tidak pernah melewatkan pengiriman. |
| Logika Bersyarat | Tampilkan atau sembunyikan bidang formulir berdasarkan respons pengunjung untuk pengalaman yang personal dan lebih efisien. |
| Pesan terima kasih kustom | Atur pesan pasca-kirim yang dipersonalisasi atau arahkan ke halaman terima kasih untuk memperkuat merek Anda dan langkah selanjutnya. |
Ini adalah beberapa sorotan saja tentang apa yang bisa dilakukan widget Form Kontak untuk bisnis Anda. Untuk daftar fitur lengkap, lihat halaman produk widget tersebut.
Panduan Instalasi Lengkap untuk Widget Anda (Dengan Tips)
Dengan fungsi utama widget ini sebagai pedoman, mari kita telusuri setiap langkah untuk menyiapkan dan menyesuaikan formulir kontak dari awal.
1. Pilih templat
Saat Anda membuka editor widget Formulir Kontak, langkah pertama adalah memilih templat. Template menentukan tata letak awal dan tujuan formulir kontak Anda — apakah itu formulir kontak standar, formulir pengumpulan email, formulir permintaan dukungan, atau formulir callback.
Pilih tata letak yang paling cocok dengan tujuan komunikasi Anda dan klik “Lanjutkan dengan template ini” untuk melanjutkan ke langkah berikutnya.
2. Bangun Bidang Formulir Anda
Di tab Buat Formulir, Anda bisa menyesuaikan bidang yang akan muncul di formulir kontak Anda. Formulir Kontak Elfsight mendukung 15+ jenis bidang, memungkinkan Anda mengumpulkan informasi yang tepat yang Anda butuhkan tanpa membebani pengunjung:
- Bidang Teks – Input teks satu baris dan multi-baris
- Email & Phone – Input pra-isi untuk informasi kontak
- Dropdown & Pemilih – Pilihan ganda, tombol radio, kotak centang, dan pilihan gambar
- Pemilih Tanggal & Waktu – Kalender untuk penjadwalan atau informasi acara
- Unggah Berkas – Izinkan pengunjung melampirkan berkas hingga 100 MB
- Pemisah & Judul – Atur bagian formulir untuk kejelasan
Untuk setiap bidang yang Anda tambahkan, Anda bisa menyesuaikan labelnya, menambahkan teks placeholder yang membantu (seperti contoh apa yang perlu dimasukkan), tandai bidang sebagai wajib dengan mengaktifkan opsi “Wajib Diisi” — yang akan menampilkan tanda asteriks (*) di samping nama bidang, dan mengaktifkan Logika Kondisional untuk mengontrol visibilitas bidang.
Susun field-field Anda dalam urutan yang masuk akal sesuai alur kerja dengan menyeretnya ke posisi. Anda juga bisa menambahkan pemisah untuk mengelompokkan field terkait secara visual, sehingga formulir lebih mudah dipindai dan ramah pengguna.
3. Mengatur Notifikasi Email
Buka tab Surel untuk mengatur ke mana kiriman formulir harus dikirim dan bagaimana pengunjung Anda akan diberitahu:
- Beritahu Saya – Masukkan alamat email tempat Anda ingin menerima kiriman formulir. Anda bisa menambahkan beberapa alamat email untuk memberi tahu seluruh tim Anda.
- Notifikasi Responden – Aktifkan email konfirmasi otomatis yang dikirim kepada pengunjung setelah mereka mengisi formulir.
- Pengaturan Pengirim Surel – Sesuaikan detail pengirim dan perilaku pengiriman untuk komunikasi yang profesional.
4. Atur Tata Letak
Pindah ke tab Layout untuk menentukan bagaimana formulir Anda akan ditampilkan di situs Anda:
- Layout Inline – Formulir muncul langsung dalam konten halaman Anda. Sempurna untuk halaman kontak khusus atau halaman arahan.
- Tata Letak Panel Mengambang – Formulir meluncur dari tepi layar, tetap terlihat saat pengguna menggulir. Ideal untuk menarik perhatian tanpa mengganggu alur halaman.
- Lebar Formulir – Sesuaikan lebar (100px hingga 1200px) atau aktifkan Lebar Penuh untuk merentangkan ke seluruh kontainer.
- Tata Letak Bidang – Pilih antara tata letak bidang vertikal atau horizontal sesuai preferensi desain Anda.
5. Sesuaikan Tampilan
Di tab Tampilan, sesuaikan formulir dengan merek dan sistem desain situs web Anda. Anda dapat menyesuaikan:
- Skema Warna – Pilih terang, gelap, atau palet warna kustom
- Warna Aksen – Tetapkan warna utama untuk tombol, tautan, dan elemen yang aktif
- Jenis Huruf & Tipografi – Pilih keluarga huruf dan ukuran untuk judul dan teks isi
- Latar Belakang & Bingkai – Sesuaikan latar belakang formulir dan bidang-bidangnya
- Gaya Tombol – Sesuaikan tampilan tombol kirim dan keadaan hover-nya
Jika Anda memiliki pedoman merek spesifik atau membutuhkan gaya yang presisi per-piksel, Elfsight juga mendukung CSS Kustom untuk kustomisasi tingkat lanjut.
6. Tetapkan Tindakan & Pengaturan Pasca Pengiriman
Buka tab Pengaturan untuk menentukan apa yang terjadi setelah pengunjung mengirimkan formulir Anda dan menyesuaikan preferensi bahasa:
- Tindakan Pasca-Kirim – Pilih menampilkan pesan terima kasih, mengarahkan ke halaman tertentu, atau menyembunyikan formulir setelah pengiriman.
- Proteksi Spam – Aktifkan reCAPTCHA untuk mencegah pengiriman otomatis dan melindungi kotak masuk Anda dari spam bot.
- Bahasa – Pilih bahasa untuk label formulir dan elemen antarmuka dari menu dropdown.
- Opsi Lanjutan – Aktifkan parameter pra-isi atau tambahkan JavaScript Kustom untuk fungsionalitas tambahan.
7. Sambungkan Integrasi
Di tab Integrations, Anda bisa menghubungkan formulir kontak Anda dengan layanan eksternal untuk mengotomatiskan alur kerja Anda dan mengkonsolidasikan data prospek. Integrasi yang didukung meliputi:
- Google Sheets – Secara otomatis menyimpan semua pengiriman formulir ke spreadsheet untuk pemantauan dan analisis yang mudah.
- Mailchimp – Tambahkan responden formulir langsung ke daftar pemasaran email Anda
- Zapier – Connect to 3,000+ apps to automate actions like creating CRM records, sending Slack notifications, or scheduling follow-up tasks
8. Dapatkan Kode Instalasi
Setelah formulir Anda sepenuhnya dikonfigurasi, klik “Tambahkan ke Situs Web” (atau “Simpan” jika Anda sudah memiliki akun Elfsight) — sebuah pop-up akan menampilkan skrip pemasangan unik Anda. Salin seluruh cuplikan kode ini; Anda akan menggunakannya untuk menempatkan widget di situs Anda.
9. Tambahkan Form Kontak ke Shopify
Setelah widget Anda siap dan potongan instalasi telah disalin, langkah terakhir adalah menyematkannya di toko Shopify Anda. Berikut tiga cara instalasi paling umum:
Halaman Tertentu — Online Store 2.0
- Di admin Shopify, buka Saluran Penjualan → Toko Online → Tema dan klik Kustomisasi.
- Pilih halaman tujuan dari dropdown di bagian atas editor visual.
- Klik Tambahkan bagian dan pilih Kustom Liquid.
- Tempelkan cuplikan Anda ke kolom Custom Liquid dan klik Simpan.
Halaman Spesifik — Tema Vintage
- Di admin Shopify buka Toko Online → Tema → Sesuaikan.
- Pilih halaman yang akan diedit dari dropdown di bagian atas.
- Klik Tambahkan bagian → Konten Kustom. Di dalam blok Konten Kustom, gunakan Tambahkan blok → HTML Kustom jika diperlukan.
- Tempel kode sematan Elfsight Anda ke bidang HTML, atur lebar wadah menjadi 100% jika diperlukan, dan klik Simpan.
Semua Halaman (seluruh situs)
- Di admin Shopify klik menu … dan pilih Sunting Kode.
- Open Layout → theme.liquid
- Tempel potongan Elfsight Anda sebelum tag penutup dan klik Simpan.
Halaman Produk
Menambahkan ke deskripsi produk
- Pergi ke Produk dan buka produk tersebut untuk diedit.
- Klik ikon
</>untuk membuka editor HTML, tempelkan kodenya, dan klik Simpan.
Menambahkan ke semua halaman produk
- Di admin Shopify buka Toko Online → Tema → Aksi → Sunting Kode.
- Open Sections → main-product.liquid
- Tempelkan kode Elfsight Anda di tempat yang Anda inginkan muncul dan klik Simpan.
Jika Anda mengeksplorasi berbagai cara menambahkan formulir kontak ke Shopify, bagian berikut merinci metode bawaan dan alternatif.
Cara Menambahkan Formulir Kontak ke Shopify: Alternatif yang Tersedia
Meskipun Elfsight adalah solusi komprehensif, ada beberapa cara bawaan dan spesifik platform untuk membuat formulir kontak di Shopify yang bisa Anda pertimbangkan. Masing-masing memiliki manfaat dan kompromi yang berbeda.
Form Kontak Bawaan Shopify
Shopify menyertakan fitur formulir kontak bawaan yang bisa Anda tambahkan ke halaman mana pun tanpa alat pihak ketiga.
- Buka editor halaman Anda. Di Admin Shopify, buka Halaman dan sunting halaman kontak Anda.
- Tambahkan bagian Formulir Kontak. Gunakan blok bawaan Shopify atau bagian – cari “Formulir Kontak” di menu blok.
- Sesuaikan bidang dasar. Formulir bawaan Shopify mencakup bidang nama, email, dan pesan.
- Pengiriman masuk ke email toko Anda. Semua pengiriman dikirim ke alamat email utama toko Anda.
Untuk informasi lebih lanjut tentang penerapan formulir kontak bawaan, lihat Pusat Bantuan Shopify.
Aplikasi Formulir Shopify (App Store)
Toko aplikasi Shopify mencakup beberapa pembuat formulir kontak yang menawarkan lebih banyak kustomisasi dan fitur daripada opsi bawaan.
- Cari Shopify App Store. Telusuri aplikasi yang diberi label “Pembuat Formulir” atau “Formulir Kontak” untuk menemukan opsi yang sesuai kebutuhan Anda.
- Tinjau fitur dan harga. Bandingkan opsi kustomisasi, integrasi, dan dukungan antar aplikasi yang tersedia.
- Pasang dan ikuti panduan pengaturannya. Kebanyakan aplikasi menyediakan panduan pemasangan langkah demi langkah di admin Shopify Anda.
Telusuri Shopify App Store untuk informasi lebih lanjut.
Solusi HTML/Liquid Kustom (Untuk Pengembang)
Jika Anda memiliki sumber daya pengembangan, Anda bisa membuat formulir kontak kustom menggunakan bahasa templating Liquid Shopify dan HTML. Ini memberi Anda kendali penuh atas logika dan tampilan formulir.
- Tulis kode kustom. Bangun struktur formulir Anda menggunakan template Liquid Shopify yang dipadukan dengan HTML dan CSS.
- Tangani pengiriman. Atur pemrosesan backend menggunakan endpoint formulir Shopify atau layanan backend (Netlify, AWS Lambda, dll.).
- Konfigurasikan pengiriman email. Hubungkan ke layanan email untuk menerima notifikasi.
- Pertahankan kelangsungan operasional. Anda bertanggung jawab atas pembaruan, keamanan, dan kepatuhan.
Dokumentasi Shopify Liquid | Referensi API Shopify
Bagaimana Perbandingan Cara Menambahkan Formulir Kontak Ini?
| Metode | Pro Utama 👍 | Kendala Utama 👎 |
|---|---|---|
| Form Kontak Elfsight | Sangat dapat disesuaikan dengan lebih dari 20 tipe bidang, integrasi (Zapier, Google Sheets, Mailchimp), dan tanpa biaya bulanan – cukup sematkan kode. | Pengaturan akun diperlukan, meskipun gratis. |
| Formulir Bawaan Shopify | Bawaan, tanpa pengaturan, tanpa dependensi eksternal. | Sangat terbatas – hanya 3 bidang, tidak ada kustomisasi, tidak ada integrasi lanjutan. |
| Formulir Shopify App Store | Integrasi bawaan di admin Shopify, lebih banyak fitur dibanding opsi bawaan. | Sering kali memerlukan biaya langganan bulanan; beban aplikasi berlebih. |
| HTML/Liquid Kustom | Kontrol penuh atas setiap aspek formulir. | Alur kerja tingkat lanjut atau persyaratan sangat spesifik. Diperlukan keahlian pemrograman. |
Pengguna kami menemukan bahwa Elfsight menawarkan keseimbangan ideal antara fleksibilitas, kemudahan, dan integrasi yang kuat—tanpa beban pemeliharaan dari solusi kustom. Namun sebelum Anda menyelesaikan dan mempublikasikan widget Anda, ada beberapa kiat optimisasi yang perlu diingat.
📝 8 Langkah Agar Form Kontak Anda Lebih Efektif
Dari menguji ratusan formulir kontak Shopify, kami tahu pengaturan yang tepat bisa mengubah pengunjung santai menjadi prospek yang terlibat. Berikut daftar periksa teruji kami untuk membuat formulir kontak Anda efektif, mudah digunakan, dan siap konversi.
- Jaga formulir Anda tetap singkat dan fokus. Setiap kolom yang Anda tambahkan menurunkan tingkat penyelesaian. Targetkan 5–7 kolom esensial maksimum — kumpulkan hanya informasi yang benar-benar Anda perlukan di muka.
- Jadikan proposisi nilai Anda jelas. Tambahkan judul di atas formulir yang menjelaskan mengapa mereka harus mengirimkan – “Dapatkan kutipan gratis,” “Mari selesaikan masalah Anda,” atau “Bergabunglah dengan daftar VIP kami.”
- Gunakan urutan bidang yang pintar. Letakkan bidang paling mudah (nama, email) di bagian atas, bidang yang lebih rumit (pesan rinci) di bagian tengah, dan konfirmasi yang wajib di bagian bawah untuk menjaga momentum.
- Terapkan logika bersyarat. Tampilkan hanya bidang yang relevan berdasarkan masukan pengunjung – mengurangi kelelahan formulir dan meningkatkan tingkat penyelesaian.
- Sesuaikan formulir Anda dengan merek Anda. Pastikan warna, huruf, dan gaya selaras dengan tema toko Shopify Anda. Pengalaman visual yang konsisten membangun kepercayaan dan mengurangi tingkat pengabaian.
- Atur beberapa integrasi. Sambungkan ke email, Google Sheets, dan Zapier secara bersamaan sehingga kiriman masuk ke tim Anda secara instan dan tidak hilang.
- Sesuaikan pesan terima kasih. Setelah pengiriman, tampilkan pesan yang hangat dan relevan. Misalnya, ‘Terima kasih telah menghubungi kami! Kami akan merespons dalam 2 jam selama jam operasional.’ Hal ini memperkuat komitmen Anda.
- Uji di perangkat seluler dan desktop. Pratinjau formulir Anda di semua perangkat dan perbaiki masalah tata letak yang muncul. Formulir seluler cenderung memiliki tingkat penyelesaian yang lebih rendah jika tidak dioptimalkan dengan benar.
Hanya beberapa penyesuaian kecil saja bisa membuat perbedaan besar. Yuk lihat contoh dunia nyata bagaimana menambahkan formulir kontak yang dirancang dengan baik meningkatkan keterlibatan pelanggan bagi salah satu pengguna kami.
Formulir Kontak yang Menghasilkan Hasil Nyata
Let’s Go Peak District, sebuah situs pariwisata yang menampilkan destinasi, pengalaman, dan akomodasi terbaik di Peak District, Inggris, menghadapi masalah umum: formulir kontak mereka yang generik tidak efektif menangkap pertanyaan, dan mereka memiliki kendali terbatas atas tampilannya serta bagaimana fungsinya.
Sebelum Elfsight
Tim menghadapi beberapa tantangan:
- Formulir Kontak bawaan tidak sesuai dengan estetika situs web Anda.
- Direktori layanan mandiri tidak memiliki opsi SEO yang memadai dan kontrol konten.
- Panel kontrol pengguna terasa berat dan tidak ramah bagi calon pelanggan.
- Penyesuaian kustom pada formulir bawaan sering rusak setelah pembaruan platform.
Solusi: Mengimplementasikan Elfsight Contact Form
Phil mengintegrasikan widget Formulir Kontak Elfsight di seluruh situs pariwisata miliknya dan menggabungkannya dengan alat Elfsight lainnya untuk menciptakan pengalaman pengguna yang komprehensif. Berikut cara dia menggunakannya:
“Kami telah banyak menggunakan Formulir Kontak, dan kami menjual widget Ulasan atau Umpan Instagram sebagai upsell atau dengan paket listing kami yang lebih tinggi. Ini bekerja sangat, sangat baik.”
Phil Sproson, pendiri Let’s Go Peak District
Phil menempatkan Formulir Kontak Elfsight secara strategis di halaman kontaknya dan berdampingan dengan penawaran pariwisata utama seperti:
- Daftar akomodasi (untuk permintaan pemesanan)
- Halaman pengalaman dan aktivitas (untuk pertanyaan acara)
- Halaman Harga (untuk informasi paket)
Penampilan profesional formulir dan fungsionalitas yang mulus memberi pengunjung kepercayaan bahwa pesan mereka akan ditanggapi dengan serius dan segera.
Hasil Nyata
Setelah menerapkan Elfsight Formulir Kontak:
- Peningkatan volume permintaan: Pengunjung yang sebelumnya ragu untuk menghubungi mereka kini mengajukan pertanyaan dengan percaya diri.
- Kualitas prospek yang lebih baik: Formulir ini menangkap informasi spesifik tentang apa yang menarik minat pengunjung (akomodasi, makanan, pengalaman, dll.)
- Beban dukungan berkurang: Tidak ada lagi formulir yang rusak setelah pembaruan platform — widget tetap andal.
- Keberhasilan Upselling: Bisnis pariwisata yang menggunakan platform ini kini beralih ke paket premium yang mencakup widget Elfsight seperti tampilan ulasan dan feed Instagram.
- Pengalaman pengguna yang lebih baik: Desain formulir yang modern dan responsif mendorong penyelesaian pada perangkat seluler
Gambaran Besar: Strategi Multi-Widget
Kisah sukses Phil tidak hanya pada formulir kontak. Ia memanfaatkan beberapa widget Elfsight yang bekerja bersama: Instagram Feed untuk menampilkan foto Peak District yang menakjubkan untuk menginspirasi para pelancong, All-in-One Reviews – untuk menampilkan testimoni dari pengunjung yang puas, serta Event Calendar, Store Locator dan Pricing Table widgets.
Dengan menggabungkan alat-alat ini, Let’s Go Peak District beralih dari direktori statis menjadi platform interaktif yang dinikmati pengunjung dan menarik bagi bisnis pariwisata untuk beriklan di dalamnya.
Terlepas dari Anda menjalankan situs pariwisata, toko e-commerce, atau bisnis berbasis layanan, pelajarannya jelas: formulir kontak yang dirancang dengan matang, yang menangkap informasi yang tepat, terlihat profesional, dan berjalan andal adalah investasi untuk pertumbuhan bisnis Anda.
Masalah Formulir Kontak & Perbaikannya
Menambahkan formulir kontak ke Shopify biasanya memakan hanya beberapa menit, tetapi terkadang pengguna menghadapi masalah pengaturan atau tampilan. Di bawah ini adalah solusi sederhana untuk masalah yang paling umum:
Mengapa formulir kontak saya tidak muncul di halaman Shopify saya?
Bersihkan cache peramban Anda dan coba lagi di jendela incognito untuk menghilangkan masalah caching.
Bagaimana cara menambahkan formulir kontak ke halaman Shopify tertentu?
Bisakah saya menampilkan formulir kontak di beberapa halaman?
Bagaimana cara menjadikan beberapa bidang formulir wajib?
Kirimannya masuk ke mana?
Bisakah saya menyesuaikan pesan terima kasih setelah pengiriman?
Apakah formulir kontaknya responsif di perangkat seluler?
Bagaimana cara mencegah pengiriman spam?
Pertanyaan atau Pemikiran?
Sekarang giliran Anda menambahkan formulir kontak profesional ke toko Shopify Anda dan mulai mengumpulkan lebih banyak prospek. Tetap terhubung dengan tim Elfsight: spesialis dukungan kami selalu siap membantu, Komunitas terbuka untuk diskusi, dan wishlist siap untuk ide-ide kreatif Anda!
