PHP
Formulir Kontak Responsif menggunakan Tailwind CSS
Jun
oleh Vincy. Terakhir diubah pada 2 Maret 2021.
Tailwind adalah kerangka kerja frontend seperti Bootstrap untuk mendesain situs web dengan cepat. Ada banyak kerangka kerja frontend yang tersedia di pasar. Kerangka kerja ini memberikan templat, tema, pustaka CSS untuk memudahkan proses pembuatan situs web.
Tailwind CSS adalah salah satu kerangka kerja populer yang memberikan kelas CSS untuk membakukan desain. Itu mampu ditingkatkan dengan templat UI modern hingga lama.
Ini mudah untuk menyesuaikan dan mempelajari kerangka kerja Tailwind. Kelas CSS yang diberi nama semantik memberikan berbagai pilihan warna, spasi, tipografi, dan bayangan kotak. Hal ini memungkinkan untuk mencapai flip terbalik pada tampilan dan nuansa UI dengan HTML yang sama.
Saya telah membuat komponen formulir kontak dengan kerangka UI sederhana dengan CSS khusus. Jika Anda mencari komponen formulir kontak yang aman, dapatkan Iris.
Apa yang ada di dalam?
- Kerangka kerja ujung depan alternatif
- Tentang Contoh: Membuat formulir kontak dengan Tailwind CSS
- Bagaimana cara mengintegrasikan kerangka kerja Tailwind CSS?
- Tetap dengan HTML; tidak perlu menulis CSS
- Lebih lanjut tentang validasi pengiriman formulir dan rutinitas backend
- Output CSS Tailwind dalam desain formulir kontak
Kerangka kerja ujung depan alternatif
Ada lebih banyak kerangka kerja UI yang tersedia untuk merancang ujung depan aplikasi. Kerangka kerja ini mengurangi upaya untuk menyesuaikan gaya UI untuk membangun situs web dari awal.
Bootstrap adalah kerangka kerja terkemuka yang tidak ada duanya yang menempati sebagian besar ruang.
Selain itu, ada banyak seperti Dasar kerangka, UI semantik, UIkit. Masing-masing kerangka kerja ini memiliki kekuatan unik dalam aspek kemudahan, kesederhanaan, keandalan, daya tanggap, dan lainnya.
Saya menggunakan kerangka kerja Tailwind CSS untuk membuat templat formulir kontak. Saya tidak membuat CSS, daripada menggunakan tailwind.css yang dibuat dengan menjalankan by npm perintah.
Kami telah melihat banyak contoh formulir kontak dengan templat formulir sederhana yang memiliki detail kontak dasar. Saya mereplikasi template yang sama dengan penggunaan framework Tailwind CSS.
Gambar di bawah ini menunjukkan struktur file dari contoh ini. JavaScript, file PHP memiliki sesuatu yang umum untuk menangani validasi dan proses pengiriman email.
Itu modul simpul memiliki file library Tailwind CSS yang membentuk desain UI.
Bagaimana mengintegrasikan kerangka kerja Tailwind CSS
Situs resmi Tailwind menyediakan banyak panduan di berbagai platform untuk menginstal kerangka kerja ini.
Jika panduan yang diberikan tidak cocok untuk aplikasi Anda, ini memberikan langkah-langkah instalasi.
Ada berbagai cara untuk menginstal framework Tailwind untuk front end aplikasi.
- Menginstal sebagai plugin PostCSS
- Menginstal tanpa PostCSS
Cara terbaik untuk mengintegrasikan kerangka kerja ini untuk aplikasi lengkap adalah menginstalnya sebagai plugin postCSS yang merupakan opsi pertama.
Saya telah menggunakan opsi kedua untuk membuat pengaturan sederhana untuk contoh dasar ini.
Ini membutuhkan Node.js 12.13.0 atau versi yang lebih tinggi. Perintah CLI berikut digunakan untuk membuat dependensi ke direktori target.
npx tailwindcss-cli@latest build -o tailwind.css
Pustaka Tailwind CSS juga tersedia dengan URL CDN. Ini berisi build terbaru yang dapat disertakan untuk integrasi sederhana.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
Tetap dengan HTML; tidak perlu menulis CSS
Formulir kontak ini memiliki template desain minimal. Itu tidak memiliki CSS kecuali yang dari perpustakaan Tailwind.
Ini menggunakan kelas kerangka kerja Tailwind dengan HTML untuk mencapai desain UI ini. Nama kelas dan nama elemen menjelaskan tujuannya yang membantu membiasakan diri dengan perpustakaan ini dengan cepat dan mudah.
Dalam HTML formulir kontak ini, ia menggunakan kelas Tailwind CSS hanya untuk membuat UI formulir dasar. Namun, ia juga mampu mencapai desain yang diperkaya kelas atas.
index.php
<html>
<head>
<title>Contact Us Form</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://phppot.com/php/responsive-contact-form-using-tailwind-css/node/tailwindcss/dist/tailwind.css" rel="stylesheet">
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
</head>
<body>
<div
class="w-full mx-auto max-w-3xl bg-white px-4 pt-1 pb-6 text-gray-700">
<div class="block w-full text-grey-darkest mb-5 text-3xl">PHP contact
form with tailwind css</div>
<form name="frmContact"
class="mb-4 px-5 py-5 border border-gray-200 md:justify-between rounded"
frmContact"" method="post" action="" enctype="multipart/form-data"
onsubmit="return validateContactForm()">
<div>
<div class="label flex flex-col">
<label class="text-grey-darkest md:ml-2" for="last_name"> Name <span
id="userName-info" class=""></span>
</label>
</div>
<input type="text"
class="border border-gray-400 rounded mb-5 py-1 px-3 text-grey-darkest md:ml-2"
name="userName" id="userName"
value="<?php if(!empty($_POST['userName'])&& $type == 'error'){ echo $_POST['userName'];}?>" />
</div>
<div>
<div class="label flex flex-col">
<label class="text-base text-grey-darkest md:ml-2" for="last_name">
Email <span id="userEmail-info" class="validation-message"></span>
</label>
</div>
<input type="text"
class="border border-gray-400 rounded mb-5 py-1 px-3 text-grey-darkest md:ml-2"
name="userEmail" id="userEmail"
value="<?php if(!empty($_POST['userEmail'])&& $type == 'error'){ echo $_POST['userEmail'];}?>" />
</div>
<div>
<div class="label flex flex-col">
<label class="text-base text-grey-darkest md:ml-2" for="last_name">
Subject <span id="subject-info" class="validation-message"></span>
</label>
</div>
<input type="text"
class="border rounded border-gray-400 mb-5 py-1 px-3 text-grey-darkest md:ml-2"
name="subject" id="subject"
value="<?php if(!empty($_POST['subject'])&& $type == 'error'){ echo $_POST['subject'];}?>" />
</div>
<div>
<div class="label flex flex-col">
<label class="text-base text-grey-darkest md:ml-2" for="last_name">
Message <span id="userMessage-info" class="validation-message"></span>
</label>
</div>
<textarea name="content" id="content"
class="resize-x border border-gray-400 rounded md:ml-2 mb-4"
cols="35" rows="5"><?php if(!empty($_POST['content'])&& $type == 'error'){ echo $_POST['content'];}?></textarea>
</div>
<div>
<input type="submit" name="send"
class="bg-green-400 rounded text-white font-bold py-1 px-16 md:ml-2"
value="Send" />
</div>
</form>
<?php if(!empty($message)) { ?>
<div id="phppot-message" class="<?php echo $type; ?>"><?php if(isset($message)){ ?>
<?php echo $message; }}?>
</div>
</div>
<script src="assets/js/form.js"></script>
</body>
</html>
Lebih lanjut tentang validasi pengiriman formulir dan rutinitas backend
Bagian ini berisi cuplikan kode yang dibuat untuk logika ujung belakang formulir kontak. Ini sangat umum di banyak contoh formulir kontak yang telah kita lihat sebelumnya. Contoh: Formulir kontak mengambang, Formulir kontak lengket, dan banyak lagi contoh.
Validasi formulir yang memeriksa untuk memastikan data dan formatnya. Ada berbagai cara untuk mengimplementasikan validasi formulir.
Di sini, ini menunjukkan skrip validasi sisi klien sederhana menggunakan JavaScript. Semua bidang formulir adalah wajib. Ini memvalidasi format email dengan regex.
Ini menampilkan pesan kesalahan validasi di sebelah bidang dan mengembalikan boolean Salah.
Validasi Formulir sisi klien
assets/js/form.js
function validateContactForm() {
var valid = true;
$("#userName").removeClass("error-field");
$("#userEmail").removeClass("error-field");
$("#subject").removeClass("error-field");
$("#content").removeClass("error-field");
$("#userName-info").html("").hide();
$("#userEmail-info").html("").hide();
$("#subject-info").html("").hide();
$("#content-info").html("").hide();
$(".validation-message").html("");
$(".phppot-input").css('border', '#e0dfdf 1px solid');
var userName = $("#userName").val();
var userEmail = $("#userEmail").val();
var subject = $("#subject").val();
var content = $("#content").val();
if (userName.trim() == "") {
$("#userName-info").html("required.").css("color", "#ee0000").show();
$("#userName").css('border', '#e66262 1px solid');
$("#userName").addClass("error-field");
valid = false;
}
if (userEmail.trim() == "") {
$("#userEmail-info").html("required.").css("color", "#ee0000").show();
$("#userEmail").css('border', '#e66262 1px solid');
$("#userEmail").addClass("error-field");
valid = false;
}
if (!userEmail.match(/^([w-.]+@([w-]+.)+[w-]{2,4})?$/)) {
$("#userEmail-info").html("invalid email address.").css("color",
"#ee0000").show();
$("#userEmail").css('border', '#e66262 1px solid');
$("#userEmail").addClass("error-field");
valid = false;
}
if (subject == "") {
$("#subject-info").html("required.").css("color", "#ee0000").show();
$("#subject").css('border', '#e66262 1px solid');
$("#subject").addClass("error-field");
valid = false;
}
if (content == "") {
$("#userMessage-info").html("required.").css("color", "#ee0000").show();
$("#content").css('border', '#e66262 1px solid');
$("#content").addClass("error-field");
valid = false;
}
if (valid == false) {
$('.error-field').first().focus();
valid = false;
}
return valid;
}
Skrip pengiriman surat dalam PHP
Di atas HTML formulir kontak, halaman arahan memiliki skrip PHP ini. Tindakan pengiriman formulir menjalankan skrip ini dan memanggil layanan email yang dibuat untuk contoh ini.
Itu mendapat respons dari layanan surat dan mengatur jenis respons juga keberhasilan atau kegagalan.
index.php (kode PHP untuk memanggil layanan email untuk mengirim email)
<?php
namespace Phppot;
require_once ("lib/MailService.php");
$mailService = new MailService();
if (! empty($_POST['send'])) {
$response = $mailService->sendContactMail($_POST);
if (! empty($response)) {
$message = "Hi, we have received your message. Thank you.";
$type = "success";
} else {
$type = "error";
}
}
?>
Kelas layanan email PHP
Kelas ini memiliki kirimContactMail() berfungsi dan menerima data formulir. Ini mempersiapkan header email dan params untuk memanggil fungsi email PHP.
Ganti fungsi mail() dengan PHPMailer untuk mendapatkan implementasi email yang lebih baik. Pada tutorial sebelumnya, kita telah melihat cara mengirim email menggunakan PHPMailer melalui SMTP Gmail.
libMailService.php
<?php
namespace Phppot;
class MailService
{
function sendContactMail($postValues)
{
$name = $postValues["userName"];
$email = $postValues["userEmail"];
$subject = $postValues["subject"];
$content = $postValues["content"];
$toEmail = "ADMIN_EMAIL";
$mailHeaders = "From: " . $name . "<" . $email . ">rn";
$response = mail($toEmail, $subject, $content, $mailHeaders);
return $response;
}
}
Tangkapan layar berikut menunjukkan UI formulir kontak yang dirancang dengan menggunakan Tailwind CSS.
Pesan kesalahan di sebelah label formulir berasal dari validasi JavaScript sisi klien.
Kesimpulan
Kami telah mempelajari cara mendesain template UI dengan framework Tailwind CSS.
Selain itu, kami telah mengikuti panduan integrasi Tailwind untuk menginstal kerangka kerja ini sebagai contoh formulir kontak sederhana.
Ini tidak hanya mencakup bagian UI tetapi juga validasi sisi klien dan pengiriman email sisi server. Jadi, Anda dapat menggunakan contoh ini jika Anda menginginkan formulir kontak dengan Tailwind CSS.
Di masa mendatang, mari kita lihat lebih banyak contoh dengan Tailwind CSS dengan mengintegrasikan kerangka kerja ini sebagai plugin PostCSS.
Unduh
Kembali ke Atas
Source link
