8 Contoh Formulir Kontak Yang Indah + Cara Menambahkannya ke Situs Web Anda

Diterbitkan: 2019-12-10

Formulir kontak sederhana - dalam beberapa bentuk atau lainnya, adalah pekerja keras dari hampir setiap situs web di Internet. Tetapi sementara setiap situs web memiliki formulir kontak, tidak semua desain formulir kontak dibuat sama.

Untuk membantu Anda membuat formulir kontak yang akan mencapai tujuan bisnis Anda, kami telah mengumpulkan delapan contoh formulir kontak dari situs web nyata. Untuk setiap contoh, kami akan memberi tahu Anda dengan tepat apa yang dilakukan dengan baik sehingga Anda tahu apa yang harus disertakan dalam formulir Anda.

Kemudian, untuk membuat postingan ini bagus dan dapat ditindaklanjuti, kami akan menunjukkan cara membuat formulir kontak fleksibel Anda sendiri tanpa memerlukan pengetahuan khusus.


Lima tips untuk memakukan desain formulir kontak Anda

Sebelum kita masuk ke contoh formulir kontak yang sebenarnya, mari kita mengambil jalan memutar cepat dan berbicara tentang apa yang membuat formulir kontak yang bagus. Jalan memutar ini akan mengatur panggung saat kita membahas apa yang dilakukan dengan baik oleh setiap contoh formulir kontak di bagian selanjutnya.

Anda kemungkinan besar memiliki formulir kontak karena Anda ingin orang mengisinya. Jadi bagaimana Anda membuat lebih banyak orang menggunakannya? Berikut adalah beberapa praktik terbaik…

1. Komunikasikan dengan jelas untuk apa formulir Anda

Jika Anda memiliki bisnis atau situs web yang sibuk, Anda mungkin memiliki beberapa formulir kontak untuk penggunaan yang berbeda. Misalnya, dapat berupa:

  • Formulir pertanyaan penjualan

  • Formulir dukungan pelanggan

  • Formulir pemesanan online

  • Formulir permintaan panggilan balik

  • Dll.

Ada dua pendekatan dasar untuk menangani ini dan Anda akan melihat keduanya dalam contoh formulir kontak kehidupan nyata di bawah ini:

  1. Bentuk terpisah. Buat formulir terpisah untuk setiap kasus penggunaan dan tambahkan teks yang memperjelas apa yang dilakukan setiap formulir.

  2. Bidang tarik-turun. Tambahkan bidang tarik-turun di bagian atas formulir Anda yang mencantumkan berbagai kasus penggunaan dan secara otomatis mengarahkan formulir kontak Anda ke tempat yang tepat.

Contoh formulir kontak dengan menu tarik-turun Lihat pratinjau langsung →

Either way, gunakan label formulir Anda dan teks di sekitarnya untuk membuat tujuan setiap formulir kontak benar-benar jelas bagi pengunjung Anda.

2. Batasi panjang formulir untuk lebih banyak konversi (tetapi jangan lupakan kualitas)

Semua hal dianggap sama, data tampaknya menunjukkan bahwa formulir kontak yang lebih panjang berarti lebih sedikit pengiriman.

Misalnya, HubSpot menganalisis lebih dari 40.000 halaman arahan dan melihat korelasi yang jelas antara tingkat konversi dan jumlah bidang formulir.

Tingkat konversi puncak adalah sekitar tiga bidang. Tingkat konversi terus turun hingga delapan bidang formulir, sebelum mendatar:

Tingkat konversi formulir kontak berdasarkan jumlah bidang formulir Sumber

Pada catatan yang lebih anekdot, Marketo menguji tiga formulir dengan hasil yang mirip dengan HubSpot:

  • 5 bidang — rasio konversi 13,4%

  • 7 bidang — rasio konversi 12,0%

  • 9 bidang — rasio konversi 10,0%

Tentu saja, mendapatkan lebih banyak pengiriman formulir kontak mungkin bukan tujuan Anda yang sebenarnya, jadi itu tidak sesederhana hanya memangkas jumlah bidang pada formulir Anda seminimal mungkin.

Misalnya, meskipun Anda mungkin mendapatkan lebih banyak kiriman dengan mengurangi bidang, kiriman tersebut mungkin tidak berkualitas tinggi karena hambatan masuknya sangat rendah.

Secara keseluruhan, aturan praktis yang baik adalah menghilangkan semua bidang yang tidak perlu , tetapi jangan menghilangkan bidang yang mengumpulkan informasi penting hanya untuk mempersingkat formulir Anda, terutama jika informasi tersebut berfungsi untuk memenuhi syarat prospek Anda.

3. Gunakan mikrokopi pintar untuk menjelaskan bidang

Jika formulir kontak Anda memiliki lebih dari sekadar bidang "nama, email, pesan" standar, Anda berisiko membingungkan pengunjung.

Misalnya, jika Anda memiliki bidang "anggaran", mungkin tidak jelas untuk apa anggaran itu. Apakah untuk keseluruhan proyek? Apakah hanya untuk bagian tertentu?

Untuk menghindari kebingungan seperti itu, Anda dapat menambahkan "mikroskop" ke formulir kontak Anda.

Mikrokopi pada dasarnya adalah teks penjelasan kecil yang menyertai bidang formulir untuk membuatnya lebih jelas. Misalnya, lihat bidang Volume pembayaran di bawah (Anda juga akan melihat contoh ini nanti):

Penggunaan mikrokopi dalam formulir kontak

4. Bereksperimen dengan format yang berbeda

Ketika kebanyakan orang memikirkan formulir kontak, mereka membayangkan formulir tertanam dasar yang sama seperti yang Anda lihat di sebagian besar situs web. Tetapi jika Anda ingin memudahkan orang untuk menghubungi Anda, terkadang perlu bereksperimen dengan metode tampilan yang berbeda, seperti popup atau bilah notifikasi.

Misalnya, memiliki tombol kontak mengambang di sisi situs Anda bisa sangat bagus untuk formulir kontak dukungan. Itu membuat pengguna sangat mudah untuk menghubungi Anda segera setelah mereka mengalami masalah, tanpa mengharuskan mereka untuk mencari-cari halaman kontak Anda:

Tombol kontak mengambang untuk dukungan teknis Lihat pratinjau langsung →

5. Beri tahu orang-orang tentang langkah selanjutnya dan tetapkan harapan

Desain formulir kontak Anda belum selesai setelah orang menekan Kirim!

Untuk menawarkan pengalaman pengguna yang lebih baik, Anda ingin memberi tahu orang-orang apa yang akan terjadi selanjutnya dan berapa lama waktu yang dibutuhkan. Sebagai contoh…

  • Apakah Anda menanggapi semua pertanyaan atau hanya beberapa?

  • Berapa lama waktu yang Anda butuhkan untuk merespons?

  • Apakah Anda akan merespons melalui email atau metode lain?

Jika Anda menetapkan harapan yang jelas, pengunjung Anda tidak akan bertanya-tanya apa yang terjadi dan apakah formulir Anda berfungsi.

Delapan contoh formulir kontak yang bagus dari situs web nyata

Sekarang setelah Anda mengetahui praktik terbaik, mari kita lihat beberapa desain formulir kontak dunia nyata untuk menginspirasi Anda sendiri dan menunjukkan praktik terbaik ini dalam tindakan.

1. Garis

Formulir kontak penjualan Stripe adalah contoh yang bagus tentang bagaimana terkadang mengumpulkan sedikit informasi tambahan dapat membuat formulir kontak Anda menghasilkan prospek yang lebih berkualitas (bahkan jika mungkin menurunkan tingkat konversi dasar sedikit).

Contoh formulir kontak dari situs web Stripe

Selain bidang informasi standar, Stripe menambahkan bidang Volume pembayaran sehingga mereka dapat lebih memahami potensi kualitas setiap prospek.

Selain itu, ada beberapa pilihan desain bagus lainnya termasuk:

  • Bukti sosial — logo di samping menambahkan bukti sosial dengan menampilkan semua bisnis sukses yang menggunakan Stripe.

  • Mikrokopi — istilah “Volume pembayaran” mungkin sedikit membingungkan, jadi Stripe menambahkan beberapa salinan berguna yang menjelaskan cara mengisi kolom.

  • Tujuan — Stripe memperjelas bahwa formulir ini hanya untuk pertanyaan penjualan. Ini memastikan mereka tidak membuat orang mencoba menggunakannya untuk dukungan atau penggunaan non-penjualan lainnya.

2. Dapatkan kontrol situs

Di Getsitecontrol, kami menangani desain formulir kontak kami sedikit berbeda.

Contoh formulir kontak Getsitecontrol Lihat pratinjau langsung →

Daripada membuat halaman "Hubungi kami" khusus yang harus dinavigasi pengunjung, kami cukup menyertakan tautan Hubungi kami yang membuka popup di sana dan kemudian – tidak perlu memuat ulang halaman.

Ini sangat nyaman bagi orang-orang karena mereka dapat…

  • mengakses formulir kontak kami dari halaman mana pun di situs,

  • kirim pesan tanpa mengganggu apa pun yang mereka lakukan (seperti membaca posting blog ini!).

Halaman sukses pengiriman formulir kontak Lihat pratinjau langsung →

Formulir kontak Getsitecontrol sederhana dan mudah diisi. Plus, ini dengan jelas mengomunikasikan langkah selanjutnya setelah orang mengirimkan formulir, bersama dengan CTA untuk memeriksa blog Getsitecontrol.

3. Kinsta

Kinsta memiliki satu halaman "Hubungi Kami" yang secara otomatis memandu pengguna menuju formulir kontak yang tepat tanpa mengharuskan mereka memuat ulang halaman.

Contoh formulir Kinsta

Kinsta mencantumkan lima permintaan kontak paling populer:

  1. Harga atau rencana

  2. Fitur atau informasi teknis

  3. Minta migrasi atau pertanyaan terkait lainnya

  4. Posting tamu, posting sponsor, atau permintaan backlink

  5. Ada yang lain

Saat pengguna memilih tujuan mereka, Kinsta akan menampilkan formulir kontak yang dipersonalisasi atau pesan.

Ini memungkinkan Kinsta untuk mengumpulkan informasi yang mereka butuhkan, tanpa membebani pengunjung dengan bidang asing.

Misalnya, pada formulir kontak Harga atau paket , Kinsta menambahkan bidang tambahan untuk memahami berapa banyak situs web dan pengunjung yang ingin dihosting oleh orang tersebut, tetapi bidang tersebut tidak muncul di formulir "Lainnya".

Kinsta juga menetapkan harapan yang jelas di bagian atas – “Kami akan menghubungi Anda dalam satu hari kerja”.

4. Pemutaran Pilihan

Penyaringan Pilihan memiliki formulir kontak yang panjang . Pada pandangan pertama, Anda mungkin berpikir itu akan mematikan tingkat konversi formulir. Dan itu agak benar — Penyaringan Pilihan pasti akan menerima lebih sedikit pengiriman formulir daripada dengan formulir yang lebih pendek.

Contoh formulir kontak Penyaringan Pilihan - versi panjang

Tapi mari kita bicara tentang mengapa kadang-kadang tidak apa-apa, dan mengapa ini adalah contoh formulir kontak yang bagus.

Choice Screening beroperasi di ruang bisnis-ke-bisnis yang sangat khusus. Mereka mencoba mendapatkan prospek berkualitas yang akan berubah menjadi pelanggan lama, bukan hanya pengiriman formulir kontak.

Dengan daftar layanan terperinci dan banyak kotak centang, formulir ini akan menyingkirkan orang-orang yang belum yakin apa yang mereka inginkan dan hanya membiarkan melalui prospek yang memenuhi syarat yang memiliki peluang besar untuk berubah menjadi pelanggan.

Bisa dibilang bahwa Choice Screening adalah menyaring calon pelanggan mereka dengan formulir kontak ini!

5. Joel Klettke / Copywriting Kasual Bisnis

Joel adalah seorang copywriter profesional, jadi Anda dapat bertaruh bahwa desain formulir kontak dan salinannya akan tepat sasaran.

Contoh formulir lead gen untuk copywriter bisnis

Bentuk Joel sendiri sederhana, dengan bidang standar ditambah beberapa bidang kualifikasi tambahan untuk anggaran seseorang. Namun, semua yang terjadi di sebelah formulir membuat ini menjadi contoh formulir kontak yang bagus.

Dalam teks itu, Joel melakukan pekerjaan yang baik dalam menetapkan harapan dan mengkualifikasikan petunjuknya. Dia juga dengan sengaja mengusir klien beranggaran rendah dengan mendiskusikan tarif minimumnya. Sementara Joel dapat menghapus penyebutan ini untuk mendapatkan tingkat konversi dimuka yang lebih tinggi, hal itu sebenarnya akan menghasilkan persentase prospek yang memenuhi syarat yang lebih rendah dan hanya membuang-buang waktu Joel.

6. Neil Patel

Neil Patel menjalankan salah satu situs web pemasaran digital paling populer di dunia, jadi Anda bisa yakin dia mendapatkan banyak pengiriman formulir kontak.

Contoh formulir kontak singkat Neil Patel

Untuk membantu mengarahkan kiriman tersebut ke tempat yang tepat, Neil menyertakan drop-down "Saya ingin mengobrol tentang" di mana orang dapat memilih dari berbagai opsi yang telah ditentukan sebelumnya. Dia juga menggunakan beberapa salinan di kotak placeholder untuk meminta orang-orang agar pesan mereka singkat dan langsung ke intinya.

Yang ini sederhana – tetapi terkadang sederhana saja yang Anda butuhkan dalam desain formulir kontak Anda.

7. Lab Fokus

Oke, ini menyenangkan, aneh, dan pasti tidak akan berhasil untuk setiap bisnis. Tetapi jika Anda berada di ruang kreatif (yaitu Focus Lab), membuat desain formulir kontak yang aneh seperti ini dapat menunjukkan bahwa Anda dapat berpikir di luar kebiasaan.

Desain formulir kontak kreatif Focus Lab

Daripada membuat formulir tradisional, Focus Lab lebih banyak menggunakan pendekatan gaya Mad Libs di mana pengunjung memasukkan informasi mereka dalam paragraf yang ada. Dengan menggunakan pendekatan ini, Focus Lab juga dapat mengumpulkan lebih banyak informasi (seperti tujuan dan anggaran) tanpa tampilan mengesankan yang mungkin dimiliki desain formulir kontak yang lebih tradisional.

8. CAMICB

CAMICB, kependekan dari Community Association Managers International Certification Board, menawarkan sertifikasi untuk asosiasi komunitas di AS.

Popup formulir kontak CAMICB dibuat di Getsitecontrol

Hal penting tentang formulir kontak CAMICB adalah ia menggunakan pendekatan halaman popup/"Hubungi Kami". Ketika pengguna mendarat di halaman Hubungi Kami , situs web CAMICB langsung membuka formulir kontak sembulan sederhana di mana pengunjung dapat mengirimkan pesan mereka.

Dengan hanya tiga bidang, CAMICB menjaga bentuknya tetap pendek dan to the point. Kemudian, pendekatan popup menciptakan antarmuka bebas gangguan yang bagus di mana fokus sepenuhnya pada formulir.

Ini membuat pengajuan pertanyaan sesederhana mungkin.

Dan untuk mempermudah , CAMICB juga menampilkan formulir kontak slide-up yang dapat diakses pengguna di footernya:

Tab hubungi kami yang dapat diperluas ditempatkan di bagian bawah halaman web

Cara membuat desain formulir kontak Anda sendiri yang dapat disesuaikan

Setelah menelusuri delapan contoh formulir kontak tersebut, Anda mungkin memiliki banyak ide tentang bagaimana Anda dapat menerapkan prinsip-prinsip ini ke desain formulir kontak Anda sendiri.

Jika Anda ingin memulai, [Getsitecontrol](/feedback-popup/ dapat membuat Anda siap dan berjalan dalam waktu singkat.

Tidak seperti kebanyakan solusi formulir kontak, Getsitecontrol memungkinkan Anda memilih dari empat posisi fleksibel dan lusinan Templat untuk formulir Anda. Anda dapat membuat popup tradisional seperti yang Anda lihat dengan CAMICB dan situs web Getsitecontrol. Atau, Anda dapat mengguncang segalanya dengan slide-in, bilah notifikasi, tombol, dan banyak lagi.

Anda akan dapat menambahkan sebanyak (atau sesedikit) bidang yang Anda perlukan untuk mendapatkan kiriman yang memenuhi syarat, dan Anda juga dapat menyisipkan mikrokopi untuk membantu pengunjung mengisi formulir Anda.

Daftar dengan Getsitecontrol hari ini dan Anda dapat memiliki formulir kontak yang berfungsi hanya dalam beberapa menit.

Colin Newcomer adalah penulis lepas dengan latar belakang SEO dan pemasaran afiliasi. Dia membantu klien mengembangkan visibilitas web mereka dengan menulis terutama tentang WordPress dan pemasaran digital.

Anda sedang membaca blog Getsitecontrol tempat para pakar pemasaran berbagi taktik yang telah terbukti untuk mengembangkan bisnis online Anda. Artikel ini adalah bagian dari bagian Keterlibatan pelanggan.

Berlangganan buletin kami → Ilustrasi utama oleh Icons8