oleh Vincy. Terakhir diubah pada 31 Mei 2021.
Kerangka kerja front-end Foundation adalah salah satu pilihan populer akhir-akhir ini untuk membangun UI. Ini menyediakan template front-end, komponen UI, blok bangunan dan lain-lain.
Kerangka kerja ini membantu membangun templat UI modern dan responsif untuk situs web dan aplikasi.
Ini menyediakan blok UI yang dapat disesuaikan dan mendukung pembuatan situs web dengan mudah. Ini memiliki cuplikan kode untuk menampilkan hamparan formulir, menu situs, dan lainnya.
Jika Anda ingin membuat formulir kontak responsif di PHP tanpa menggunakan kerangka kerja atau plugin apa pun, artikel tertaut memilikinya.
Mari kita gunakan blok bangunan kerangka kerja ini dan kelas semantik untuk mendesain a formulir kontak responsif. Jika Anda mencari formulir kontak yang responsif, halus dan ramping, aman, dapatkan Iris.
Apa yang ada di dalam?
- Tentang contoh formulir kontak ini
- Fitur kerangka Yayasan
- Bagaimana cara mengintegrasikan framework Foundation?
- Tema front-end dengan kelas framework Foundation
- Konfigurasikan arahan rendering formulir
- Rutin backend formulir kontak (validasi, pengiriman email)
- Output: Formulir kontak menggunakan Foundation
Contoh ini adalah untuk membuat Templat formulir kontak responsif menggunakan kerangka front-end Foundation.
Contoh ini mendukung UI formulir kontak yang dapat diperluas dengan mengklik ikon kontak. Kita dapat membuat ikon kontak mengapung di halaman, gulir dan geser dalam formulir kontak saat klik.
Fitur yang dapat diperluas dapat disesuaikan berdasarkan konfigurasi. Sebaliknya, ini menampilkan bidang formulir secara default.
Untuk membiarkan formulir kontak diperluas, contoh ini menggunakan salah satu blok penyusun formulir Yayasan. Ini mengkustomisasi templat “Formulir Pencarian yang Dapat Diperluas” untuk mereplikasinya untuk formulir kontak.
Ini juga mencakup rutinitas back-end yang diperlukan untuk formulir kontak sederhana untuk mengirim email saat dikirim.
Fitur kerangka Yayasan
Framework Foundation adalah salah satu komponen front-end yang memberikan dukungan tak terbayangkan dalam membangun UI. Itu karena kerangka kerja UI terkemuka seperti Bootstrap.
Ini adalah kerangka kerja penuh fitur yang menyediakan berbagai komponen UI, halus, animasi, blok responsif dan banyak lagi.
Daftar item di bawah ini menunjukkan beberapa hal penting dari kerangka kerja ini.
- Ini menyediakan template responsif untuk situs web, aplikasi seluler, dan email.
- Ini memberikan komponen UI dan cuplikan kode yang mudah disesuaikan dan dimengerti.
- Ini adalah alat yang terdokumentasi dengan baik yang menampilkan utilitasnya dan blok bangunan yang dikembangkannya.
- Pratinjau dinamis dengan kode membantu pengembang/desainer untuk memilih komponen.
- Alat yang mudah dipasang ke dalam aplikasi.
- Ini mempercepat proses perancangan dan mengurangi upaya dengan blok UI yang dibuat sebelumnya.
Bagaimana cara menginstal kerangka Yayasan?
Menginstal Foundation untuk sebuah situs adalah langkah sederhana. Ada banyak cara yang diberikan dalam dokumen instalasi.
Saya telah menggunakan perintah berikut untuk menginstal kerangka kerja ini melalui npm.
npm install foundation-sites
Ini mendukung untuk menginstal melalui berbagai manajer paket benang, komposer dan banyak lagi. Ini juga menyediakan perintah Foundation CLI untuk mengintegrasikan kerangka kerja ini.
Ada tautan CDN untuk memasukkan aset kerangka kerja ini ke dalam aplikasi.
<!-- Compressed CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous"> <!-- Compressed JavaScript --> <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js" integrity="sha256-pRF3zifJRA9jXGv++b06qwtSqX1byFQOLjqa2PTEb2o=" crossorigin="anonymous"></script>
Tema front-end dengan kelas framework Foundation
Dalam kode HTML ini, ia memiliki Templat formulir kontak. Ini mengimpor aset kerangka Foundation, CSS dasar, dan JavaScript.
Ini menggunakan kelas kerangka kerja Foundation untuk membuat grup formulir dan menyelaraskan bidang ke dalamnya.
Dalam kode sebelumnya, saya telah membuat formulir kontak responsif dengan Tailwind CSS.
Selain itu, ia menggunakan kelas semantik yang telah ditentukan sebelumnya untuk menampilkan respons setelah validasi formulir dan tindakan sisi server.
Ada dua jenis rendering formulir dalam contoh ini. Salah satunya adalah membuat formulir saat memuat halaman itu sendiri. Cara lainnya adalah merender formulir dengan mengklik ikon di halaman arahan.
Skrip ini menyematkan blok kondisional PHP untuk memeriksa status direktif untuk menerapkan rendering yang sesuai.
Ini memuat aset Foundation SCSS secara kondisional untuk menampilkan formulir kontak yang dapat diperluas.
index.php
<html>
<head>
<title>Contact Us Form</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://phppot.com/php/responsive-contact-form-using-foundation-front-end-framework/vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="node_modulesfoundation-sitesdistjsfoundation.js"></script>
<link rel="stylesheet"
href="node_modulesfoundation-sitesdistcssfoundation.css" />
<link rel="stylesheet"
href="node_modulesfoundation-sitesdistcssfoundation-prototype.css" />
<?php
if (Config::ENABLE_EXTENDED_FORM == true) {
?>
<link rel="stylesheet"
href="node_modulesfoundation-sitesassetsfoundation.scss" />
<?php } ?>
<style>
.expand-search {
padding: 1rem;
margin-left: 0px;
}
.contact-form-field {
margin-left: 0px;
}
#submit-btn {
padding: 0px;
}
</style>
</head>
<body>
<div class="grid-container">
<h3>PHP contact form with foundation css</h3>
<?php
if (Config::ENABLE_EXTENDED_FORM == true) {
?>
<div class="input-group searchbar">
<div class="input-group-button">
<button class="button search">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="white"
stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="feather feather-phone">
<path
d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
</button>
</div>
</div>
<?php
}
?>
<div class="large-2 cell">
<form data-abide name="frmContact"
class="callout radius bordered search-field"
id="contact-form" method="post" action=""
enctype="multipart/form-data"
onsubmit="return validateContactForm()">
<div class="grid-x">
<div class="large-2 cell">
<label class="contact-form-field"> Name <span
class="form-error" id="userName-info"
role="alert"></span>
</label> <input type="text"
class="radius bordered search-field"
name="userName" id="userName"
aria-describedby="example1Hint1"
aria-errormessage="example1Error1"
value="<?php if(!empty($_POST['userName'])&& $type == 'error'){ echo $_POST['userName'];}?>" />
</div>
</div>
<div class="grid-x">
<div class="large-2 cell">
<label class="contact-form-field"
for="last_name"> Email <span
id="userEmail-info" class="form-error"></span>
</label> <input type="text"
class="radius bordered search-field"
name="userEmail" id="userEmail"
value="<?php if(!empty($_POST['userEmail'])&& $type == 'error'){ echo $_POST['userEmail'];}?>" />
</div>
</div>
<div class="grid-x">
<div class="large-2 cell">
<label class="contact-form-field"
for="last_name"> Subject <span
id="subject-info" class="form-error"></span>
</label> <input type="text"
class="radius bordered search-field"
name="subject" id="subject"
value="<?php if(!empty($_POST['subject'])&& $type == 'error'){ echo $_POST['subject'];}?>" />
</div>
</div>
<div class="grid-x">
<div class="large-3 cell">
<label class="contact-form-field"
for="last_name"> Message <span
id="userMessage-info" class="form-error"></span>
</label>
<textarea name="content" id="content"
class="radius bordered search-field"
cols="20" rows="5"><?php if(!empty($_POST['content'])&& $type == 'error'){ echo $_POST['content'];}?></textarea>
</div>
</div>
<div id="submit-btn">
<input type="submit" name="send"
class="button radius bordered success"
value="Send" />
</div>
</form>
</div>
<?php if(!empty($message)) { ?>
<div data-alert class="button round <?php echo $type; ?> alert-box"><?php if(isset($message)){ ?>
<?php echo $message; }?>
</div><?php }?>
</div>
<script src="assets/js/form.js"></script>
<?php
if (Config::ENABLE_EXTENDED_FORM == true) {
?>
<script src="assets/js/extend.js"></script>
<?php }?>
</body>
</html>
Konfigurasikan arahan rendering formulir
Itu ENACME_EXTENDED_FORM konstanta adalah mungkin untuk memiliki boolean benar salah nilai. Ini untuk mengaktifkan/menonaktifkan fitur formulir yang dapat diperluas dari contoh ini.
Kapan? benar, halaman arahan akan menampilkan ikon kontak yang dapat diklik untuk memperluas formulir kontak. Pada artikel sebelumnya, kita telah melihat cara menampilkan formulir kontak slide-in menggunakan jQuery.
Jika memang Salah, formulir kontak akan ditampilkan pada pemuatan halaman itu sendiri.
config/Config.php
<?php
namespace Phppot;
class Config
{
const ENABLE_EXTENDED_FORM = true;
}
?>
Selanjutnya kita akan melihat beberapa klien umum dan penangan sisi server yang digunakan untuk formulir kontak sederhana.
Di sebagian besar kode contoh formulir kontak, kita telah melihat sebelumnya menggunakan penangan ini.
Ini untuk memvalidasi formulir di sisi klien saat mengirimkan formulir. Juga, ini menunjukkan skrip pengiriman surat PHP untuk mengirim detail kontak yang dimasukkan melalui email.
Validasi Formulir sisi klien
Ini adalah skrip validasi formulir. Ini menggunakan jQuery untuk memeriksa bidang formulir apakah kosong.
Semua bidang dalam formulir kontak adalah wajib. Jika pengguna meninggalkan salah satu dari mereka dan mencoba mengirimkan, maka skrip ini akan mengembalikan boolean false dan menghentikan pengiriman.
Ini juga menampilkan pesan kesalahan kepada pengguna untuk memberi tahu mereka apa yang salah.
assets/js/form.js
function validateContactForm() {
var valid = true;
$("#userName").removeClass("is-invalid-input");
$("#userEmail").removeClass("is-invalid-input");
$("#subject").removeClass("is-invalid-input");
$("#content").removeClass("is-invalid-input");
$("#userName-info").html("").hide();
$("#userEmail-info").html("").hide();
$("#subject-info").html("").hide();
$("#content-info").html("").hide();
$(".form-error").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.").show();
$("#userName").addClass("is-invalid-input");
valid = false;
}
if (userEmail.trim() == "") {
$("#userEmail-info").html("required.").show();
$("#userEmail").addClass("is-invalid-input");
valid = false;
}
if (!userEmail.match(/^([w-.]+@([w-]+.)+[w-]{2,4})?$/)) {
$("#userEmail-info").html("invalid email address.").show();
$("#userEmail").addClass("is-invalid-input");
valid = false;
}
if (subject == "") {
$("#subject-info").html("required.").show();
$("#subject").addClass("is-invalid-input");
valid = false;
}
if (content == "") {
$("#userMessage-info").html("required.").show();
$("#content").addClass("is-invalid-input");
valid = false;
}
if (valid == false) {
$('.error-field').first().focus();
valid = false;
}
return valid;
}
assets/js/extend.js
$(document).foundation();
$(function() {
toggleContainerHeight();
$('.search').bind('click', function(event) {
$(".search-field").toggleClass("expand-search");
$(".contact-form-field").toggleClass("contact-form");
$("label").toggle();
$("#submit-btn").toggle();
toggleContainerHeight();
})
});
function toggleContainerHeight() {
if ($(".search-field").hasClass("expand-search")) {
$("form.search-field").css("height","unset");
} else {
$("form.search-field").css("height","0");
}
}
Skrip pengiriman surat dalam PHP
Skrip PHP ini untuk memanggil penangan layanan pengiriman email ketika pengguna memposting data formulir kontak ke server.
Saat mengirim email, pawang akan mengembalikan respons. Berdasarkan respons ini, skrip ini akan mengatur jenis respons menjadi sukses atau salah.
index.php (kode PHP untuk memanggil layanan email untuk mengirim email)
namespace Phppot;
use PhppotConfig;
require_once ("config/Config.php");
require_once ("lib/MailService.php");
$mailService = new MailService();
if($_SERVER['REQUEST_METHOD'] == 'POST') {
$response = $mailService->sendContactMail($_POST);
if (empty($response)) {
$message = "Hi, we have received your message. Thank you.";
$type = "success";
} else {
$type = "alert";
$message = "Problem in sending email. Try again.";
}
}
?>
Kelas layanan email PHP
Kelas PHP ini memiliki fungsi pengiriman surat. Ini menggunakan fungsi inti PHP mail().
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 di bawah ini menunjukkan output formulir kontak. Ini menampilkan bagaimana gaya kerangka dasar diterapkan untuk mendesain formulir kontak yang responsif.
Tangkapan layar Templat formulir ini memperlihatkan tampilan dan bidang bidang kesalahan. Ini menggunakan kelas kerangka kerja untuk membedakan data bidang yang salah dimasukkan.
Kesimpulan
Artikel ini telah menjelaskan langkah-langkah untuk membuat formulir kontak responsif dengan kerangka kerja front-end Foundation.
Ini telah menciptakan kode contoh sederhana yang dapat dimengerti yang membuat pembaca memulai dengan kerangka kerja front-end yang canggih ini.
Kami telah melihat prosedur integrasi dengan alat manajer paket tertentu. Juga, kita telah melihat sumber CDN dari dependensi kerangka kerja ini.
Semoga Anda menikmati artikel ini dan memperoleh pengetahuan dasar tentang framework UI Foundation. Tetap semangat!
Unduh
Kembali ke Atas
Source link
