Halaman contact us kemarin dibuat dengan formulir kontak bawaan Blogger yang disesuaikan. Script tersebut berhasil diterapkan pada salah satu template blogger saya. Sebuah theme yang juga dibuat sendiri dari nol namun menggunakan bantuan framework Halfmoon.
Sedangkan template utama yang saat ini digunakan juga dibuat sendiri dari nol. Hanya saja ada perbedaan yang mendasar dengan theme blogger sebelumnya. Salah satu yang mencolok adalah penggunaan salah satu framework CSS yang dikenal dengan Bootstrap.
Makanya tidak mengherankan jika script yang sama menghasilkan sesuatu yang berbeda. Dengan kata lain, halaman contact us yang dibuat dengan formulir kontak yang disesuaikan. Ternyata tidak berfungsi jika diterapkan pada template bootstrap yang didukung blogger.
Mungkin ada kesalahan lain yang belum saya ketahui hingga sekarang. Setelah itu saya berfikir tentang bagaimana cara bootstrap membuat halaman contact us. Namun seperti biasa kita akan menggunakan cara bootstrap yang ditempatkan bersamaan dengan platform Blogger.
Halaman Contact Us dengan Bootstrap dan FormSubmit, Mengapa?
Merujuk dokumentasi penggunaan Bootstrap yang banyak tersebar di internet. Membuat halaman contact us banyak yang tersedia gratis untuk didownload. Namun masalahnya, Bootstrap yang saya gunakan menggunakan platform Blogger.
Hal ini menjadikan percobaan saya membuat halaman contact info setengah berhasil. Karena secara tampilan interface sudah sama persis tetapi tidak berfungsi ketika mengirim pesan. Mungkin penyebabnya karena Bootstrap memiliki library JavaScript tersendiri.
Sehingga jika tutorial bootstrap yang dilihat tidak dengan platform Blogger. Ini tentu saja butuh penyesuaian penempatan kode agar bisa digunakan. Apalagi jika koneksi formulir kontak agar terhubung ke email menggunakan kode script php.
Bisa dibayangkan kan kalau mau menyesuaikan ke lingkungan Blogger? Script PHP harus dikonversi dulu menjadi kode JavaScript. Setelah itu baru kemudian dimasukan ke dalam template Blogger. Dan itu juga belum tentu akan berhasil.
Nah, agar mudah penyelesaiannya dalam membuat halaman contact us dengan Bootstrap. Input dari pengguna ketika mengklik tombol "Send" atau "Submit". Kemudian data-data yang dimasukan oleh pengguna; berupa nama, email serta pesan akan terkirim otomatis melalui email.
Maka, tugas di atas kita serahkan saja dengan layanan pihak ketiga semisal FormSubmit.
Cara Membuat Halaman Contact Us dengan Bootstrap dan FormSubmit
Sebelumnya, template blogger ini menggunakan contact us page yang dibuat dengan powr.io. Layanan pihak ketiga untuk urusan ini dibuat dengan gratis. Kita tinggal mendaftar agar mendapatkan script yang bisa dipasang pada halaman contact us.
Dan cara pemasangannya juga cukup mudah apalagi cuma satu baris kode. Begitu juga tampilannya yang terlihat modern dan elegan. Kelebihan tersebut juga disertai fungsinya yang secara langsung bisa digunakan. Akan tetapi, proses loading tampilannya saja yang saya pikir terlihat agak lambat.
Oleh karena itu, saya punya inisiatif baru untuk membuat tampilan contact us pada halaman khusus. Caranya dengan menggunakan FormSubmit yang disertakan dalam kode Bootstrap sebagai berikut:
1. Login ke dashboard Blogger.
2. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML". Kemudian paste kode berikut sebelum </head>
3. Paste kode berikut sebelum </body>.
4. Klik "Save" untuk menyimpan perubahan tema.
5. Klik "Halaman" lalu klik "Halaman Baru" untuk membuat sebuah halaman baru.
6. Beri sebuah judul misalnya dengan judul "Hubungi Kami".
7. Pilih mode penulisan "Tampilan HTML".
8. Paste kode berikut:
<div class="container">
<form action="https://formsubmit.co/sebardiblog@gmail.com" id="contactForm" method="POST">
<!--Name input-->
<div class="mb-3">
<label class="form-label">Nama</label>
<input class="form-control" id="name" name="name" required="" type="text" />
</div>
<!--Email address input-->
<div class="mb-3">
<label class="form-label">Alamat Email</label>
<input class="form-control" id="emailAddress" name="email" required="" type="email" />
</div>
<!--Message input-->
<div class="mb-3">
<label class="form-label">Pesan</label>
<textarea class="form-control" id="message" name="message" style="height: 10rem;" type="text"></textarea>
</div>
<!--Form submit button-->
<div class="d-grid">
<button class="btn btn-primary btn-lg" type="submit">Submit</button>
</div>
</form>
</div>
9. Ganti tulisan "sebardiblog@gmail.com" pada baris kode di atas dengan alamat email Anda.
10. Klik "Publikasikan".
11. Cek hasilnya dengan mengunjungi halaman kontak info yang baru saja dipublikasikan.
12. Beri komentar dengan menyertakan nama serta alamat email kemudian klik "Send" atau "Submit".
13. Buka email Anda untuk memeriksa email masuk pertama kali dari FormSubmit.
14. Klik tautan aktivasi agar layanan FormSubmit untuk blog Anda berfungsi.
15. Tunggu komentar, saran atau kritik pengunjung yang menggunakan bantuan dari halaman contact us yang kita pasang.
16. Selesai, link demo bisa lihat dengan mengklik tombol di bawah ini:
Penutup
Dengan menggunakan Bootstrap untuk membuat halaman Contact Us, Anda dapat memastikan bahwa tampilan dan pengalaman pengguna akan optimal di berbagai perangkat dan ukuran layar.
Bootstrap juga menawarkan sistem grid yang fleksibel yang memudahkan penataan elemen dalam halaman Contact Us. Dengan demikian akan tercipta halaman Contact Us yang terlihat menarik dan mudah digunakan.
Sedangkan penggunaan FormSubmit memiliki keuntungan berupa kemudahan dalam pemasangan. Selain itu, Anda juga dapat menentukan kolom-kolom yang perlu diisi. Pada contoh di atas hanya menerapkan kolom nama, alamat email serta pesan.
Jika menginginkan masukan dari pengunjung lebih banyak lagi tinggal tambahkan saja elemen yang dibutuhkan. Sehingga Anda dapat menerima feedback dari pengunjung sesuai dengan kebutuhan.
Oleh karena itulah saya yakin kombinasi antara Bootstrap dan formulir pengiriman dari FormSubmit ini dapat meningkatkan pengalaman pengguna yang lebih baik lagi.
Selamat mencoba.
Tidak ada komentar:
Posting Komentar