PHP
Templat Formulir Kontak HTML ke Email dengan Bidang Kustom
Aug
oleh Vincy. Terakhir diubah pada 19 Juli 2022.
Mengapa kita memerlukan formulir kontak di situs web? Ini untuk memungkinkan (calon) pelanggan terhubung dengan Anda.
Elon Musk mengatakan, “…memaksimalkan area di bawah kurva kebahagiaan pelanggan…”.
Jadi, meningkatkan kemungkinan membaca pikiran pelanggan akan mendorong kita maju untuk mencapai tujuan. Antarmuka formulir kontak adalah salah satu alat untuk mengenal pelanggan kami.
Mari rancang komponen formulir kontak yang sederhana dan berguna untuk situs web Anda. Bagian di bawah ini menjelaskan cara membuat formulir kontak dari awal.
Penggunaan formulir kontak di situs web
Ada beberapa keuntungan dari memiliki antarmuka formulir kontak.
- Ini membantu memiliki konversi dengan mengetahui kebutuhan pelanggan.
- Ini membantu untuk mengetahui ruang lingkup perbaikan.
- Ini membantu mengumpulkan ide dan pendapat pengguna akhir yang relevan dengan model bisnis.
Tentang contoh ini
Contoh kode ini untuk mendesain formulir kontak HTML dengan fitur berikut.
- Formulir kontak dengan bidang khusus.
- Tambah/Hapus bidang khusus secara dinamis melalui jQuery.
- Kirim email dengan data formulir yang diposting.
- Menyimpan data formulir ke dalam database.
Konfigurasi aplikasi
Kode backend formulir kontak HTML ini memungkinkan pengiriman email dan tindakan toko-ke-database. Tapi, fitur store-to-database adalah opsional dan dinonaktifkan pada awalnya.
File konfigurasi ini memiliki tanda untuk mengaktifkan atau menonaktifkan fitur store-to-database.
Secara default, AKTIFKAN_DATABASE bendera disetel ke false. Jadikan benar untuk menampilkan kontrol “store-to-database” di UI.
config.php
<?php
const ENABLE_DATABASE = false;
?>
Kode halaman arahan formulir kontak HTML
Kode HTML ini untuk menampilkan formulir kontak di halaman arahan. Itu index.php file menyertakan yang berikut ini untuk membuat formulir kontak HTML dinamis.
- Ini berisi formulir HTML.
- Ini termasuk file konfigurasi aplikasi.
- Ini membutuhkan file PHP tindakan formulir untuk memproses data yang dikirimkan oleh pengguna.
- Ini termasuk javascript validasi formulir dan ketergantungan jQuery yang diperlukan.
Dengan menghubungkan semua komponen contoh formulir kontak, file ini memungkinkan formulir kontak HTML menjadi interaktif.
Ini menunjukkan dua kontrol untuk simpan ke database atau untuk Kirim Sebuah email. Secara default simpan ke database kontrol akan disembunyikan. Dapat dikonfigurasi untuk menampilkan opsi ini.
index.php
<?php require_once __DIR__ . '/contact-form-action.php';?>
<?php require_once __DIR__ . '/config.php';?>
<!DOCTYPE html>
<html>
<head>
<link href="https://phppot.com/php/html-contact-form-template-to-email-with-custom-fields/style.css" rel="stylesheet" type="text/css" />
<title>HTML Contact Form with Add More Custom Fields</title>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"
type="text/javascript"></script>
<script type="text/javascript" src="js/contact.js">
</script>
</head>
<body>
<h1>HTML Contact Form with with Add More Custom Fields</h1>
<div class="form-container">
<form name="mailForm" id="mailForm" method="post" action=""
enctype="multipart/form-data" onsubmit="return validate()">
<div class="input-row">
<label style="padding-top: 20px;">Name</label> <span
id="userName-info" class="info"></span><br /> <input
type="text" class="input-field" name="userName"
id="userName" />
</div>
<div class="input-row">
<label>Subject</label> <span id="subject-info"
class="info"></span><br /> <input type="text"
class="input-field" name="subject" id="subject" />
</div>
<div class="input-row">
<label>Message</label> <span id="userMessage-info"
class="info"></span><br />
<textarea name="userMessage" id="userMessage"
class="input-field" id="userMessage" cols="60"
rows="6"></textarea>
</div>
<div class="input-row">
<div class="custom-field-name">
<input type="text" class="custom-field"
name="Fieldname[]" id="Fieldname"
placeholder="Fieldname" />
</div>
<div class="custom-field-value">
<input type="text" class="custom-field"
name="Fieldvalue[]" id="Fieldvalue"
placeholder="Fieldvalue" />
</div>
<div class="col">
<div class="custom-field-col">
<div onClick="addMore();"
class="plus-button"
title="Add More">
<img src="./images/icon-add.svg"
alt="Add More">
</div>
<div onClick="remove();"
class="minus-button"
title="Remove">
<img src="./images/icon-remove.svg"
alt="Remove">
</div>
</div>
</div>
</div>
<div class="col">
<input type="submit" name="send" id="send" class="btn-submit"
value="Send email" />
<div class="col">
<?php if(ENABLE_DATABASE == true){?>
<input type="submit" name="savetodatabase"
class=btn-submit id="savetodatabase"
value="Save database" />
<?php }?>
</div>
<div id="pageloader">
<img id="loading-image" src="./images/loader.gif" />
</div>
</div>
<div id="statusMessage">
<?php
if (! empty($message)) {
?>
<p class="<?php echo $type; ?>Message"><?php echo $message; ?></p>
<?php
}
?>
</div>
</form>
</div>
</body>
</html>
Skrip validasi formulir kontak menggunakan jQuery
Validasi formulir dapat dilakukan di sisi server atau sisi klien. Tapi, validasi di sisi klien dengan Javascript sangat biasa. Dan itu cukup mudah dan mulus juga.
Jadi, saya membuat skrip validasi berbasis jQuery untuk memvalidasi formulir kontak HTML. Ini mengharuskan semua bidang menjadi wajib kecuali bidang khusus.
Bidang kustom formulir kontak bersifat opsional. Namun, di PHP, ia memeriksa nama dan nilai bidang khusus agar tidak kosong. Validasi sisi server ini akan dilakukan sebelum menyiapkan parameter tindakan formulir kontak.
Penangan JavaScript lainnya
Ini kontak.js file tidak hanya menyertakan handler validasi. Tetapi juga, mendefinisikan penangan untuk menambahkan, menghapus baris bidang khusus di UI.
Ini memungkinkan siapa pun baris input bidang khusus berada dalam formulir kontak HTML. Ini dikodekan dalam tampilkanHideControls() fungsi dari file di bawah ini.
kontak.js
function validate() {
var valid = true;
$(".info").html("");
var userName = document.forms["mailForm"]["userName"].value;
var subject = document.forms["mailForm"]["subject"].value;
var userMessage = document.forms["mailForm"]["userMessage"].value;
if (userName == "") {
$("#userName-info").html("(required)");
$("#userName").css('background-color', '#FFFFDF');
valid = false;
}
if (subject == "") {
$("#subject-info").html("(required)");
$("#subject").css('background-color', '#FFFFDF');
valid = false;
}
if (userMessage == "") {
$("#userMessage-info").html("(required)");
$("#userMessage").css('background-color', '#FFFFDF');
valid = false;
}
handleLoader(valid);
return valid;
}
function handleLoader(valid) {
if (valid == true) {
if ($("#savetodatabase")) {
$("#savetodatabase").hide();// hide submit
}
$("#send").hide();
$("#loading-image").show();// show loader
}
}
function addMore() {
$(".input-row:last").clone().insertAfter(".input-row:last");
$(".input-row:last").find("input").val("");
showHideControls();
}
function remove() {
$(".input-row:last").remove(".input-row:last");
$(".plus-button:last").show();
$(".minus-button:last").hide();
$(".input-row:last").find("input").val("");
}
function showHideControls() {
$(".plus-button").hide();
$(".minus-button").show();
$(".minus-button:last").hide();
$(".plus-button:last").show();
}
Tindakan formulir kontak PHP untuk mengirim email atau menyimpan ke Database
Umumnya, tindakan formulir kontak akan mengirim email dengan isi data formulir yang diposting. Contoh ini memberikan dukungan tambahan untuk menyimpan pesan yang diposting dan detailnya dalam database.
Ini akan cocok ketika formulir kontak HTML digunakan untuk mengumpulkan yang berikut ini.
- Umpan balik pengguna
- Permintaan dukungan
- Pertanyaan proyek
- Komentar
Kode PHP ini menangani pengiriman formulir dengan memeriksa indeks tindakan yang diposting. Ini menggunakan fungsi PHP mail() untuk mengirim email formulir kontak HTML. Jika Anda ingin mengirim email melalui SMTP menggunakan pustaka PHPMailer, tautan memiliki kode untuk itu.
Lihat manual PHP.net untuk mengetahui lebih banyak tentang fungsi mail() ini.
Jika pengguna mengklik tombol ‘Simpan ke database’, itu menghubungkan Database melalui kelas DataSource. Ini memicu tindakan penyisipan dengan mengirimkan data formulir dalam parameter kueri.
kontak-form-action.php
<?php
namespace Phppot;
use PhppotDataSource;
require_once __DIR__ . '/DataSource.php';
require_once __DIR__ . '/index.php';
if (! empty($_POST["savetodatabase"])) {
$conn = new DataSource();
$query = "INSERT INTO tbl_contact_mail(userName,subject,userMessage)VALUES(?,?,?)";
$paramType="sss";
$paramValue = array(
$_POST["userName"],
$_POST["subject"],
$_POST["userMessage"]
);
$id = $conn->insert($query, $paramType, $paramValue);
if (! empty($_POST["Fieldname"])) {
$customFieldLength = count($_POST["Fieldname"]);
for ($i = 0; $i < $customFieldLength; $i ++) {
if (! empty($_POST["Fieldname"][$i]) && $_POST["Fieldvalue"][$i]) {
$query = "INSERT INTO tbl_custom_field(fieldName,fieldValue,contact_id)VALUES(?,?,?)";
$paramType="ssi";
$paramValue = array(
$_POST["Fieldname"][$i],
$_POST["Fieldvalue"][$i],
$id
);
$conn->insert($query, $paramType, $paramValue);
}
}
}
if ($query==true) {
$message = "Data Saved";
$type = "success";
} else {
$message = "Problem in data";
$type = "error";
}
} elseif (! empty($_POST["send"])) {
if (isset($_POST["userName"])) {
$userName = $_POST["userName"];
}
if (isset($_POST["subject"])) {
$subject = $_POST["subject"];
}
if (isset($_POST["userMessage"])) {
$message = $_POST["userMessage"];
}
$htmlBody = '<div>' . $message . '</div>';
$htmlBody .= '<br>';
$htmlBody .= '<div style=font-weight:bold;>More details:' . '</div>';
for ($i = 0; $i < count($_POST["Fieldname"]); $i ++) {
if (isset($_POST["Fieldname"][$i]) && (isset($_POST["Fieldvalue"][$i]))) {
$fieldname = $_POST["Fieldname"][$i];
$fieldvalue = $_POST["Fieldvalue"][$i];
$htmlBody .= '<div>' . $fieldname . '<div style=display:inline-block;margin-left:10px;>' . $fieldvalue . '</div>';
}
}
$htmlBody .= '<br><br><br>';
$htmlBody .= '<div>Thank You...!' . '</div>';
// Run loop
$recipient="recipient@domain.com";
if (mail($recipient, $subject, $htmlBody)) {
$message = "Mail sent successfully";
$type = "success";
} else {
$message = "Problem in sending email";
$type = "error";
}
}
?>
Skrip basis data
File .sql ini berisi pernyataan create dan indeks yang diperlukan dari tabel tbl_contact.
Impor SQL ini setelah menyiapkan kode contoh ini di lingkungan PHP Anda.
Catatan: Ini hanya diperlukan jika Anda memerlukan opsi “Store to database”.
database.sql
-- --------------------------------------------------------
--
-- Table structure for table `tbl_contact`
--
CREATE TABLE `tbl_contact` (
`id` int(11) NOT NULL,
`userName` varchar(255) NOT NULL,
`subject` varchar(255) NOT NULL,
`userMessage` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- --------------------------------------------------------
--
-- Table structure for table `tbl_custom_field`
--
CREATE TABLE `tbl_custom_field` (
`id` int(11) NOT NULL,
`contact_id` int(11) NOT NULL,
`fieldName` varchar(11) NOT NULL,
`fieldValue` varchar(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tbl_contact`
--
ALTER TABLE `tbl_contact`
ADD PRIMARY KEY (`id`);
--
-- Indexes for table `tbl_custom_field`
--
ALTER TABLE `tbl_custom_field`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tbl_contact`
--
ALTER TABLE `tbl_contact`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
--
-- AUTO_INCREMENT for table `tbl_custom_field`
--
ALTER TABLE `tbl_custom_field`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
Kesimpulan
Saya harap artikel ini memberi Anda komponen formulir kontak yang berguna untuk situs web Anda. Akan sangat membantu jika Anda memiliki ide bagus untuk membuat formulir seperti ini sendiri.
Integrasi bidang khusus dengan formulir kontak merupakan persyaratan yang langka dan rumit. Bagikan pemikiran Anda di bagian komentar untuk terus memposting kode yang bermanfaat.
Unduh
Kembali ke Atas
Source link
