Blog

Kirim Form Kontak Lebih Mudah Dengan Web3forms

😎 Muhammad Surya J
📅 Feb 12, 2024

Overview

Web3forms merupakan sebuah solusi untuk Anda yang ingin membuat sebuah form kontak berfungsi tanpa harus menggunakan backend. Pada artikel ini, kita akan belajar bagaimana cara menggunakan Web3forms tersebut.

Getting Started

Sebelum memulai, Anda di haruskan untuk membuat sebuah Access Key yang akan di gunakan di dalam form nanti. Untuk membuat Access Key tersebut, Anda bisa mengunjungi situs Web3forms untuk membuat Access Key tersebut dan Access Key tersebut akan dikirimkan ke email Anda.

Creating The Template

Untuk membantu mempercantik tampilan form, saya menggunakan Bootstrap untuk style dari form tersebut. Untuk kode template awalnya seperti ini.

html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Form Kontak</title>

		<!-- CSS -->
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
			rel="stylesheet"
			integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
			crossorigin="anonymous"
		/>
	</head>
	<body>
		<!-- Isi Form Nanti -->
	</body>
</html>

Seperti yang Anda lihat, disini saya menggunakan Bootstrap secara online. Maka dari itu, pastikan Anda terhubung kedalam koneksi agar mendapatkan style yang sesuai dengan yang saya buat di artikel ini. Namun jika Anda sudah mempunyai form sebelumnya, Anda bisa lanjut ke tahap berikutnya.

Creating The Form

Saya ingatkan lagi, jika Anda sudah memiliki form Anda bisa langsung ke tahap berikutnya. Dalam tahap ini saya membuat form dengan isi :

Email
Nama
Pesan

Jika Anda mempunyai isi form Anda sendiri, Anda bisa menyesuaikan dengan form yang Anda miliki. Untuk code dari form nya akan seperti ini.

html

<div style="height: 100vh; display: flex; align-items: center; justify-content: center">
	<div class="container">
		<div class="row justify-content-center align-items-center">
			<div class="col-lg-5 col-md-12 col-12">
				<div class="card">
					<div class="card-body">
						<form action="https://api.web3forms.com/submit" method="POST">
							<div class="mb-3">
								<label for="email" class="form-label">Email</label>
								<input type="email" class="form-control" id="email" name="email" />
								<input
									type="hidden"
									name="access_key"
									value="4cfc024a-4537-461f-ab8e-c10bb894b299"
								/>
							</div>
							<div class="mb-3">
								<label for="nama" class="form-label">Nama</label>
								<input type="text" class="form-control" id="nama" name="nama" />
							</div>
							<div class="mb-3">
								<label for="pesan" class="form-label">Pesan</label>
								<textarea class="form-control" id="pesan" rows="3" name="pesan"></textarea>
							</div>
							<button type="submit" class="btn-primary btn">Submit</button>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Berikut penjelasan dari kode form diatas.

atribut	penjelasan
value="YOUR_ACCESS_KEY_HERE"	ganti YOUR_ACCESS_KEY_HERE menjadi ACCESS_KEY yang Anda punya.
name	Untuk mendapatkan data dari form. Jadi pastikan form Anda mempunyai atribut name di setiap inputnya.

dan jangan lupa untuk menambahkan kode ini tepat di sebelum tag penutup body.

html

<!-- Tambahan -->

    <script src="https://web3forms.com/client/script.js" async defer />

    <!-- Penutup body -->
    </body>

Submit The Form

Setelah selesai membuat form, saatnya mencoba untuk mengisi form. Seharusnya ketika Anda berhasil mengirimkan data form tersebut Anda akan diarahkan ke halaman berhasil dari Web3forms. Setelah anda cek email Anda, seharusnya Anda juga mendapatkan email yang berisikan data dari form yang telah dikirimkan.

Conclusion

Web3forms sendiri sangat membantu Anda ketika Anda tidak bisa membuat kode untuk backend karena Anda bisa tinggal pakai saja. Artikel ini merupakan basic penggunaan dari Web3forms, yang dimana Anda bisa membuat form Anda lebih baik lagi dengan fitur-fitur yang di miliki oleh Web3forms. Contohnya Anda bisa mengganti subject untuk email yang dikirim, mengganti halaman berhasil menggunakan halaman Anda sendiri, menambahkan Google reCaptcha dan bahkan Anda juga mengirimkan file.