Akhirnya aku punya waktu luang juga...
Di panduan kali ini, aku akan menjelaskan bagaimana cara memasang Formspree sebagai form kontak di blog/website kamu.
Btw, aku sendiri juga pakai Formspree sejak 3 atau 4 tahun yang lalu sebagai form kontak di sebagian besar blog ku.
Aku engga pakai form kontak bawaan Blogger karena aku merasa fitur-fitur nya masih kurang jika dibandingkan dengan Formspree.
Salah satu fitur yang aku suka adalah, fitur anti-spam dengan ReCaptcha yang tidak dimiliki oleh Form bawaan blogger.
Fitur yang lainnya adalah, Formspree sangat mudah dikostumisasi tampilannya.
Oke, sekarang kita masuk ke bagian panduan
0. Persiapan
Sebelum mulai, pastikan kalian sudah login di website Blogger.
Setelah login, pilih blog yang ingin anda pasang.
1. Pemasangan
Sekarang buat sebuah halaman statis dengan judul 'Contact Form', 'Halaman Kontak', 'Hubungi Kami', atau yang lainnya.
Sesuai keinginan kalian aja.
Terus, Save & Publish halaman statis-nya.
Sampai sini, halaman kontak sudah jadi, tapi masih kosong tanpa isi.
Lanjut ke bagian script kode.
2. Script Kode
Ini script kode dasar yang aku gunakan sebagai awalan :
<form action="https://formspree.io/aqshaltata.matt@gmail.com" method="POST">
<div class="form-group">
<label for="exampleInputNama">Nama</label>
<input type="text" name="nama" class="form-control w-50" id="exampleInputNama" placeholder="Masukkan Nama" required="required">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Alamat Email</label>
<input type="email" name="email" class="form-control w-50" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Masukkan email" required="required">
<small id="emailHelp" class="form-text text-muted">Kami tidak akan pernah memberi emailmu kepada siapapun.</small>
</div>
<div class="form-group">
<label for="exampleInputPesan">Pesan</label>
<textarea type="text" name="pesan" class="form-control" id="exampleInputPesan" placeholder="Ada masalah apa?" cols="30" rows="7" required="required"></textarea>
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" required="required">
<label class="form-check-label" for="exampleCheck1">Aku bukan Robot</label>
</div>
<button type="submit" class="btn btn-primary">Kirim <i class="fa fa-paper-plane fa-fw"></i></button>
</form>Kode HTML diatas masih kosongan tanpa desain dengan CSS. Kamu bisa membuat desain form kontak-mu sendiri, atau kamu bisa juga menggunakan desain yang sudah aku siapkan :
*{margin:0;padding:0;box-sizing:border-box;} /* Kalau sudah ada kode yg mirip seperti ini, silahkan dihapus saja */
.w-50{width:50%!important;}
textarea{font-family:Roboto, sans-serif;} /* Atur sendiri font sesuai font yg digunakan di blog/website kamu */
.form-group{margin-bottom:1rem;}
.form-group label{font-size:90%;}
.form-control{display:block;width:100%;height:calc(1.5em + .75rem + 2px);padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}
textarea{overflow:auto;resize:vertical;margin:0;vertical-align:baseline;}
textarea.form-control{height:auto;}
.form-control{display:block;width:100%;height:calc(1.5em + .75rem + 2px);padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}
.form-check{position:relative;display:block;padding-left:1.25rem;font-size:90%;}
.form-check-input{position:absolute;margin-top:.3rem;margin-left:-1.25rem}
.form-check-label{margin-bottom:0;}
.btn{display:inline-block;font-weight:400;color:#212529;text-align:center;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}
.btn-primary{color:#fff;background-color:#007bff;border-color:#007bff}
.btn-primary:hover{color:#fff;background-color:#0069d9;border-color:#0062cc}
.btn-primary.focus,.btn-primary:focus{box-shadow:0 0 0 .2rem rgba(38,143,255,.5)}
.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#007bff;border-color:#007bff}
.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#0062cc;border-color:#005cbf}
.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(38,143,255,.5)}
Bagian yang perlu diubah secara manual :
1. action="https://formspree.io/aqshaltata.matt@gmail.com" adalah code untuk mengirim email dari si pengirim ke email pemilik website. Silahkan ganti 'aqshaltata.matt@gmail.com' dengan email kamu.
2. name="nama" bagian header pesan yang bisa kamu ubah-ubah sesuai kebutuhan.
3. name="email" bagian header pesan yang bisa kamu ubah-ubah sesuai kebutuhan.
4. name="pesan" bagian header pesan yang bisa kamu ubah-ubah sesuai kebutuhan.
Contoh email yang masuk lewat Formspree :
Setelah selesai memasang semua kode diatas, silahkan save halaman statis kamu.
3. Pengaturan
Selamat! kamu sudah berhasil memasang Formspree di halaman kontak blog/website kamu.
Tapi, form kontak tersebut masih belum berfungsi sebagaimana mestinya.
Silahkan ikuti panduan dibawah ini agar form kontak dapat berfungsi :
- Pastikan kamu sudah mengganti email di koding 'form' HTML tadi dengan email kamu.
- Buka website Formspree, lalu daftar akun disana.
- Jika sudah, silahkan login di web Formspree.
- Selanjutnya, buka halaman contact website/blog kamu yang tadi kamu buat.
- Silahkan coba kirim 1 pesan percobaan agar email aktivasi bisa masuk ke email kamu.
- Contoh pesan aktivasi seperti ini :
- Sekarang, silahkan cek email kamu. Kamu bakal dapet email dari Formspree, emailnya seperti ini :
- Tekan tombol ACTIVATE FORM.
- Selesai. Form kontak sudah bisa digunakan oleh publik / pengunjung blog/website kamu.
