Cara Menampilkan PHP Sticky Form Kontak menggunakan CSS

Untuk memberikan cara yang lebih mudah bagi pengguna untuk menghubungi Anda, form kontak sticky PHP akan berguna dengan membuatÂ halaman sticky web. Umumnya, komponen yang sticky pada situs web akan menampilkan konten yang membutuhkan visibilitas tertinggi. Misalnya, menu navigasi,up down vote controls, social share icon dan banyak lagi.

Dalam contoh ini, kita hanya akan menggunakan CSS untuk membuat form kontak PHP sebagai elemen sticky pada halaman web. Sebuah halaman web dua kolom berisi form kontak sticky di sidebar kanannya. Sebuah stylesheet eksternal dengan kombinasi pemilih CSS mendorong tampilan sticky dari form kontak. Formulir kontak dalam contoh ini ditangani dengan validasi JavaScript dan skrip pengiriman email yang tepat. Meskipun kode ini dibuat untuk pembelajaran UI, saya telah menambahkan form kontak yang berfungsi untuk kode ini.

Dua Kolom HTML Laman Web dengan Form Kontak sticky Kode HTML ini digunakan untuk menampilkan templat dua kolom. Form kontak sticky ditambahkan ke sidebar kanan. Kolom kiri akan menampilkan konten utama. Style.css yang disertakan dalam HTML ini mendorong kelekatan bentuk kontak. Di bagian ini, saya telah menambahkan skrip validasi yang digunakan untuk menangani validasi kolom formÂ kontak saat dikirim.

<html>
<head>
<title>Sticky Contact Form</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div class="demo-wrapper">
        <div class="main-col">
            <!-- Add some sample content here -->

        </div>


        <div class="contact-sidebar">
            <form name="frmContact" id="frmContact" method="post"
                action="" enctype="multipart/form-data"
                onsubmit="return validateContactForm()">

                <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>Email</label> <span id="userEmail-info"
                        class="info"></span><br /> <input type="text"
                        class="input-field" name="userEmail"
                        id="userEmail" />
                </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="content" id="content"
                        class="input-field" cols="60" rows="3"></textarea>
                </div>
                <div>
                    <input type="submit" name="send" class="btn-submit"
                        value="Send" />

                    <div id="statusMessage"> 
                        <?php
                        if (! empty($message)) {
                            ?>
                            <p class='<?php echo $type; ?>Message'><?php echo $message; ?></p>
                        <?php
                        }
                        ?>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        function validateContactForm() {
            var valid = true;

            $(".info").html("");
            $(".input-field").css('border', '#e0dfdf 1px solid');
            var userName = $("#userName").val();
            var userEmail = $("#userEmail").val();
            var subject = $("#subject").val();
            var content = $("#content").val();
            
            if (userName == "") {
                $("#userName-info").html("Required.");
                $("#userName").css('border', '#e66262 1px solid');
                valid = false;
            }
            if (userEmail == "") {
                $("#userEmail-info").html("Required.");
                $("#userEmail").css('border', '#e66262 1px solid');
                valid = false;
            }
            if (!userEmail.match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/))
            {
                $("#userEmail-info").html("Invalid Email Address.");
                $("#userEmail").css('border', '#e66262 1px solid');
                valid = false;
            }

            if (subject == "") {
                $("#subject-info").html("Required.");
                $("#subject").css('border', '#e66262 1px solid');
                valid = false;
            }
            if (content == "") {
                $("#userMessage-info").html("Required.");
                $("#content").css('border', '#e66262 1px solid');
                valid = false;
            }
            return valid;
        }
</script>
</body>
</html>

100

101

102

103

<html>

<head>

<title>Sticky Contact Form</title>

</head>

<body>

</div>

<form name="frmContact" id="frmContact" method="post"

action="" enctype="multipart/form-data"

onsubmit="return validateContactForm()">

<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>

<label>Email</label> <span id="userEmail-info"

class="info"></span><br /> <input type="text"

class="input-field" name="userEmail"

id="userEmail" />

</div>

<label>Subject</label> <span id="subject-info"

class="info"></span><br /> <input type="text"

class="input-field" name="subject" id="subject" />

</div>

<label>Message</label> <span id="userMessage-info"

class="info"></span><br />

<textarea name="content" id="content"

class="input-field" cols="60" rows="3"></textarea>

</div>

<div>

<input type="submit" name="send" class="btn-submit"

value="Send" />

<?php

if (! empty($message)) {

<p class='<?php echo $type; ?>Message'><?php echo $message; ?></p>

<?php

}

</div>

</form>

</div>

type="text/javascript"></script>

function validateContactForm() {

var valid = true;

$(".info").html("");

$(".input-field").css('border', '#e0dfdf 1px solid');

var userName = $("#userName").val();

var userEmail = $("#userEmail").val();

var subject = $("#subject").val();

var content = $("#content").val();

if (userName == "") {

$("#userName-info").html("Required.");

$("#userName").css('border', '#e66262 1px solid');

valid = false;

}

if (userEmail == "") {

$("#userEmail-info").html("Required.");

$("#userEmail").css('border', '#e66262 1px solid');

valid = false;

}

if (!userEmail.match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/))

{

$("#userEmail-info").html("Invalid Email Address.");

$("#userEmail").css('border', '#e66262 1px solid');

valid = false;

}

if (subject == "") {

$("#subject-info").html("Required.");

$("#subject").css('border', '#e66262 1px solid');

valid = false;

}

if (content == "") {

$("#userMessage-info").html("Required.");

$("#content").css('border', '#e66262 1px solid');

valid = false;

}

return valid;

}

</script>

</body>

</html>

CSS untuk form Contact

Ini adalah CSS yang ditambahkan ke halaman web dua kolom. File style.css berisi style untuk mendesain halaman web dua kolom dengan form kontak di sidebar-nya. Ini juga termasuk style untuk membuat container form kontak sebagai elemen sticky pada halaman scroll.

body {
    font-family: Arial;
    color: #212121;
}

.input-row {
    margin-bottom: 20px;
}

.input-row label {
    color: #75726c;
}

.input-field {
    width: 100%;
    border-radius: 2px;
    padding: 10px;
    border: #e0dfdf 1px solid;
    box-sizing: border-box;
    margin-top: 2px;
}

.btn-submit {
    padding: 10px 60px;
    background: #9e9a91;
    border: #8c8880 1px solid;
    color: #ffffff;
    font-size: 0.9em;
    border-radius: 2px;
    cursor: pointer;
}

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

.demo-wrapper {
    justify-content: space-between;
    max-width: 900px;
    margin: 0 auto;
    height: 500px;
    overflow: auto;
    padding: 10px 20px;
}

.main-col {
    float: left;
    flex-direction: column;
    padding: 15px;
    background-color: #fff;
    width: 60%;
}

.contact-sidebar {
    position: sticky;
    top: 25px;
    border: #e2ddd2 1px solid;
    border-radius: 2px;
    padding: 15px;
    background-color: #fff;
    float: right;
    width: 30%;
}.successMessage {
    background-color: #9fd2a1;
    border: #91bf93 1px solid;
    padding: 5px 10px;
    color: #3d503d;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9em;
}

body {

font-family: Arial;

color: #212121;

}

.input-row {

margin-bottom: 20px;

}

.input-row label {

color: #75726c;

}

.input-field {

width: 100%;

border-radius: 2px;

padding: 10px;

border: #e0dfdf 1px solid;

box-sizing: border-box;

margin-top: 2px;

}

.btn-submit {

padding: 10px 60px;

background: #9e9a91;

border: #8c8880 1px solid;

color: #ffffff;

font-size: 0.9em;

border-radius: 2px;

cursor: pointer;

}

.info {

font-size: .8em;

color: #e66262;

letter-spacing: 2px;

padding-left: 5px;

}

.demo-wrapper {

justify-content: space-between;

max-width: 900px;

margin: 0 auto;

height: 500px;

overflow: auto;

padding: 10px 20px;

}

.main-col {

float: left;

flex-direction: column;

padding: 15px;

background-color: #fff;

width: 60%;

}

.contact-sidebar {

position: sticky;

top: 25px;

border: #e2ddd2 1px solid;

border-radius: 2px;

padding: 15px;

background-color: #fff;

float: right;

width: 30%;

}.successMessage {

background-color: #9fd2a1;

border: #91bf93 1px solid;

padding: 5px 10px;

color: #3d503d;

border-radius: 3px;

cursor: pointer;

font-size: 0.9em;

}

Berikut script untuk Mail Sending

Saat mengirimkan formulir kontak, data formulir diposting ke PHP. Dalam kode PHP, ia menerima data kontak dan mengirimkannya melalui email. Dalam tutorial sebelumnya, kami telah melihat cara mengirim data kontak dengan lampiran. Dalam kode PHP ini, saya telah menggunakan fungsi PHP in-built mail () untuk mengirim surat kontak. Jika Anda mencari skrip pengiriman email menggunakan Gmail SMTP, artikel terkait memiliki kode.

<?php
if(!empty($_POST["send"])) {
	$name = $_POST["userName"];
	$email = $_POST["userEmail"];
	$subject = $_POST["subject"];
	$content = $_POST["content"];

	$toEmail = "test_mail@gmail.com";
	$mailHeaders = "From: " . $name . "<". $email .">\r\n";
	if(mail($toEmail, $subject, $content, $mailHeaders)) {
	    $message = "Your contact information is received successfully.";
	    $type = "success";
	}
}
require_once "contact-view.php";
?>

<?php

if(!empty($_POST["send"])) {

$name = $_POST["userName"];

$email = $_POST["userEmail"];

$subject = $_POST["subject"];

$content = $_POST["content"];

$toEmail = "test_mail@gmail.com";

$mailHeaders = "From: " . $name . "<". $email .">\r\n";

if(mail($toEmail, $subject, $content, $mailHeaders)) {

$message = "Your contact information is received successfully.";

$type = "success";

}

require_once "contact-view.php";

screenshot berikut menunjukkan hasil dari script di atas,

Oke itulah tadi pembahasan saya tentang Cara Menampilkan PHP Sticky Form Kontak menggunakan CSS semoga bermanfaat.

Cara Menampilkan PHP Sticky Form Kontak menggunakan CSS

Facebook DUMET School

Konsultasi Gratis

Categories