25 Template Formulir Kontak HTML & CSS Gratis

Diterbitkan: 2018-05-28

Halaman kontak adalah bagian penting dari hampir semua situs web. Hubungan dengan klien/pelanggan Anda, menerima umpan balik, dukungan pelanggan, dan bentuk komunikasi online lainnya dapat difasilitasi dengan formulir kontak yang dikodekan dengan baik.

Daftar Isi sembunyikan
Formulir Kontak 1
Formulir Kontak 2
Formulir Kontak 3
Formulir Kontak 4
Formulir Kontak Colorlib
Formulir Kontak 5
Formulir Kontak 6
Formulir Kontak 7
Formulir Kontak 8
Formulir Kontak 9
Formulir Kontak 10
Formulir Kontak 11
Formulir Kontak Responsif dengan Peta
Formulir Kontak Bootstrap 3
Formulir Kontak Responsif
Formulir Kontak CSS3
Formulir Kontak HTML5
Bentuk Minimalis
Formulir Kontak Pena Sehari
Formulir Kontak Janji Temu
Formulir Kontak Minimal Cepat
Formulir Kontak yang Menyenangkan
Formulir Kontak oleh Colorlib
Formulir Kontak yang Elegan
Bersihkan Formulir Kontak

Tentu saja, mungkin untuk hanya menyebutkan alamat email Anda di halaman kontak Anda, tetapi ini terkadang merepotkan, karena pencakar dapat dengan mudah mengumpulkan alamat email Anda dan Anda akan segera dibanjiri dengan email spam. Formulir kontak HTML & CSS melindungi Anda dari hal ini, sehingga mencegah sejumlah besar email spam masuk ke kotak masuk Anda.

Ada banyak alat yang dapat Anda gunakan untuk menambahkan formulir kustom yang ramping pada halaman kontak Anda. Untuk WordPress, ada plugin WordPress yang dapat Anda gunakan, dan sistem CMS lain mungkin menawarkan alat serupa, namun, jika Anda memiliki pengetahuan pengkodean, Anda dapat dengan mudah menggunakan salah satu templat formulir kontak HTML & CSS gratis ini.

Templat formulir kustom yang dirancang secara unik ini akan membuat halaman kontak Anda menonjol! Beberapa di antaranya bahkan memiliki fitur tambahan, seperti peta! Lihat templat formulir kontak HTML & CSS gratis di bawah ini dan pilih favorit Anda!

Formulir Kontak 1

Formulir Kontak 1 adalah templat formulir kontak modern dan interaktif dengan ikon surat yang bergerak bersama kursor Anda dan efek visual keren lainnya. Jenis formulir kontak ini sangat cocok untuk situs web interaktif. Ini juga memiliki validasi bidang dan sepenuhnya responsif.

1 Formulir Kontak 1 Pin

Formulir Kontak 2

Formulir Kontak 2 memiliki beberapa aksen warna-warni yang indah. Ini adalah templat formulir lebar penuh dengan efek animasi yang halus. Tombol dalam gradien warna-warni yang berubah setelah Anda mengarahkannya dan dapat dengan mudah dimodifikasi oleh Anda agar sesuai dengan palet warna situs web Anda.

2 Formulir Kontak 1 Pin

Formulir Kontak 3

Formulir Kontak 3 adalah templat formulir kontak keren lainnya yang sangat serbaguna. Ini memiliki fitur baru yang menarik ditambahkan, opsi ganda untuk pesan Anda, sehingga pengguna dapat menggunakannya sebagai formulir kontak atau sebagai formulir pertanyaan. Itu juga dilengkapi dengan latar belakang foto dan warna hijau cerah. Ini dapat dengan mudah disesuaikan.

3 Formulir Kontak 2 Pin

Formulir Kontak 4

Formulir kontak ini mirip dengan yang disajikan di atas, tetapi tidak seperti itu, ia memiliki gradien berwarna neon di latar belakang dan warna putih sederhana untuk elemen utama formulir. Formulir kontak yang dikodekan dengan baik ini mendukung validasi lapangan dan mudah diintegrasikan ke dalam platform apa pun yang Anda gunakan.

4 Formulir Kontak 4 Pin

Formulir Kontak Colorlib

Formulir Kontak Colorlib adalah templat formulir kontak yang sederhana namun efektif dengan indikator untuk label bidang, validasi bidang, dan desain minimalis.

5 Formulir Kontak Colorlib Pin

Formulir Kontak 5

Formulir kontak 5 memiliki struktur yang bagus untuk formulir kontak dan cocok untuk blog atau situs web majalah. Ini hitam dan putih, sederhana dan bersih. Font yang digunakan tebal dan desain keseluruhan responsif dan mudah digunakan bahkan di layar kecil.

6 Formulir Kontak 5 Pin

Formulir Kontak 6

Formulir Kontak 6 adalah desain formulir kontak yang unik dengan tata letak yang kreatif. Latar belakangnya tidak statis, melainkan peta interaktif yang didukung oleh Google Maps. Efek bayangannya juga menarik. Lihat aksinya!

7 Formulir Kontak 6 Pin

Formulir Kontak 7

Formulir kontak 7 memiliki gaya yang lebih korporat, dengan desain minimalis dan tata letak yang lurus ke depan. Ini menawarkan opsi untuk mengirim salinan pesan kepada pengguna, dengan mencentang kotak di bagian bawah formulir. Formulir ini bahkan dapat diintegrasikan dengan alat pemasaran email atau sistem CRM untuk tanggapan segera.

8 Formulir Kontak 7 Pin

Formulir Kontak 8

Formulir Kontak 8 mirip dengan formulir peta di atas, tetapi memiliki desain yang lebih bersih dan ringan. Peta di latar belakang juga interaktif dan didukung oleh Google Maps dan formulir tetap terbuka. Ada juga opsi untuk mengirim pesan sebagai salinan, seperti pada formulir di atas.

9 Formulir Kontak 8 Pin

Formulir Kontak 9

Formulir Kontak 9 bentuk lain yang berwarna-warni, kombinasi antara dua formulir kontak yang disebutkan di atas. Latar belakangnya adalah Google Map interaktif, tetapi ditutupi oleh gradien neon yang indah. Bentuk pesannya sederhana, hanya dengan tiga bidang, dan dengan efek bayangan yang halus.

10 Formulir Kontak 9 Pin

Formulir Kontak 10

Formulir Kontak 10 adalah templat formulir kontak sederhana dan modern yang dapat Anda instal di situs web Anda secara gratis. Formulir kontak HTML & CSS yang fleksibel ini mudah disesuaikan, sehingga Anda dapat menambahkan bidang baru jika perlu.11 Formulir Kontak 10 Pin

Formulir Kontak 11

Formulir Kontak 11 memiliki desain yang berani dengan warna-warna cerah dan ilustrasi vektor yang indah. Latar belakangnya berwarna ungu, tetapi warnanya dapat dengan mudah diubah dengan beberapa penyesuaian CSS. Teks dapat dilihat dengan jelas bahkan dari perangkat seluler.

12 Formulir Kontak 12 Pin

Formulir Kontak Responsif dengan Peta

Lentie Ward adalah desainer di balik Templat formulir kontak unik ini. Formulir ini dibuat dengan teknologi Haml dan SCSS dan juga beberapa JavaScript. Hasilnya adalah templat formulir canggih dengan peta keren di latar belakang. Jika Anda ingin menawarkan pengalaman spektakuler kepada pengunjung Anda di halaman kontak, pastikan Anda menggunakan formulir ini.

13 Formulir Kontak Responsif dengan Peta Pin

Formulir Kontak Bootstrap 3

Formulir kontak ini dibuat dengan bantuan Bootstrap oleh desainer Shuvo Habib. Ini bersih, sederhana, dan lebar penuh. Ini memiliki semua info dasar yang Anda perlukan dari pengguna.

14 Formulir Kontak Bootstrap 3 Pin

Formulir Kontak Responsif

Templat formulir kontak responsif ini dirancang oleh Lisa Wagner. Ini dioptimalkan untuk seluler, memiliki tata letak yang gelap dan sempurna untuk bagian dukungan di situs web Anda. Warna dapat dengan mudah dimodifikasi dengan beberapa tweak CSS.

15 Formulir Kontak Responsif Pin

Formulir Kontak CSS3

Formulir kontak CSS3 ini dibuat oleh Hong Liu dan sepenuhnya responsif. Ini juga memiliki batas warna-warni yang bagus, yang memberikan getaran retro. Ini sempurna untuk situs web apa pun dengan palet warna terang.

16 Formulir Kontak CSS3 Pin

Formulir Kontak HTML5

Berikut formulir kontak lebar penuh HTML5 lainnya . Desain memiliki pendekatan yang menarik untuk label masing-masing bidang. Warnanya mungkin terlalu cerah, tetapi ini dapat dengan mudah diubah dengan beberapa modifikasi CSS.

17 Formulir Kontak HTML5 Pin

Bentuk Minimalis

Seperti namanya, ini adalah bentuk minimalis, dengan desain yang bersih dan sangat sederhana. Desain formulir ini dibuat oleh Matheus Marsiglio dan hanya berisi tiga bidang dasar – untuk email, nama, dan pesan.

18 Templat Formulir Kontak MINIMALISTIK Pin

Formulir Kontak Pena Sehari

Formulir kontak Pen a Day adalah desain ringan yang sempurna untuk formulir umpan balik di situs web. Tata letaknya bersih dan mendasar dan memiliki setiap bidang yang diperlukan untuk kotak saran.

Templat Formulir Kontak 19 Pena Sehari Pin

Formulir Kontak Janji Temu

Apakah Anda memerlukan formulir kontak janji temu? Templat ini untuk Anda! Dibuat oleh Andrew Wright, formulir kontak CSS3 dan HTML5 modern ini memberi Anda kemungkinan untuk mengelola janji temu dan memesan klien untuk bisnis Anda dengan mudah! Bahkan ada fitur yang memungkinkan pengguna menentukan waktu terbaik untuk menjangkau.

20 Formulir Kontak Janji Temu Pin

Formulir Kontak Minimal Cepat

Formulir kontak minimal yang cepat dan mudah digunakan ini dibuat oleh Erin Masson. Ini memiliki desain interaktif untuk mengisi rincian kontak. Ini dapat dengan mudah disesuaikan dengan palet warna situs web mana pun.

21 Formulir Kontak Minimal Cepat Pin

Formulir Kontak yang Menyenangkan

Seperti namanya, Templat formulir kontak ini memiliki desain yang menyenangkan. Dikembangkan oleh Grandvincent Marion, formulir kontak yang dibuat dengan baik ini memungkinkan Anda mengumpulkan banyak info tentang calon pelanggan/klien Anda melalui bidang terperinci yang diatur dalam tata letak kotak.22 Formulir Kontak yang Menyenangkan Pin

Formulir Kontak oleh Colorlib

Templat formulir kontak yang cukup gratis ini dipasangkan dengan gambar besar di sisi kiri halaman. Ini memiliki bidang dasar untuk formulir kontak dan desain sederhana. Plus, di bagian bawah formulir ada beberapa ikon media sosial yang tertata rapi.

23 Formulir Kontak oleh Colorlib Pin

Formulir Kontak yang Elegan

Formulir kontak yang elegan ini dibuat oleh Mark Murray, menggunakan kerangka kerja Kompas. Desain modern ini dapat dengan mudah disesuaikan dengan CMS apa pun yang digunakan situs web Anda. Cobalah!

24 Formulir Kontak Elegan Pin

Bersihkan Formulir Kontak

Templat formulir kontak bersih ini dirancang oleh Nick Haskell dan juga menggunakan kerangka kerja Kompas. Tidak seperti formulir kontak gratis lainnya dari daftar ini, templat ini menggunakan gambar latar belakang di bagian atas formulir. Desainnya menarik secara visual dan profesional.

25 Formulir Kontak Bersih Pin