Cara membuat contact us html css

Indonesian [Bahasa Indonesia] translation by Dwi Bagus Nurrohman [you can also view the original English article]

Halaman kontak yang baik begitu penting untuk menjaga hubungan dengan pengunjung Dimanappun kita berkomunikasi melalui eCommerse, majalah, website pribadi, servis online, pengguna biasanya akan mencari halaman kontak sebagai alat untuk berkomunikasi denganmu Anehnya, banyak perancang web menghiraukan halaman kontak yang sederhana, bahkan tidak menganggap penting sama sekali. yuk kita benarkan.

Pentingnya Halaman Kontak Yang Bagus

Halaman kontak seringkali diabaikan. Seberapa sering kamu mengunjungi sebuah website, ingin untuk segera menyampaikan keluhanmu akan produk atau jasa, atau bahkan bertanya? dan seberapa sering kamu berjuang dengan bentuk kontak?

Sebuah halaman kontak yang bagus dapat menjadi keuntungan untuk berbagai macam bisnis. hal tersebut dapat menaikkan kepuasan pelanggan dengan cara menolong masalah pengguna. itu juga dapat membantu bisnis dalam meningkatkan kualitas produk dan servis dengan menyediakan feedback atau respon yang berguna

Media lain dapat terbentur masalah feedback pengguna. televisi, radio, majalah, dan koran... bahkan semua bentuk media dengan jalur komunikasi satu arah Komunikasi online seharusnya menjadi 2 arah, sebuah dialog antara pebisnis dan pengunjung. Kedua belah pihak dapat diuntungkan oleh itu, maka dari itulah kenapa sebuah halaman kontak yang baik adalah penting

Penempatan

Langkah pertama : Lokasi kontak informasimu. Mempunyai halaman kontak terbaik didunia adalah percuma apabila pengunjung tidak dapat menemukannya. Menjaga beberapa desain umum dalam pikiran dapat membantu pengunjung.

Secara umum berbicara, kontak informasi dapat ditemukan pada 2 tempat :

Navigasi Utama adalah lokasi ideal untuk tautan halaman kontak. Pengunjung biasanya mencari kontak informasi pada sebelah pojok kanan karena itu terlihat sebagai dari hal yang penting kedua. Untuk alasan ini kamu akan terbiasa melihat tautan halaman kontak sebagai elemen-elemen terakhir didalam navigasi situs.

Kamu juga akan melihat sub navigasi yang lebih kecil pada pojok atas layar. Tempat ini juga bisa dijadikan tempat untuk halaman kontak Oleh sebab itu, menempatkan tautan halaman kontak pada bagian bawah  sebaiknya dihindari karena akan mudah terabaikan

Footer juga merupakan tempat yang populer untuk kontk informasi. Footer juga bisa digunakan untuk menaruh tautan halaman kontak.

Terimakasih untuk search engine markup ini mengetahui bahwa ini adalah alamat, nomor telepon dan alamat email perusahaan 'Fine Design'. Ini informasi implisit, artinya pengunjung tidak bisa melihatnya, tapi  search engine yang sangat berguna.

Kamu mungkin juga mempertimbangkan untuk menggunakan microformat hCard yang mudah digunakan untuk menyimpan data kontak di berbagai platform. Baca lebih lanjut tentang microformats di html5doctor.com.

Formulir Kontak

Sebagian besar situs web menggunakan formulir kontak di halaman kontak mereka. Namun, beberapa formulir kontak tidak perlu rumit dan pengguna tidak ramah.

Sesederhana bentuk kontak mungkin terlihat, sebenarnya kombinasi beberapa komponen penting. Masing-masing komponen ini harus bekerja sama untuk memberikan pengalaman pengguna terbaik.

Kolom Masukan [Input]

kolom masukan, seperti kolom teks, tombol radio, kotak centang, dll, memungkinkan pengguna untuk mengisi informasi yang diperlukan.

Pengunjung situs lebih cenderung mengisi formulir yang lebih pendek karena mereka membutuhkan lebih sedikit usaha. Jumlah kolom masukan adalah harus sesuai antara pengalaman pengguna dan kebutuhan bisnis. Hubspot menganalisis lebih dari 40.000 formulir dan melihat efek peningkatan jumlah kolom masukan. Penelitian mereka adalah bahwa kamu harus menggunakan sesedikit mungkin bentuk dan sangat berhati-hati dengan area teks yang lebih canggih dan kotak pilih.

Bantu pengunjung kamu mengisi kolom ini dengan menunjukkan format yang benar. Nomor dan tanggal telepon bisa jadi rumit, terutama bagi pengunjung internasional. Atribut placeholder HTML5 akan membantu kamu di sini.


Selanjutnya, pastikan Anda menyoroti bidang yang dipersyaratkan [konvensi umum adalah menggunakan tanda bintang *]. Secara eksplisit menyatakan bahwa bidang masukan diperlukan atau bidang itu opsional adalah cara yang aman untuk ditempuh.

Akhirnya, bisa berguna untuk menyorot bidang aktif. Hal ini dapat menjadi halus atau mudah terlihat seperti yang kamu inginkan

Berikut adalah contoh formulir kontak dari tutorial oleh Jim Nielsen. Dia menggunakan tanda bintang merah untuk kolom yang diminta, memberikan beberapa saran pemformatan dan menyoroti bidang yang aktif.


Lembar Pengesahan

nline form validation juga bisa mencegah beberapa sakit kepala bentuk kontak. Ini sangat menyebalkan karena harus mengirim ulang formulir berulang-ulang karena Kamu memasukkan data atau data salah dalam format yang salah. Seperti yang telah kami sebutkan sebelumnya, sebaiknya bantu pengunjung dengan menampilkan format yang diperlukan [misalnya tanggal, nomor telepon ..].


Tombol

Kamu tidak dapat memiliki formulir kontak tanpa tombol kirim. Tombol ini harus berada di bagian bawah formulir. Gunakan 'kirim pesan' sebagai teks tombol alih-alih 'kirim' untuk mengingatkan pelanggan tentang apa yang mereka lakukan.

Standar umum dari masa lampau adalah memasukkan tombol 'reset' atau 'clear form'. Jangan Orang akan mengkliknya secara tidak sengaja. Tidak ada yang lebih buruk daripada mengetikkan pesan yang rumit dan kehilangannya karena tombol 'reset'.

Umpan Balik

Pengunjung telah mengisi informasi kontaknya, mengetik pesan dan menekan tombol 'kirim'. Sekarang apa? Apakah pesan sudah terkirim atau tidak?

Yakinkan pengunjung Anda bahwa pesan telah berhasil dikirim dengan menampilkan pesan konfirmasi. Email konfirmasi juga merupakan pilihan.

Saran yang sama berlaku untuk kesalahan. Menampilkan kesalahan saat pesan gagal dikirim adalah suatu keharusan - ini dapat mencegah banyak diskusi di masa depan. Pesan kesalahan harus bersahabat, jadi hindari menampilkan kode kesalahan yang mengejutkan.

Desain Halaman Kontak

Ada banyak persyaratan teknis untuk merancang halaman kontak yang lebih baik, tapi jangan lupakan salah satu aspek terpenting: suatu yang nampak

Jika kamu menggunakan formulir kontak, buat bidang Anda besar, ramah, dan menarik untuk diisi. Ruang putih dan lapisan yang dapat digunakan lama.

Pengunjung situs sering mengikuti pola berbentuk F saat mereka menjelajah halaman web sehingga mengingat hal ini saat kamu merancang tata letak. Untuk formulir kontak, sebaiknya susun semua bidang secara vertikal alih-alih menempatkannya berdampingan. Hal ini mengurangi jumlah pergerakan mata yang harus dilakukan pengunjung agar bisa mengisi formulir.

Halaman kontak harus sesuai dengan identitas visual dari keseluruhan situs. Tampilan yang konsisten adalah kunci. Lihatlah halaman kontak 'Let's Travel Somewhere' ini misalnya, dirancang dalam bentuk kartu pos.

Dan seperti kebanyakan tugas terkait desain web; kreativitas terbayar. Neil Patel merancang halaman kontaknya dalam bentuk infografik, tiga kali lipat dari permintaan kontaknya.

Contoh halaman kontak

Berbicara tentang bentuk kontak yang baik, mari kita lihat beberapa contoh untuk mendapatkan inspirasi [klik pada setiap gambar untuk mengunjungi situs web masing-masing]: 






Kesimpulan

Sebelum merancang halaman kontakmu, pastikan pengunjungmu dapat menemukannya. Tautkan dari navigasi utama atau footer kamu. Ingatlah bahwa kebanyakan orang mencari informasi kontak di sisi kanan layar.

Pikirkan informasi yang perlu disertakan. Kemampuan untuk mengirim pesan, baik melalui alamat email atau formulir kontak, sangat penting. Alamat dan nomor telepon juga bisa berguna. Informasi tambahan seperti tautan ke profil media sosial dan jam buka mungkin berguna untuk bisnis tertentu.

Interaktivitas juga penting. Gunakan atribut mailto untuk alamat email [dengan cara yang tidak jelas] dan atribut tel: untuk nomor telepon [sangat berguna bagi pengunjung ponsel]. Peta interaktif seperti Google Maps juga bisa disematkan, namun pertimbangkan konsekuensi kinerjanya. 

Kegunaan formulir kontak dapat membuat atau menghancurkan halaman kontak. Mulailah dengan hanya meminta informasi yang paling penting.  Menampilkan format yang tepat untuk field input dan menggunakan inline validation dapat mencegah kebingungan. Jangan lupa untuk menampilkan pesan sukses saat formulir dikirim.

Bacaan lebih lanjut

  • Bentuk Desain dari Goresan
  • Formulir Pengesahan CSS3 & HTML5
  • Panduan untuk Menghubungi Formulir 7 untuk Wordpress
  • Responsif, Tersaring Google Map Images

Bài mới nhất

Chủ Đề