Ingin mengumpulkan jawaban langsung melalui situs web Anda? Google Forms adalah alat yang sederhana dan mudah diakses yang memungkinkan Anda membuat survei dalam hitungan menit. Jika Anda bertanya-tanya bagaimana menambahkan Google Form ke situs HTML, panduan ini mencakup semua yang perlu Anda ketahui.
Menyematkan formulir bukan sekadar mengumpulkan data — ini tentang meningkatkan interaksi, mempermudah komunikasi, dan meningkatkan pengalaman pengguna. Formulir yang tepat ditempatkan membantu pengunjung Anda bertindak tepat di tempat mereka berada.
Sekarang setelah Anda memahami keuntungannya, mari kita jelajahi cara menampilkan Google Form di halaman web menggunakan metode semat HTML resmi dari Google.
Cara Menambahkan Google Form ke Website HTML: Solusi Bawaan
Cara paling mudah menambahkan Google Form ke situs HTML Anda adalah dengan menggunakan fitur sisip bawaan. Metode ini melibatkan menyalin potongan kode iframe dan memasukkannya ke dalam HTML Anda. Cepat, tidak memerlukan keterampilan coding, dan cocok untuk kasus penggunaan dasar.
Metode ini tepat jika Anda ingin menyisipkan formulir menggunakan iframe dan menerbitkan formulir di dalam templat HTML dengan usaha minimal. Ini menjaga proses tetap sederhana dan memungkinkan Anda mulai mengumpulkan respons segera.
Berikut panduan rinci langkah-demi-langkah untuk menyematkan Google Form ke situs HTML Anda:
- Buat atau buka Google Form Anda. Kunjungi forms.google.com dan mulai formulir baru atau buka yang sudah Anda buat sebelumnya.
- Klik tombol “Kirim”. Di kanan atas editor formulir, klik tombol berwarna ungu Kirim untuk membuka opsi berbagi.
- Pilih opsi sematan. Dalam jendela pop-up, klik ikon <> (opsi ketiga) untuk beralih ke tab kode sematan.
- Sesuaikan ukuran sisipan. Google akan menghasilkan potongan iframe. Anda dapat menyesuaikan lebar dan tinggi secara manual agar lebih pas dengan tata letak Anda. Untuk desain responsif, gunakan width=”100%” dan sesuaikan tinggi sesuai kebutuhan (biasanya antara 500–700 piksel).
- Salin kode iframe. Klik tombol Salin untuk menyalin potongan HTML iframe secara lengkap ke papan klip Anda.
- Copy the code ke HTML Anda. Buka file HTML situs Anda, temukan bagian tempat formulir akan muncul (biasanya di dalam tag <body>), dan tempel kode iframe. Berikut contoh pengaturan sematan. Ganti URL src dengan tautan sematan Google Form Anda yang sebenarnya. Sesuaikan height sesuai kebutuhan untuk muat konten formulir tanpa scrollbar:
<div style="max-width: 600px; margin: 0 auto;"> <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfD-example-url/viewform?embedded=true" width="100%" height="600" frameborder="0" marginheight="0" marginwidth="0"> Loading… </iframe> </div> - Simpan dan publikasikan situs Anda. Setelah menyisipkan kode, simpan berkas HTML-nya dan unggah ke platform hosting Anda. Begitu dipublikasikan, Formulir Google yang tersemat akan muncul di halaman dan langsung berfungsi.
Meskipun metode ini sederhana dan efektif, ia memiliki beberapa keterbatasan dalam tampilan, kustomisasi, dan branding. Pada bagian berikut, kita akan membahas kekurangan metode penyematan bawaan dan menjelaskan kapan waktunya mempertimbangkan alternatif yang lebih fleksibel.
Keterbatasan Metode Sematan Google
Walau menanamkan Google Form ke dalam halaman HTML cepat dan mudah diakses, ia datang dengan beberapa batasan yang dapat membatasi fleksibilitas Anda, opsi desain, dan kendali data. Kekurangan ini dapat memengaruhi pengalaman pengguna serta kemampuan Anda menyesuaikan formulir agar sesuai dengan branding situs Anda.
Tabel di bawah ini merangkum keterbatasan utama yang perlu Anda pertimbangkan sebelum sepenuhnya mengandalkan opsi sematan bawaan Google:
| Keterbatasan | Deskripsi |
|---|---|
| Opsi styling terbatas | Anda tidak bisa sepenuhnya menyesuaikan tampilan formulir melalui kode. Tata letak, jenis huruf, dan warna tetap ditentukan oleh gaya baku Google. |
| IFrame tidak responsif secara bawaan | Form yang disematkan tidak otomatis menyesuaikan dengan layar perangkat seluler. Anda memerlukan penyesuaian CSS tambahan agar responsif. |
| Branding Google wajib | Anda tidak bisa menghapus atau mengganti logo Google atau tautan atribusi pada formulir, yang membatasi fleksibilitas merek. |
| Tidak dapat menampung atau menyimpan data secara langsung | Semua respons disimpan ke akun Google Anda — tidak ada cara untuk mengumpulkan atau menyinkronkan data langsung di domain atau basis data Anda sendiri. |
| Pembatasan Penyematan Konten Dinamis | Jika Anda ingin menampilkan formulir survei pada halaman secara dinamis atau memuatnya secara kondisional, integrasi iframe bisa membatasi dan sulit dikendalikan. |
Jika Anda mencari kustomisasi lebih besar, desain responsif, dan kendali penuh atas bagaimana formulir Anda terlihat dan berfungsi, Anda mungkin ingin menjelajahi solusi yang lebih fleksibel. Pada bagian berikut, kita akan membahas panduan rinci tentang cara menyematkan formulir menggunakan pembuat formulir tanpa kode Elfsight.
Tambahkan Formulir ke Situs HTML: Pendekatan Tanpa Kode
Bagi Anda yang ingin kendali penuh atas desain, perilaku, dan branding — tanpa menyentuh satu baris kode pun — Form Builder dari Elfsight adalah solusi. Ini memungkinkan Anda membangun formulir secara visual dan menerbitkannya langsung di dalam templat situs HTML Anda. Berikut cara menambahkan Google Form di HTML menggunakan alternatif Elfsight, langkah demi langkah.
Ikuti instruksi di bawah ini untuk membuat dan memasang formulir kustom Anda:
- Sesuaikan pengaturan. Pergi ke tab “Pengaturan” untuk mengonfigurasi tindakan pengiriman, mengaktifkan perlindungan spam, dan menyesuaikan bahasa formulir menggunakan opsi bahasa. Anda juga bisa menggunakan parameter URL untuk mengisi bidang secara otomatis atau menyuntikkan JS kustom jika diperlukan.
Setelah formulir Anda live, saatnya mengeksplorasi semua fitur desain dan fungsionalitas yang membedakan Form Builder Elfsight dari penyematan dasar. Pada bagian berikut, kami akan membahas manfaat tersebut secara rinci.
Fitur-Fitur Pembuat Form Elfsight
Setelah formulir Anda terpasang, Anda akan langsung melihat bahwa Form Builder Elfsight menawarkan fleksibilitas jauh lebih besar dibandingkan penyematan Google bawaan. Bagian ini menjelaskan mengapa menyematkan formulir Anda dengan Form Builder Elfsight layak dipertimbangkan dan bagaimana integrasinya bisa mulus ke tata letak situs web Anda.
Berikut adalah rincian fitur utama dan manfaat yang membuat Form Builder Elfsight menjadi opsi yang lebih kuat dibandingkan penyematan dasar:
| Fitur | Manfaat |
|---|---|
| Pembuat seret-dan-lepas | Bangun formulir secara visual tanpa kode menggunakan editor intuitif yang ramah pemula. |
| Desain Responsif | Semua formulir secara otomatis menyesuaikan diri dengan layar ponsel, tablet, dan desktop. |
| Penempatan Fleksibel | Pilih antara tata letak inline atau melayang, dan tampilkan formulir di mana pun Anda inginkan di halaman. |
| Template Siap Pakai | Mulailah dengan tata letak yang sesuai dengan tujuan Anda — kontak, pendaftaran, umpan balik, dan lain-lain. |
| Logika Bersyarat | Tampilkan atau sembunyikan bidang secara dinamis berdasarkan respons pengguna untuk meningkatkan kemudahan penggunaan. |
| Notifikasi Email | Terima pemberitahuan untuk setiap pengiriman dan kirim email konfirmasi otomatis kepada pengguna. |
| Integrasi Aplikasi | Sinkronkan data dengan Google Sheets, Mailchimp, atau lebih dari 5.000 aplikasi melalui Zapier. |
| Pengaturan Tampilan Kustom | Sesuaikan formulir Anda dengan gaya situs web Anda dengan mengatur font, warna, garis tepi, dan tombol. |
| Perlindungan spam bawaan | Aktifkan CAPTCHA, gunakan kotak persetujuan, dan patuhi GDPR secara otomatis. |
Dengan alat-alat ini, Anda bisa menyematkan Formulir Google secara mirip HTML—tetapi dengan kendali yang jauh lebih besar dan integrasi yang lebih mulus ke tata letak situs Anda. Sekarang mari kita lihat tips praktis untuk membantu Anda mengoptimalkan proses penyematannya.
Tips untuk Mengoptimalkan Formulir Google Anda
Setelah Anda menyematkan formulir ke HTML situs Anda, ada beberapa langkah praktis untuk memastikan formulir berjalan baik dan selaras dengan tata letak situs Anda. Tips ini berlaku baik saat Anda menggunakan pembuat visual maupun menyisipkan formulir secara manual lewat iframe.
- Gunakan kontainer responsif. Selalu bungkus kode semat formulir Anda di dalam sebuah <div> yang fleksibel dengan lebar 100% dan batas lebar maksimum. Ini memastikan formulir menyesuaikan ukurannya dengan tepat di semua ukuran layar.
- Jangan menaruh formulir terlalu rendah. Untuk keterlibatan yang lebih tinggi, tempatkan formulir Anda di area yang terlihat, seperti di atas lipatan, di ujung blok konten relevan, atau di dalam elemen lengket jika memungkinkan.
- Sesuaikan gaya formulir dengan situs web Anda. Integrasikan tata letak formulir dengan menyelaraskan font, warna, dan padding dengan desain Anda secara keseluruhan. Hindari kontras visual yang tajam yang dapat membingungkan atau mengganggu pengguna.
- Jangan terlalu banyak kolom. Buat singkat dan tepat sasaran — hanya minta informasi yang benar-benar Anda butuhkan. Semakin sedikit kolom, semakin tinggi tingkat pengiriman.
- Uji formulir di beberapa perangkat. Setelah disematkan, uji formulir yang berjalan langsung di ponsel, tablet, dan desktop untuk menangkap masalah tata letak, waktu muat yang lambat, atau elemen yang terpotong sejak dini.
- Periksa pengaturan deliverabilitas email. Pastikan notifikasi tidak masuk spam dengan mengatur DKIM atau SMTP jika platform formulir Anda mendukungnya. Gunakan juga alamat pengirim yang valid untuk menghindari bounce.
- Periksa kinerja secara berkala. Bahkan setelah peluncuran yang sukses, pantau tingkat konversi dan titik drop-off menggunakan alat analitik untuk melakukan perbaikan kecil seiring waktu.
Dengan panduan ini, menyematkan dan mengoptimalkan formulir jadi lebih mulus. Di bagian berikutnya, kita akan membahas kasus penggunaan dunia nyata untuk membantu Anda memahami siapa yang paling diuntungkan dengan menambahkan formulir ke situs mereka.
Siapa yang Menggunakan Formulir Tersisip dan Mengapa: Kasus Aplikasi
Menambahkan formulir adalah solusi serbaguna yang digunakan di berbagai industri untuk mengumpulkan data, menangkap prospek, dan merampingkan komunikasi. Baik Anda perlu menampilkan formulir survei di halaman atau menghubungkan Google Form dengan elemen halaman kustom, kasus penggunaannya luas dan praktis. Berikut bagaimana berbagai sektor memanfaatkan integrasi formulir HTML.
Aplikasi di Bidang Pendidikan 🎓
Lembaga pendidikan menggunakan formulir terintegrasi untuk mempermudah pendaftaran, mengumpulkan masukan dari siswa, dan mengelola pendaftaran acara. Banyak platform kursus online juga menyertakan formulir inline agar pengguna dapat menunjukkan minat atau mengakses materi tanpa diarahkan.
Aplikasi di Bidang Kesehatan 💉
Klinik dan penyedia layanan kesehatan menggunakan formulir untuk permintaan janji temu, skrining pra-kunjungan, dan kuesioner tindak lanjut. Beberapa platform kesehatan digital juga menggunakannya untuk onboarding pasien baru langsung melalui portal yang aman.
Aplikasi di Bidang Properti 🏠
Para profesional properti menyematkan formulir kontak di halaman properti untuk menangkap prospek, menawarkan opsi penjadwalan, atau mengkualifikasi pembeli. Beberapa agen meningkatkan kualitas prospek dengan mengisi formulir secara otomatis menggunakan detail properti melalui parameter URL.
Dari pendidikan hingga layanan kesehatan, hingga properti, formulir tertanam menawarkan solusi nyata untuk meningkatkan alur kerja dan mengumpulkan informasi penting secara efisien. Selanjutnya, mari kita bahas masalah umum yang mungkin muncul saat menyematkan formulir dan bagaimana cara memperbaikinya dengan cepat.
Mengatasi Masalah Umum
Menyematkan Google Form ke HTML umumnya cukup sederhana, tetapi ada beberapa masalah dan keterbatasan yang sering dihadapi pengguna. Bagian ini membahas masalah umum, kendala teknis, dan perilaku formulir untuk membantu Anda memecahkan masalah dan meningkatkan kinerja.
Mengapa formulir tidak muncul setelah menyematkan kode?
Bagaimana cara membuat formulir yang disematkan responsif di ponsel?
Bisakah saya menghapus branding Google dari formulir?
Mengapa ada scrollbar di dalam iframe?
Bisakah kolom pada formulir yang disematkan diisi sebelumnya?
Bisakah saya menghubungkan beberapa formulir ke halaman yang sama?
Memahami batasan ini membantu mencegah kebingungan dan memastikan integrasi yang lebih mulus.
Kesimpulan
Menyematkan Google Form di situs HTML adalah cara cepat untuk mulai mengumpulkan respons, baik Anda menambahkan survei dasar, formulir kontak, maupun alat pendaftaran. Metode bawaan menggunakan iframe bekerja dengan baik untuk kasus penggunaan sederhana, terutama jika Anda ingin menerbitkan formulir dalam template HTML dengan upaya minimal. Namun, ada keterbatasan dalam kustomisasi, responsivitas, dan branding.
Jika Anda ingin menyertakan formulir online di konten situs dengan kendali penuh atas tampilan, perilaku, dan integrasi, Form Builder Elfsight menawarkan alternatif tanpa kode yang kuat. Dengan opsi tata letak canggih, alat styling, dan integrasi seperti email serta Google Sheets, ini adalah solusi ideal bagi bisnis yang ingin menciptakan pengalaman pengguna yang mulus tanpa beban pengembangan.
Butuh Panduan Lebih Lanjut?
Kami berharap panduan ini telah menjawab pertanyaan Anda. Jika Anda sedang menjajaki cara memasukkan atau menyesuaikan formulir di situs HTML Anda dan membutuhkan bantuan tambahan, hubungi kami — kami siap membantu. Di Elfsight, tujuan kami adalah membuat alat widget yang kuat tersedia untuk semua orang.
Bergabunglah dengan Komunitas kami yang mendukung untuk berbagi ide, bertanya, dan terhubung dengan pembuat lain. Punya saran untuk fitur baru atau perbaikan? Tambahkan ke Daftar Keinginan publik kami — kami selalu mendengar masukan dan terus berkembang.
