Cara Belajar Membuat Formulir Kontak Dengan HTML
Membuat formulir kontak di blog atau website sama pentingnya dengan memiliki telepon di kantor Anda. Di dunia di mana kenyamanan adalah raja, ini memungkinkan pelanggan Anda (dan calon pelanggan) untuk menghubungi Anda kapan saja sepanjang hari.
Bahkan formulir kontak paling dasar pun menawarkan cara yang bagus untuk mendapatkan prospek, mengembangkan daftar email, dan terhubung dengan audiens Anda.
HTML (Hypertext Markup Language) adalah kode standar yang digunakan untuk membuat sebagian besar situs web dan aplikasi di internet. Dan seperti halnya bahasa apa pun, kecuali bahasa cinta, itu bukan sesuatu yang bisa Anda pelajari hanya dalam satu malam.
Kabar baiknya adalah Anda dapat membuat formulir kontak dengan HTML meskipun Anda belum paham dengan pengkodean. Jadi jangan khawatir jika Anda tidak tahu dengan kode HTML atau bahasa pemograman karena dalam posting ini kami akan memandu Anda untuk mulai membuat formulir kontak dengan HTML hari ini.
Sebelum kita mulai, luangkan waktu sejenak untuk mempertimbangkan apakah Anda benar-benar perlu membuat formulir menggunakan HTML.
Hal-hal jauh lebih sederhana ketika Anda menggunakan alat pembuat formulir seperti Paperform dll, Anda akan membuat formulir kontak yang tampak lebih baik dalam waktu singkat.
5 langkah Belajar membuat formulir kontak Dengan HTML
1. Pilih editor HTML
Untuk membuat kode HTML, Anda memerlukan editor HTML. Ini membantu mengubah kode menjadi apa pun yang Anda coba buat - dalam hal ini formulir kontak.
Pikirkan editor HTML seperti pengolah kata khusus untuk membuat sesuatu untuk halaman web. Anda menggunakan editor teks apa pun untuk membuat kode HTML, tetapi editor khusus menawarkan lebih banyak kemudahan dan fungsionalitas.
Tidak ada kekurangan editor HTML yang hebat . Beberapa opsi populer meliputi:
- Codepen
- Notepad++
- Kompozer
- Sublime Text 3
- Atom
- CoffeeCup
- Brackets
Salah satu alat di atas akan melakukan pekerjaan itu, tetapi ada ratusan opsi jika Anda adalah tipe orang yang suka mencari solusi sempurna. Sebagian besar gratis, jadi Anda dapat mencoba beberapa dan melihat mana yang paling cocok untuk Anda.
2. Buat file baru dengan ekstensi .HTML
Selanjutnya, Anda harus memberi tahu sistem operasi Anda bahwa Anda membuat file HTML baru. Untungnya, langkah ini sangat sederhana. Yang harus Anda lakukan adalah membuat file baru dengan editor HTML Anda dan menyimpannya dengan ekstensi '.html'.
Cukup beri nama file dan ikuti dengan .html. Saat Anda berurusan dengan kode, yang terbaik adalah menjaga semuanya tetap jelas, jadi kami sarankan untuk memberi nama file 'contact_form.html' atau yang serupa.
Setelah Anda menamainya, ketik <html> ke dalam bidang teks. Ini mengumumkan kepada editor bahwa Anda ingin membuat kode HTML. Ini seperti ketika Anda memainkan Charades dan memberi isyarat kategori yang Anda lakukan sebelum Anda mulai memerankannya.
Editor Anda akan secara otomatis menghasilkan kode berikut untuk Anda. Itu akan sama apakah Anda membuat formulir kontak sederhana atau seluruh situs web HTML.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>3. Buat file baru dengan ekstensi .PHP
Sekarang Anda harus membuat file lain . Padahal kali ini Anda harus menyimpannya dengan ekstensi '.php'. Yang ini mengurus proses pengiriman formulir dan memastikan data yang Anda kumpulkan dari responden Anda pergi ke tempat yang Anda butuhkan.
Tanpa file PHP formulir Anda seperti mobil tanpa mesin - data tidak bisa kemana-mana. Melihat titik dari formulir kontak adalah untuk mengumpulkan informasi, ini membuatnya menjadi penting.
File PHP terhubung ke formulir Anda dengan sebaris kode di HTML Anda (kita akan membahasnya di langkah berikutnya). Anda dapat melihat seperti apa tampilannya di bawah ini:
<form id="fcf-form-id" class="fcf-form-class" method="post" action="contact-form-process.php">4. Hasilkan kode PHP untuk menangkap data formulir
Jadi file PHP memungkinkan Anda untuk menangkap data (nama, email , pesan, dan jenis input lainnya yang Anda sertakan). Kemudian mengirimkannya langsung ke alamat email Anda sebagai pesan teks biasa.
Di bawah ini kami telah menyertakan kode PHP yang, dalam istilah teknis, memvalidasi input pengguna di sisi server. Untuk menerjemahkannya dari gobbledygook: itu memastikan semuanya berfungsi. Ini juga menghasilkan pesan kesalahan dan konfirmasi apa pun yang mungkin didapat pengguna saat mereka mengisi formulir Anda.
Salin dan tempel kode di bawah ini ke dalam file .php. Yang perlu Anda lakukan hanyalah menambahkan email, baris subjek, dan pesan sukses Anda sendiri (diuraikan di dalam kode).
<?php
if (isset($_POST['Email'])) {
// EDIT THE FOLLOWING TWO LINES:
$email_to = "you@yourdomain.com";
$email_subject = "New form submissions";
function problem($error)
{
echo "We're sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br><br>";
echo $error . "<br><br>";
echo "Please go back and fix these errors.<br><br>";
die();
}
// validation expected data exists
if (
!isset($_POST['Name']) ||
!isset($_POST['Email']) ||
!isset($_POST['Message'])
) {
problem('We're sorry, but there appears to be a problem with the form you submitted.');
}
$name = $_POST['Name']; // required
$email = $_POST['Email']; // required
$message = $_POST['Message']; // required
$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if (!preg_match($email_exp, $email)) {
$error_message .= 'The Email address you entered does not appear to be valid.<br>';
}
$string_exp = "/^[A-Za-z .'-]+$/";
if (!preg_match($string_exp, $name)) {
$error_message .= 'The Name you entered does not appear to be valid.<br>';
}
if (strlen($message) < 2) {
$error_message .= 'The Message you entered do not appear to be valid.<br>';
}
if (strlen($error_message) > 0) {
problem($error_message);
}
$email_message = "Form details below.\n\n";
function clean_string($string)
{
$bad = array("content-type", "bcc:", "to:", "cc:", "href");
return str_replace($bad, "", $string);
}
$email_message .= "Name: " . clean_string($name) . "\n";
$email_message .= "Email: " . clean_string($email) . "\n";
$email_message .= "Message: " . clean_string($message) . "\n";
// create email headers
$headers = 'From: ' . $email . "\r\n" .
'Reply-To: ' . $email . "\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
?>
<!-- INCLUDE YOUR SUCCESS MESSAGE BELOW -->
Thanks for getting in touch. We'll get back to you soon.
<?php
}
?>5. Buat formulir kontak HTML
Yang tersisa hanyalah membuat formulir kontak dengan mudah. Kami telah menyertakan template yang akan menghasilkan formulir kontak HTML dasar untuk Anda. Cukup salin kodenya langsung ke editor pilihan Anda.
<!DOCTYPE html>
<head>
<title>Contact Form</title>
</head>
<body>
<h3>Contact us</h3>
<form id="fcf-form-id" class="fcf-form-class" method="post" action="contact-form-process.php">
<label for="Name" class="fcf-label">Your name</label>
<div class="fcf-input-group">
<input type="text" id="Name" name="Name" class="fcf-form-control" required>
</div>
<div class="fcf-form-group">
<label for="Email" class="fcf-label">Your email address</label>
<div class="fcf-input-group">
<input type="email" id="Email" name="Email" class="fcf-form-control" required>
</div>
<div class="fcf-form-group">
<label for="Message" class="fcf-label">Your message</label>
<div class="fcf-input-group">
<textarea id="Message" name="Message" class="fcf-form-control" rows="6" maxlength="3000" required></textarea>
</div>
</div>
<div class="fcf-form-group">
<button type="submit" id="fcf-button" class="fcf-btn fcf-btn-primary fcf-btn-lg fcf-btn-block">Send</button>
</div>
</body>
</html>Jika Anda baru mengenal HTML, ada baiknya Anda memahami inti umum dari arti kode tersebut. Kalau tidak, Anda bisa membuat AI yang sangat jahat dan bahkan tidak mengetahuinya.
Tag "input" menentukan di mana pengguna dapat memasukkan data, sedangkan perintah "label" mewakili keterangan untuk item di antarmuka pengguna (seperti di mana tertulis 'Nama Anda' di atas bidang entri). "H1" menandai judul, dan "div" bertindak seperti penanda yang memisahkan segmen kode yang berbeda.
Salah satu bagian terpenting adalah "form action" yang menghubungkan ke file PHP. Tanpa ini untuk menautkan HTML dengan file PHP, formulir Anda hanya memberikan kesan yang baik dari formulir kontak. Ini akan terlihat benar, tetapi sebenarnya tidak akan berhasil.
Ketika Anda memasukkan kode itu akan menghasilkan formulir yang terlihat seperti ini:
Formulir kontak sering kali memiliki kotak tarik-turun serta bidang formulir biasa. Anda dapat dengan mudah menambahkan salah satu dari Anda sendiri dengan baris kode berikut:
<label for="contact reason">Contact Reason</label>
<select id="contact reason" name="contact reason">
<option value="sales">Sales</option>
<option value="help">Help</option>
<option value="billing">Billing</option>
</select>Anda juga dapat menambahkan kotak centang, yang merupakan cara untuk membuat pelanggan ikut serta dalam buletin email Anda .
<input type="checkbox" id="newsletter" name="newsletter" value="newslettersignup">
<label for="newsletter">Join our newsletter</label><br>Hasil akhirnya adalah bentuk super fungsional - super, super, jelek di bawah ini:
Cara membuat formulir HTML Responsif
Seperti yang Anda lihat, formulir HTML Anda tidak akan memenangkan penghargaan desain UX apa pun. Ini menyerupai sesuatu dari internet di tahun sembilan puluhan. Ini jelek, kusam dan sulit untuk ditangani, seperti mobil tua yang sudah usang.
Solusi terbaik untuk ini adalah dengan menggunakan pembuat formulir khusus seperti Paperform untuk membantu Anda membuat formulir yang indah tanpa harus mempelajari CSS. Dengan Paperform, Anda dapat membuat formulir kontak dalam hitungan menit tanpa menulis satu baris kode pun.
Jika Anda ingin menggunakan formulir HTML, cara untuk membuatnya terlihat lebih baik adalah dengan menggunakan CSS. CSS adalah kode yang menata konten web. Pikirkan HTML Anda sebagai manekin dan CSS sebagai pakaian yang akan Anda kenakan agar terlihat bagus - ini adalah jalan Anda menuju bentuk yang tidak terlihat seperti yang dibuat Bill Gates di masa-masa awal Microsoft.
1. Font dan warna
Jika Anda ingin memiliki formulir kontak, Anda menginginkannya sesuai dengan estetika situs web Anda yang lain . Dengan pemahaman dasar tentang gaya CSS, Anda dapat melakukannya, serta membuat formulir Anda lebih mudah dibaca dan menarik secara visual.
Ada banyak pilihan font dan warna untuk dipilih. Berikut daftar yang bermanfaat. Ingatlah bahwa gaya akan bervariasi tergantung pada browser yang Anda gunakan - misalnya, font mungkin terlihat sedikit berbeda di Chrome dibandingkan dengan Safari.
Di bawah ini kami telah menambahkan beberapa CSS untuk mengubah jenis font, ukuran, berat dan warna.
.fcf-body {
font-family: -apple-system, Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
color: #0000ff;
text-align: left;
}Dengan kode ini formulir Anda akan terlihat seperti ini:
2. Padding dan margin
Setiap elemen HTML dibungkus dalam kotak tak terlihatnya sendiri. Cara memvisualisasikan ini adalah melalui "model kotak", yang berguna saat belajar menyesuaikan desain dan tata letak elemen HTML.
Model kotak terdiri dari: margin, batas, padding, dan isi formulir Anda. Ini terlihat seperti ini:
Model Kotak elemen HTML
Berikut rincian singkat dari elemen yang berbeda:
- Konten - Tempat teks atau gambar Anda muncul.
- Padding - Menyesuaikan ini akan membersihkan area di sekitar konten Anda.
- Border - Batas terlihat yang membungkus padding dan konten.
- Margin -Menyesuaikan ini akan membersihkan area di luar perbatasan Anda .
Dengan mengutak-atik ini, Anda dapat mengubah cara pengguna berinteraksi dengan formulir Anda dan tampilannya di halaman - dari ukuran tombol kirim hingga lebar bidang input.
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #5DADE2;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
}Kode seperti di atas akan mengubah formulir Anda menjadi sesuatu yang tidak terlalu jelek:
Sekarang lihat hasilnya dan semoga dengan materi buat formulir kontak dengan HTML yang diberikan oleh materibisnis.com ini dapat menambah wawasan buat kalian.
0 Response to "Cara Belajar Membuat Formulir Kontak Dengan HTML"
Posting Komentar