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.

Cara membuat contact us html css
Cara membuat contact us html css
Cara membuat contact us html css

Apple menempatkan tautan halaman kontak mereka pada bagian footer

atau kontak informasi terpentingnya

Cara membuat contact us html css
Cara membuat contact us html css
Cara membuat contact us html css

Hubspot menunjukkan alamat dan nomer teleponnya pada bagian footer

Mengantisipasi pengunjung ke halaman kontak cukup gampang gampang susah, jadi penempatan sebuah tautan setidaknya pada 2 lokasi yang telah disebutkan dapat cukup membantumu.


Pentingnya Halaman Kontak

Setelah kita yakin bahwa pengunjung dapat menemukan halaman kontak, saatnya berpikir seharusnya apa saja isinya. Ayo kita mulai dari dasar dan lihat informasi apa saja yang seharusnya ditampilkan.

Alamat email / Formulir Kontak

Sebuah alamat email adalah cara termudah untuk menghubungi sebuah bisnis online. Alternatif lain kamu bisa menggunakan formulir kontak yang dapat mengirimkan email Melalui sebuah formulir kontak kamu akan mempunyai lebih banyak kuasa terhadap isinya (required fields) dan dapat mencegah spam. Untuk lebih tau mengenai formulir kontak ada pada artikel ini

Cara membuat contact us html css
Cara membuat contact us html css
Cara membuat contact us html css
Lea Verou menunjukkan alamat emailnya pada text polos, namun menggunakan cara cerdik untuk menghindari spam dari bot.

Alamat

Bisnis toko bangunan jangan lupa menyebutkan alamat mereka. Jika Anda memiliki beberapa toko, sebaiknya buat halaman terpisah untuk setiap lokasi. Isi halaman ini dengan informasi yang lebih spesifik, seperti jam buka, arah, dll. Ini tidak terlalu berguna bagi pengunjung, tapi dapat membantumu dalam situs pencarian lokal.

Telepon

Menunjukkan sebuah nomor telepon meningkatkan kepercayaan. dan seringkali dilihat sebagai bentuk bukti perusahaan itu nyata, yang mana dapat membantu bisnis online shop

Media Sosial

Banyak dari website menambahkan tombol sosial media pada halaman kontak mereka. Meskipun ini mungkin saja tidak mempunyai keuntungan pada setiap situs, namun bagi beberapa pengunjung itu dapat menjadi nilai tambah yang nyata. Khususnya sejak banyak dan lebih perusahaan menawarkan Customer Support melalui Twitter (bahkan direspon 24/7)

Cara membuat contact us html css
Cara membuat contact us html css
Cara membuat contact us html css
Envato mempunyai akun Twitter pendudukung yang aktif @envato_support

Lain-lain

Tidak ada istilah solusi satu ukuran untuk semua pada halaman kontak yang bagus. Setiap website atau bisnis membutuhkan elemen tertentu yang mungkin percuma pada situs lain.

Ada banyak informasi tambahan atau fitur yang dapat berguna pada halaman kontak. untuk toko bangunan sebagai contohnya menampilkan jam buka adalah hal yang bagus Perusahaan besar mungkin menghubungkan ke fitur Live Chat dan situs eCommerce yang dapat menguatkan kepercayaan pengguna dengan menunjukkan nomer VAT mereka


Informasi yang Berguna

Membuat informasi pada halaman kontak dengan mudah digunakan mencegah pengunjung mengalami masalah

Termasuk kontak informasi seperti HTML text daripada gambar. Ini mungkin terdengar bodoh, namun ada banyak website yang menggunakan teknik lain. Teks HTML dapat disalin dan disisipkan, sehingga mempermudah pengunjung untuk menyimpan data kontak Anda. 

Alamat email harus menggunakan link mailto. Hal ini memungkinkan pengunjung yang mengkliknya untuk mengirim email tanpa terlebih dahulu harus menyalin alamat email tujuan dan membuka email client. Satu masalah bisa muncul dengan teknik ini, namun, dalam bentuk robot spam yang mengambil alamat email yang terkait dengan mailto: link. Oleh karena itu, Anda mungkin ingin memikirkan tentang pertama mengaburkan alamat email menggunakan layanan seperti mailtoencoder.com.

Pada catatan terkait: nomor telepon juga harus interaktif. Tahun lalu, kami memasang tip cepat tentang cara membuat nomor telepon yang bisa diklik. Berterima kasih kepada kode-kode, smartphones dapat mengenai nomor telepon, membuat mereka mudah dihubungi. Ini sangat mudah dibawa bagi pengguna yang terus bergerak.

Pebisnis yang bergantung pada toko bangunan mereka dapat meraih untung besar dari sebuah map interaktif, memudahkan pengguna untuk menunjukkan jalan. Menunjukkan alamat toko itu hebat, namun menambahkan map interaktif itu adalah hal yang lebih baik

Berkat Google Maps, tidak semudah ini menyematkan fitur bermanfaat ini. Cukup masukkan alamat Anda di Google Maps dan klik ikon tautan di bilah sisi. Di sana Anda akan menemukan kode yang melekat.

Cara membuat contact us html css
Cara membuat contact us html css
Cara membuat contact us html css

Tahukah kamu bahwa kamu dapat menyesuaikan peta kamu? Kamu bisa menata warna peta, menambahkan spidol peta khusus dan membuat legenda. Kamu akan menemukan lebih banyak informasi tentang developers.google.com. Kamu mungkin juga mempertimbangkan layanan alternatif seperti Mapbox yang agak enak.

Cara membuat contact us html css
Cara membuat contact us html css
Cara membuat contact us html css


Jangan lupakan mesin pencari

Sebagai pengunjung, Kamu akan langsung mengenali alamat di halaman kontak. Mesin pencari, bagaimanapun, membutuhkan sedikit bantuan untuk mengenali berbagai elemen.

Kita bisa menyelesaikannya dengan menggunakan data terstruktur. Data terstruktur adalah bentuk markup HTML yang memberi search engine lebih banyak informasi tentang makna konten yang mendasarinya

Bagaimana cara kerjanya? Katakanlah kita memiliki agen desain web yang disebut 'Fine Design' yang terletak di 3102 Highway 98, Mexico Beach, FL. Microdata memungkinkan mesin pencari untuk lebih memahami alamat ini. Kode HTML akan terlihat seperti ini:

Fine Design

3102 Highway 98 Mexico Beach, FL

Kamu mungkin ingin melangkah lebih jauh dan membungkus blok ini di alamat elemen. Elemen alamat hanya boleh digunakan pada alamat yang relevan dengan konteks situs, bukan hanya alamat lama yang mungkin kamu miliki dalam konten kamu Penggunaan elemen ini telah menyebabkan sakit kepala para pengembang selama bertahun-tahun, jadi jika Anda tidak yakin, jangan khawatir terlalu banyak tentang hal itu!

Itulah tentang alamat perusahaan. Bagaimanapun juga, kita bisa menggunakan microdata untuk nomer telepon dan alamat email:

Tel: 850-648-4200
Email: 

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.

Cara membuat contact us html css
Cara membuat contact us html css
Cara membuat contact us html css

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.

Cara membuat contact us html css
Cara membuat contact us html css
Cara membuat contact us html css

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 ..).

Cara membuat contact us html css
Cara membuat contact us html css
Cara membuat contact us html css

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): 

Cara membuat contact us html css
Cara membuat contact us html css
Cara membuat contact us html css

Cara membuat contact us html css
Cara membuat contact us html css
Cara membuat contact us html css

Cara membuat contact us html css
Cara membuat contact us html css
Cara membuat contact us html css

Cara membuat contact us html css
Cara membuat contact us html css
Cara membuat contact us html css

Cara membuat contact us html css
Cara membuat contact us html css
Cara membuat contact us html css


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