PHP

Formulir Kontak HTML Dua Kolom Responsif dengan Dukungan PHP Mailing

Posted on by administrator
18
Jun
0
(0)

oleh Vincy. Terakhir diubah pada 31 Mei 2021.

Formulir kontak adalah komponen ideal situs web yang menghubungkan pelanggan dan pemilik. Umpan balik, pertanyaan, dan semua tujuan serupa dapat diselesaikan dengan formulir kontak HTML sederhana. Ini menyediakan media untuk interaksi pelanggan.

Antarmuka formulir kontak HTML memberikan nilai tambah ke situs web. Ini membantu untuk meningkatkan konversi. Kami telah melihat banyak contoh formulir kontak di PHP dengan kerangka UI sederhana hingga kompleks.

Artikel ini mencantumkan faktor yang memperkaya UI formulir kontak. Faktor-faktor tersebut akan menciptakan media lengkap yang membawa pelanggan ke situs web Anda.

Daftar ini mencakup praktik desain terbaik dalam membuat formulir kontak HTML dan dukungan pengiriman surat. Kode contoh adalah untuk membuat formulir kontak dasar dengan desain kerangka. Itu mampu berintegrasi dengan situs web langsung tanpa memiliki penyesuaian besar.

Mari kita lihat lebih lanjut tentang membuat formulir kontak HTML responsif dengan kode contoh yang mudah.

Formulir Kontak HTML

Apa yang ada di dalam?

  1. Tentang contoh ini
  2. Hal-hal yang perlu diingat saat mengembangkan formulir kontak
  3. Buat formulir kontak HTML khusus
  4. Validasi formulir menggunakan JavaScript
  5. Dukungan surat PHP
  6. Output – formulir kontak HTML

Tentang contoh ini

Kode contoh ini membuat formulir kontak HTML dengan beberapa bidang yang sering digunakan. Itu adalah nama pelanggan, email, telepon, subjek dan pesan.

UI formulir dengan templat dua kolom yang menampilkan dua bidang berturut-turut. Saya menggunakan templat dua kolom ini untuk menghindari gulir vertikal.

Jika Anda memiliki sangat sedikit bidang, satu kolom selalu lebih disukai. Dalam tampilan seluler, ini menampilkan formulir kontak HTML dengan templat satu kolom.

Kode ini membuat formulir interaktif yang menunjukkan bidang dependen berdasarkan pilihan. Ini memiliki logika backend rutin dengan fungsi PHP mail(). Ini menggunakan file template email untuk membangun konten isi HTML untuk email kontak.

Ini menggunakan jQuery untuk menangani validasi sisi klien dasar pada bidang formulir. Struktur file di bawah ini menampilkan implementasi sederhana dari formulir kontak HTML. Ini menunjukkan aset yang digunakan untuk UI formulir dan kode PHP backend yang dibuat untuk skrip surat.

File Formulir Kontak HTML

  1. Daya tanggap – Ini adalah kebutuhan minimal untuk tata letak apa pun agar sesuai dengan semua ukuran viewport. Google menggunakan tampilan seluler situs web untuk pengindeksan dan peringkat.
  2. Sederhana dan kurang dapat digulir untuk meminimalkan upaya untuk mengirimkan data.
  3. Struktur rangka agar sesuai dengan tata letak atau tema situs web apa pun.
  4. Desain dengan pemilih CSS yang unik untuk menghindari penggantian dengan gaya yang ada.
  5. Validasi dan sanitasi untuk menyaring data pengguna sebelum diproses.
  6. Perlindungan anti CSRF untuk memeriksa terhadap upaya jahat.
  7. Pra-populasi bidang yang dimasukkan pada kegagalan untuk menyimpan upaya masuk kembali.
  8. Intuitif formulir memungkinkan pengguna untuk mengalami antarmuka yang ramah. Itu membuatnya mudah untuk mengisi formulir tanpa pedoman.
  9. Interaksi – perubahan pada formulir UI berdasarkan data pengguna. Misalnya: dropdown tergantung negara-negara.
  10. Dapat beradaptasi dengan plugin kerangka kerja front-end populer seperti Bootstrap, Tailwind, dan lainnya.

Kode ini menunjukkan markup yang dibuat untuk menampilkan formulir kontak HTML kepada pengguna. Ini memiliki CSS dan JavaScript khusus untuk menjaga tampilan dan nuansa UI dan validasi sisi klien.

HTML ini menunjukkan beberapa bidang formulir kontak dasar. Diperlukan untuk memasukkan nama pada dua bidang Nama Depan dan Nama Belakang.

Kemudian, formulir memiliki opsi radio tetap untuk memilih Subjek kontak. Jika opsi yang tersedia tidak sesuai, ini memungkinkan pengguna untuk memilih Lainnya pilihan.

Saat mengklik Lainnya pilihan, formulir akan menampilkan kotak teks untuk memasukkan nilai kustom.

index.php (Template HTML)

<html>
<head>
<title>HTML Contact Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://phppot.com/php/responsive-two-column-html-contact-form-with-php-mailing-support/assets/css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <div class="form-container">
        <h1 class="text-center">HTML Contact Form</h1>
        <form name="frmContact" id="" frmContact"" method="post"
            action="" enctype="multipart/form-data"
            onsubmit="return validateContactForm()">
            <div class="row">
                <div class="inline-block right-margin">
                    <div class="label">
                        First Name <span id="firstName-info"
                            class="info"></span>
                    </div>
                    <input type="text" class="input-field"
                        name="contact-first-name"
                        id="contact-first-name" />
                </div>
                <div class="inline-block responsive">
                    <div class="label">
                        Last Name <span id="lastName-info" class="info"></span>
                    </div>
                    <input type="text" class="input-field"
                        name="contact-last-name" id="contact-last-name" />
                </div>
            </div>
            <div class="row">
                <div class="inline-block right-margin">
                    <div class="label">
                        Email <span id="email-info" class="info"></span>
                    </div>
                    <input type="text" class="input-field"
                        name="contact-email" id="contact-email" />
                </div>
                <div class="inline-block responsive">
                    <div class="label">
                        Phone <span id="phone-info" class="info"></span>
                    </div>
                    <input type="text" class="input-field"
                        name="contact-phone" id="contact-phone" />
                </div>
            </div>
            <div class="row">
                <div class="inline-block right-margin">
                    <div class="label">
                        Subject <span id="subject-info" class="info"></span>
                    </div>
                    <div class="input-field-radio">
                        <div>
                            <input type="radio" name="contact-subject"
                                class="subject-option" id="subject1"
                                value="project-enquiry" />Project
                            Enquiry
                        </div>
                        <div>
                            <input type="radio" name="contact-subject"
                                class="subject-option" id="subject2"
                                value="feedback" />Feedback
                        </div>
                        <div>
                            <input type="radio" name="contact-subject"
                                class="subject-option" id="subject3"
                                value="others" />Others
                            <div id="other-subject">
                                <input type="text" class="input-field"
                                    name="contact-other-subject" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="inline-block responsive">
                    <div class="label">
                        Message <span id="message-info" class="info"></span>
                    </div>
                    <textarea name="contact-message"
                        id="contact-message" class="input-field"
                        cols="60" rows="6"></textarea>
                </div>
            </div>
            <div class="row">
                <input type="submit" name="send" class="btn-submit"
                    value="Send" />
            </div>
            <div class="row">
                <div id="statusMessage">
                        <?php
                        if (! empty($message)) {
                            ?>
                            <p class="<?php echo $type; ?>Message"><?php echo $message; ?></p>
                        <?php
                        }
                        ?>
                    </div>
            </div>
        </form>
    </div>
    <script type="text/javascript"
        src="vendor/jquery/jquery-3.2.1.min.js"></script>
    <script src="assets/js/form.js" type="text/javascript"></script>
</body>
</html>

CSS di bawah ini untuk templat formulir kontak HTML dua kolom. Ini berisi kueri media untuk menjaga template tetap responsif untuk berbagai viewport.

Ada banyak hal yang harus dipelajari tentang mendesain halaman web dengan responsivitas agar lancar untuk ukuran viewport apa pun.

assets/css/style.css

body {
    font-family: Arial;
}

.form-container {
    border: #91949d 1px solid;
    border-radius: 3px;
    -webkit-font-smoothing: antialiased;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: .9em;
    color: #1e2a28;
    width: 740px;
    margin: 0 auto;
    padding: 12px 12px 0px 36px;
}

.label {
    color: #75726c;
}

.input-field {
    width: 340px;
    border-radius: 3px;
    padding: 10px;
    border: #91949d 1px solid;
    box-sizing: border-box;
    margin: 5px 10px 0px 0px;
}

.btn-submit {
    width: 340px;
    padding: 10px 60px;
    background: #555454;
    border: #464646 1px solid;
    color: #ffffff;
    font-size: 0.9em;
    border-radius: 2px;
    cursor: pointer;
}

.errorMessage {
    background-color: #e66262;
    border: #AA4502 1px solid;
    padding: 8px 10px;
    color: #FFFFFF;
    border-radius: 3px;
}

.successMessage {
    background-color: #9fd2a1;
    border: #91bf93 1px solid;
    padding: 8px 10px;
    color: #3d503d;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9em;
}

.info {
    font-size: .8em;
    color: #e66262;
    letter-spacing: 2px;
    padding-left: 5px;
}

.row {
    margin: 18px 0;
    display: flex;
}

.right-margin {
    margin-right: 25px;
}

.inline-block {
    display: inline-block;
}

.input-field-radio {
    width: 350px;
    margin-top: 5px;
}

.error-field {
    border: 1px solid #d96557;
}

#other-subject {
    display: none;
}

.subject-option {
    margin-bottom: 8px;
    margin: 4px 10px 6px 0px;
}

.text-center {
    text-align: center;
}

@media only screen and (max-width: 760px) {
    .form-container {
        width: 500px;
    }
    .row {
        margin: 18px 0;
        display: flex;
    }
    .input-field {
        width: 200px;
    }
    .input-field-radio {
        width: 210px;
    }
    .btn-submit {
        width: 200px;
    }
}

@media only screen and (max-width: 500px) {
    .form-container {
        width: 300px;
    }
    .row {
        margin: 10px;
        display: inline-block;
    }
    .input-field {
        width: 280px;
    }
    .btn-submit {
        width: 280px;
    }
    .responsive {
        margin-top: 20px;
    }
}

Kode JavaScript untuk validasi dan interaksi UI

Script ini memiliki fungsi dan event handler untuk mengatur tindakan pengiriman formulir. Sebelumnya, kita telah melihat kode contoh untuk mencegah tindakan pengiriman ganda menggunakan JavaScript.

Itu validasiContactForm() fungsi memvalidasi bidang formulir kontak HTML. Ini memeriksa apakah semua bidang tidak kosong. Juga, ia menggunakan regex untuk memvalidasi format data bidang email.

Ini menyoroti elemen formulir dan memberi tahu pengguna di akhir validasi. Ini menggunakan jQuery .css() dan tambahkan/hapus metode kelas untuk menyorot bidang validasi.

Kemudian, ia memiliki pengendali acara untuk mengaktifkan bidang subjek khusus berdasarkan interaksi pengguna. Jika pengguna ingin menambahkan subjek baru selain opsi yang ditampilkan dalam formulir kontak HTML, pengendali acara ini akan membantu.

Dengan mengacu pada kelas elemen radio, ia menangani acara saat diklik untuk menyembunyikan dan menampilkan input formulir. Jika pengguna memilih opsi ke-3 Lainnya, ini menampilkan bidang input tambahan untuk memasukkan nilai khusus.

assets/js/form.js

function validateContactForm() {
	var valid = true;
	$(".info").html("");
	$(".input-field").css('border', '#e0dfdf 1px solid');
	$("#contact-first-name").removeClass("error-field");
	$("#contact-last-name").removeClass("error-field");
	$("#contact-email").removeClass("error-field");
	$("#contact-phone").removeClass("error-field");
	$("#contact-message").removeClass("error-field");

	var firstName = $("#contact-first-name").val();
	var lastName = $("#contact-last-name").val();
	var email = $("#contact-email").val();
	var phone = $("#contact-phone").val();
	var message = $("#contact-message").val();

	if (firstName == "") {
		$("#firstName-info").html("Required.");
		$("#contact-first-name").css('border', '#e66262 1px solid');
		$("#contact-first-name").addClass("error-field");
		valid = false;
	}
	if (lastName == "") {
		$("#lastName-info").html("Required.");
		$("#contact-last-name").css('border', '#e66262 1px solid');
		$("#contact-last-name").addClass("error-field");
		valid = false;
	}
	if (email == "") {
		$("#email-info").html("Required.");
		$("#contact-email").css('border', '#e66262 1px solid');
		$("#contact-email").addClass("error-field");
		valid = false;
	}
	if (!email.match(/^([w-.]+@([w-]+.)+[w-]{2,4})?$/)) {
		$("#email-info").html("Invalid Email Address.");
		$("#contact-email").css('border', '#e66262 1px solid');
		$("#contact-email").addClass("error-field");
		valid = false;
	}
	if (phone == "") {
		$("#phone-info").html("Required.");
		$("#contact-phone").css('border', '#e66262 1px solid');
		$("#contact-phone").addClass("error-field");
		valid = false;
	}
	if ($('input[name="contact-subject"]:checked').length == 0) {
		$("#subject-info").html("Required.");
		valid = false;
	}
	if (message == "") {
		$("#message-info").html("Required.");
		$("#contact-message").css('border', '#e66262 1px solid');
		$("#contact-message").addClass("error-field");
		valid = false;
	}
	if (valid == false) {
		$('.error-field').first().focus();
	}
	return valid;
}

$(document).ready(function () {
	$(".subject-option").click(function () {
    	if($(this).val() == "others") {
			$("#other-subject").show();
		} else {
			$("#other-subject").hide();
		}
    });
});

Dukungan surat PHP

Kode PHP ini menggunakan fungsi surat sederhana untuk mendukung pengiriman email kontak. Menggunakan perpustakaan mailer tingkat lanjut, kita dapat memiliki rentang yang luas dengan banyak fitur untuk mengirim email.

Saya telah menggunakan PhpMailer dalam contoh lain untuk mengirim email melalui SMTP. Ini adalah perpustakaan terbaik yang mendukung pengiriman email di sisi server.

index.php

<?php
use PhppotMailService;

if (! empty($_POST["send"])) {
    require_once __DIR__ . '/lib/MailService.php';
    $mailService = new MailService();
    $response = $mailService->sendContactMail($_POST);
    if (! empty($response)) {
        $message = $response["message"];
        $type = $response["type"];
    }
}
?>

Kelas MailService ini memiliki fungsi yang memanggil fungsi PHP mail(). Ini menyiapkan header email, isi, dan params lain yang diperlukan sebelum mengirim email.

Isi isi secara dinamis disiapkan dengan data yang diposting oleh formulir kontak HTML. Setel email admin untuk $ke email variabel ke mana harus mengirim email kontak.

Ini merespons dengan array dengan teks dan tipe respons untuk mengakui pengguna.

lib/MailService.php

<?php
namespace Phppot;

class MailService
{

    function sendContactMail($postValues)
    {
        $name = $postValues["contact-first-name"] . " " . $postValues["contact-last-name"];
        $email = $postValues["contact-email"];
        $fname = $postValues["contact-first-name"];
        $lname = $postValues["contact-last-name"];
        $phone = $postValues["contact-phone"];
        $message = $postValues["contact-message"];
        if ($postValues["contact-subject"] == "others") {
            $subject = $postValues["contact-other-subject"];
        } else {
            $subject = $postValues["contact-subject"];
        }
        require_once __DIR__ . '/../template/contact-email.php';
        $content = getHTMLAcknowledgementMessage($fname, $lname, $email, $phone, $message);
        $toEmail = "SET ADMIN EMAIL HERE";
        $mailHeaders = "MIME-Version: 1.0rn";
        $mailHeaders .= "Content-type: text/html; charset=UTF-8rn";
        $mailHeaders .= "From: " . $name . "<" . $email . ">rn";

        if (mail($toEmail, $subject, $content, $mailHeaders)) {
            $response = array(
                "message" => "Hi, Thank you for the message.",
                "type" => "success"
            );
        } else {
            $response = array(
                "message" => "Problem in sending email",
                "type" => "error"
            );
        }
        return $response;
    }
}
?>

Kami telah melihat tangkapan layar formulir kontak HTML di awal artikel ini.

Pesan tanggapan di bawah ini untuk memberi tahu pengguna setelah pengiriman email. Di PHP, ia memproses data formulir kontak HTML dan mengembalikan respons ini. Dalam artikel sebelumnya, saya telah memberikan kode untuk menetapkan batas waktu untuk memudarkan pesan respons.

Tanggapan Formulir Kontak saat Kirim

Kesimpulan

Jadi, kami telah membangun formulir kontak HTML dengan dukungan surat PHP. Kami telah melihat implementasi yang sangat mendasar. Kami telah melihat bahwa skalabel untuk menyesuaikan berdasarkan kebutuhan tergantung pada tujuan aplikasi.

Saya harap ini mencakup faktor-faktor utama yang harus diingat saat merancang formulir kontak HTML. Daftar ini akan membantu untuk meningkatkan kode contoh ini lebih lanjut.

Ada contoh yang telah kita lihat untuk membuat formulir kontak yang mendukung AJAX. Semua contoh memiliki blok kode independen untuk dilepas dan digunakan kembali.
Unduh

Kembali ke Atas


Source link

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

administrator