Cara Menyematkan Google Form di Situs Web Anda

Diperbarui Juli 2026 · 9 menit membaca

Mengirim pengunjung keluar situs untuk mengisi formulir membuat sebagian dari mereka hilang di tengah jalan. Menyematkan Google Form langsung ke halaman Anda menjaga orang tetap dalam konteks — berguna untuk formulir kontak, pendaftaran acara, widget umpan balik, atau apa pun yang ingin Anda rasakan sebagai bagian dari situs Anda, bukan pengalihan. Google menyediakan kode sematan secara gratis; begini cara menggunakannya dengan baik.

Mendapatkan kode sematan bawaan

1. Buka formulir Anda dan klik Send di pojok kanan atas.
2. Di dialog, klik ikon < > (embed HTML).
3. Google membuat cuplikan iframe yang terlihat seperti ini:

<iframe src="https://docs.google.com/forms/d/e/FORM_ID/viewform?embedded=true" width="640" height="921" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

4. Klik Copy, lalu tempelkan cuplikan itu di mana pun situs Anda menerima HTML mentah.

Menyesuaikan lebar dan tinggi

Dimensi default yang dihasilkan Google adalah perkiraan yang masuk akal, tetapi jarang tepat. Edit kedua angka langsung dalam kode:

• Width — atur agar sesuai dengan kolom konten halaman Anda. Pilihan umum adalah width="100%" dikombinasikan dengan max-width pada kontainer pembungkus, sehingga formulir menyesuaikan skala halaman alih-alih tetap pada ukuran piksel tetap.
• Height — ini yang sering menyebabkan masalah. Google Forms tidak mengubah ukuran iframe secara otomatis saat Anda menambah atau menghapus pertanyaan, jadi jika formulir Anda lebih panjang dari nilai height, bagian bawah terpotong dan pengunjung harus menggulir di dalam kotak kecil untuk menemukan tombol kirim. Jika ragu, atur height jauh lebih tinggi dari yang Anda kira perlu — ruang kosong ekstra 200–300 piksel di bawah formulir pendek adalah masalah yang jauh lebih kecil dibanding tombol kirim yang terpotong pada formulir panjang.

Menyematkan di WordPress

Tambahkan blok Custom HTML (di editor blok) atau widget Text dalam mode HTML (editor klasik), dan tempelkan kode iframe langsung ke dalamnya. WordPress merendernya apa adanya — tidak perlu plugin, meskipun plugin formulir yang "mengimpor" Google Forms tidak diperlukan untuk sematan sederhana seperti ini.

Menyematkan di Squarespace

Tambahkan Code Block ke halaman (dari menu blok saat mengedit halaman), tempelkan HTML iframe, dan simpan. Blok kode Squarespace menerima sematan mentah seperti ini tanpa pembatasan, tetapi periksa pengaturan lebar blok terhadap grid halaman Anda agar formulir tidak melebihi kolomnya.

Menyematkan di Wix

Wix mengharuskan Anda menggunakan elemen Embed > Embed a Widget (atau "HTML iframe") dari panel Add, lalu menempelkan kode ke panel pengaturan yang terbuka. Berbeda dengan WordPress dan Squarespace, Wix merender HTML sematan di dalam pembungkus iframe-nya sendiri, jadi Anda mungkin perlu menyesuaikan ukuran elemen di kanvas selain mengedit nilai height dalam kode.

Menyematkan di halaman HTML biasa

Jika Anda menulis kode halaman secara manual, tempelkan cuplikan iframe langsung ke body di mana pun Anda ingin formulir muncul — tidak perlu penanganan khusus. Sebaiknya bungkus dalam div kontainer dengan max-width agar formulir tidak melebar dari tepi ke tepi pada layar lebar.

Masalah umum

1. Formulir terpotong di bagian bawah. Ini hampir selalu masalah height — lihat catatan penyesuaian di atas. Tingkatkan nilai height sampai seluruh formulir, termasuk tombol kirim dan pesan error "required" yang mungkin muncul, muat tanpa scrollbar internal.
2. Formulir sematan tidak terlihat responsif di ponsel. Lebar piksel tetap tidak mengecil untuk layar kecil. Atur width="100%" pada iframe dan biarkan max-width CSS pada elemen induk mengontrol batas atasnya, sehingga menyesuaikan skala secara alami di ponsel.
3. Formulir dimuat kosong atau menampilkan error "refused to connect." Ini biasanya berarti halaman tempat formulir disematkan disajikan melalui jaringan atau proxy CMS yang memblokir iframe pihak ketiga. Periksa pengaturan Content-Security-Policy situs Anda jika Anda mengelolanya secara langsung, karena aturan frame-src yang ketat dapat diam-diam memblokir domain Google.
4. Formulir berkedip "Loading…" dan tidak pernah selesai. Pastikan pengaturan berbagi formulir memungkinkan siapa pun dengan tautan untuk melihatnya — jika dibatasi untuk orang tertentu atau hanya organisasi Anda, iframe sematan di halaman publik akan gagal dimuat bagi pengunjung luar sama seperti tautan langsung.
5. Gaya terlihat tidak konsisten dengan bagian lain halaman. Google Forms merender font dan warnanya sendiri di dalam iframe dan tidak mewarisi CSS situs Anda — tidak ada cara resmi untuk mengubah gaya tampilan internal formulir dari luar iframe, hanya kontainer di sekitarnya.

Penyematan dan performa pemuatan halaman

Google Form yang disematkan memuat konten iframe-nya sendiri secara terpisah dari sisa halaman Anda, yang menambah satu permintaan jaringan ekstra dan sedikit jeda sebelum formulir itu sendiri muncul — biasanya tidak cukup terasa, tetapi baik untuk diketahui jika Anda sedang mengaudit kecepatan halaman. Jika formulir berada di bawah lipatan layar, pertimbangkan untuk lazy-load iframe (menambahkan loading="lazy" ke tag iframe) agar tidak bersaing bandwidth dengan konten yang langsung dilihat pengunjung. Ini adalah atribut HTML native yang didukung semua peramban modern dan tidak memerlukan skrip tambahan.

Pertimbangan aksesibilitas

Karena konten formulir berada di dalam iframe milik Google sendiri, aksesibilitasnya — label pembaca layar, navigasi keyboard, urutan fokus — ditentukan oleh Google Forms itu sendiri, bukan oleh apa pun yang Anda kontrol di halaman Anda. Satu hal yang bisa Anda tingkatkan dari sisi Anda adalah menambahkan atribut title deskriptif ke tag iframe (misalnya, title="Formulir pendaftaran acara"), yang diumumkan pembaca layar sebelum memasuki konten sematan. Untuk pembahasan lebih luas tentang seberapa mudah diakses Google Forms secara bawaan, lihat panduan kami tentang aksesibilitas Google Forms.

Menyematkan vs. sekadar memberi tautan

Menyematkan membuat pengunjung tetap di halaman Anda, cocok dengan desain di sekitar situs Anda, dan dapat mengurangi kehilangan pengunjung yang terjadi ketika seseorang dialihkan ke domain yang asing. Ini pilihan yang lebih baik untuk formulir pendek yang ditempatkan di halaman khusus — seperti formulir kontak atau widget umpan balik cepat.

Memberikan tautan lebih sederhana untuk disiapkan (tidak perlu menyesuaikan tinggi), memberi formulir tata letak penuh tanpa batasan, dan menghindari perasaan menggulir di dalam kotak yang bisa ditimbulkan formulir panjang atau multi-bagian di dalam iframe yang sempit. Jika formulir Anda panjang, memiliki unggahan file, atau menggunakan pertanyaan grid, memberikan tautan langsung — lihat panduan kami tentang membagikan Google Form — biasanya pengalaman yang lebih nyaman bagi responden.

Menyematkan untuk formulir kontak

Menyematkan sangat populer untuk mengubah Google Form menjadi formulir kontak gratis di situs bisnis atau portofolio — tanpa backend, tanpa penyiapan server email, dan jawaban langsung masuk ke Google Sheet yang bisa Anda periksa kapan saja. Jika itu tujuan spesifik Anda, panduan khusus kami tentang menggunakan Google Forms sebagai formulir kontak untuk situs web Anda membahas pilihan kolom dan pengaturan pengurangan spam yang layak ditambahkan di atas sematan dasar.

Pertanyaan yang Sering Diajukan

Panduan terkait

• Cara membagikan Google Form
• Menggunakan Google Forms sebagai formulir kontak
• Cara membuat Google Form
• Menyematkan Google Form di WordPress, secara mendalam
• Panduan aksesibilitas Google Forms