Cara Membuat Form Contact Custom dengan PHP

Dalam contoh ini, saya telah membuat form kontak PHP dengan input nama, email, subjek dan pesan. Semua field ini harus required oleh pengguna sebelum mengirimkan form. Validasi bidang form dilakukan di sisi klien dengan menggunakan jQuery.

Di bagian ini, ini menunjukkan kode HTML untuk menampilkan form kontak PHP dengan bidang input khusus. Kode ini menunjukkan bidang form kontak standar seperti email, subjek dan pesan dengan input khusus. Ini berisi opsi tambah lagi untuk menambahkan lebih banyak bidang khusus.

Dalam kode di bawah ini, fungsi jQuery dipanggil untuk memvalidasi bidang form. Semua bidang kecuali bidang khusus divalidasi dengan menggunakan fungsi JavaScript. Event klik tombol add-more kontrol dicustom dengan fungsi addMore () jQuery. Fungsi ini secara dinamis memuat bidang input ke container form.

<div class="form-container">
    <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="6"></textarea>
        </div>
        <div id="custom-box">
            <label>Custom Fields</label>
            <div id="custom-input-container">
                <div class="input-row">
                    <input type="text" class="custom-input-field"
                        name="custom_name[]" /> <input type="text"
                        class="custom-input-field float-right"
                        name="custom_value[]" />
                </div>
            </div>
            <input type="button" class="btn-add-more" value="Add More"
                onClick="addMore()" />
        </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>

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

type="text" class="input-field" name="userName"

id="userName" />

</div>

<label>Email</label>

<input type="text" class="input-field" name="userEmail"

id="userEmail" />

</div>

<label>Subject</label>

<input type="text" class="input-field" name="subject"

id="subject" />

</div>

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

class="info">

<textarea name="content" id="content" class="input-field"

cols="60" rows="6"></textarea>

</div>

<label>Custom Fields</label>

<input type="text" class="custom-input-field"

name="custom_name[]" /> <input type="text"

class="custom-input-field float-right"

name="custom_value[]" />

</div>

<input type="button" class="btn-add-more" value="Add More"

onClick="addMore()" />

</div>

<div>

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

value="Send" />

<?php

if (! empty($message)) {

Message'><?php echo $message; ?>

<?php

}

</div>

</form>

</div>

Skrip jQuery untuk Menambahkan Fields Lainnya ke Form Kontak

Di bawah ini skrip jQuery sederhana digunakan untuk menambahkan bidang khusus secara dinamis ke form kontak. Dalam skrip ini, ia memuat file PHP input.php. File ini berisi bidang HTML source kustom. Input nama dan nilai untuk bidang kustom dimuat secara dinamis dengan menggunakan fungsi jQuery. Ia menggunakan fungsi append jQuery untuk menyisipkan konten dinamis ke cintainer bidang khusus.

Script ini juga berisi fungsi validasi form validateContactForm (). Fungsi ini akan memvalidasi semua bidang form kontak kecuali input khusus. Setelah validasi ini mengembalikan true, maka form akan diposting ke PHP dengan data bidang khusus.

<script src="https://code.jquery.com/jquery-2.1.1.min.js"
    type="text/javascript"></script>
<script type="text/javascript">
    function addMore() {
    	   $("<DIV>").load("input.php", function() {
    	      $("#custom-input-container").append($(this).html());
    	   });	
    	}
    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>

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

function addMore() {

$("<DIV>").load("input.php", function() {

$("#custom-input-container").append($(this).html());

});

}

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>

Source HTML untuk Bidang Input Kustom

Ini adalah kode input.php yang akan dimuat secara dinamis ke container form. Kode ini berisi bidang input untuk mendapatkan pasangan nama-nilai bidang kustom. Ini adalah input larik HTML yang berisi array nilai nama khusus yang ditambahkan oleh pengguna.

<div class="input-row">
    <input type="text" class="custom-input-field"
        name="custom_name[]" /> <input type="text"
        class="custom-input-field float-right"
        name="custom_value[]" />
</div>

<input type="text" class="custom-input-field"

name="custom_name[]" /> <input type="text"

class="custom-input-field float-right"

name="custom_value[]" />

</div>

Kode untuk Mengirim Email Form Kontak PHP dengan Custom fields

Setelah memposting formulir kontak pada validasi yang berhasil, nilai-nilai yang diposting diterima di titik akhir PHP. Dalam contoh ini, kode PHP akan menerima data posting untuk nama, email, subjek, pesan, dan array data bidang khusus dengan nama-kustom dan indeks nilai-kustom.

Script di bawah ini menunjukkan cara mendapatkan array data pos nama-kustom dan nilai-kustom untuk mengirim email form kontak PHP. Konten email dibangun dengan menggunakan data form kontak. Fungs PHP email digunakan dalam contoh ini. Jika Anda ingin mengirim email form kontak menggunakan SMTP Gmail maka integrasikan library eksternal seperti PHPMailer dengan aplikasi Anda.

<span class="kwd">if</span><span class="pun">(!</span><span class="pln">empty</span><span class="pun">(</span><span class="pln">$_POST</span><span class="pun">[</span><span class="str">"send"</span><span class="pun">]))</span> <span class="pun">{</span><span class="pln">
    $name </span><span class="pun">=</span><span class="pln"> $_POST</span><span class="pun">[</span><span class="str">"userName"</span><span class="pun">];</span><span class="pln">
    $email </span><span class="pun">=</span><span class="pln"> $_POST</span><span class="pun">[</span><span class="str">"userEmail"</span><span class="pun">];</span><span class="pln">
    $subject </span><span class="pun">=</span><span class="pln"> $_POST</span><span class="pun">[</span><span class="str">"subject"</span><span class="pun">];</span><span class="pln">
    $emailContent </span><span class="pun">=</span> <span class="str">"&lt;p&gt;You have received new email via Contact Form: &lt;/p&gt;"</span><span class="pun">;</span><span class="pln">
    $emailContent </span><span class="pun">.=</span>  <span class="str">"&lt;p&gt;&lt;b&gt;Message: &lt;/b&gt;"</span> <span class="pun">.</span><span class="pln"> $_POST</span><span class="pun">[</span><span class="str">"content"</span><span class="pun">]</span> <span class="pun">.</span> <span class="str">"&lt;/p&gt;"</span><span class="pun">;</span>
    
    <span class="kwd">if</span><span class="pun">(!</span><span class="pln">empty</span><span class="pun">(</span><span class="pln">$_POST</span><span class="pun">[</span><span class="str">"custom_name"</span><span class="pun">][</span><span class="lit">0</span><span class="pun">]))</span> <span class="pun">{</span><span class="pln">
        $emailContent </span><span class="pun">.=</span> <span class="str">"&lt;p&gt;&lt;u&gt;Custom Information:&lt;/u&gt;&lt;/p&gt;"</span><span class="pun">;</span>
        <span class="kwd">foreach</span><span class="pun">(</span><span class="pln">$_POST</span><span class="pun">[</span><span class="str">"custom_name"</span><span class="pun">]</span> <span class="kwd">as</span><span class="pln"> $k</span><span class="pun">=&gt;</span><span class="pln">$v</span><span class="pun">)</span> <span class="pun">{</span><span class="pln">
            $emailContent </span><span class="pun">.=</span>  <span class="str">"&lt;p&gt;"</span> <span class="pun">.</span><span class="pln"> $_POST</span><span class="pun">[</span><span class="str">"custom_name"</span><span class="pun">][</span><span class="pln">$k</span><span class="pun">]</span> <span class="pun">.</span> <span class="str">": "</span> <span class="pun">.</span><span class="pln"> $_POST</span><span class="pun">[</span><span class="str">"custom_value"</span><span class="pun">][</span><span class="pln">$k</span><span class="pun">]</span> <span class="pun">.</span> <span class="str">"&lt;/p&gt;"</span><span class="pun">;</span>
        <span class="pun">}</span>
    <span class="pun">}</span><span class="pln">
    
    $toEmail </span><span class="pun">=</span> <span class="str">"admin@phppot_samples.com"</span><span class="pun">;</span><span class="pln">
    $mailHeaders </span><span class="pun">=</span> <span class="str">"From: "</span> <span class="pun">.</span><span class="pln"> $name </span><span class="pun">.</span> <span class="str">"&lt;"</span><span class="pun">.</span><span class="pln"> $email </span><span class="pun">.</span><span class="str">"&gt;\r\n"</span><span class="pun">;</span>
    <span class="kwd">if</span><span class="pun">(</span><span class="pln">mail</span><span class="pun">(</span><span class="pln">$toEmail</span><span class="pun">,</span><span class="pln"> $subject</span><span class="pun">,</span><span class="pln"> $emailContent</span><span class="pun">,</span><span class="pln"> $mailHeaders</span><span class="pun">))</span> <span class="pun">{</span><span class="pln">
        $message </span><span class="pun">=</span> <span class="str">"Your contact information is received successfully."</span><span class="pun">;</span><span class="pln">
        $type </span><span class="pun">=</span> <span class="str">"success"</span><span class="pun">;</span>
    <span class="pun">}</span>
<span class="pun">}</span>

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

$name = $_POST["userName"];

$email = $_POST["userEmail"];

$subject = $_POST["subject"];

$emailContent = "You have received new email via Contact Form: ";

$emailContent .= "Message: " . $_POST["content"] . "";

if(!empty($_POST["custom_name"][0])) {

$emailContent .= "Custom Information:";

foreach($_POST["custom_name"] as $k=>$v) {

$emailContent .= "" . $_POST["custom_name"][$k] . ": " . $_POST["custom_value"][$k] . "";

}

}

$toEmail = "admin@phppot_samples.com";

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

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

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

$type = "success";

}

Output Cara Membuat Form Contact Custom dengan PHP

Oke itulah tadi pembahasan saya tentang Cara Membuat Form Contact Custom dengan PHP, semoga bermanfaat.

Cara Membuat Form Contact Custom dengan PHP

Facebook DUMET School

Konsultasi Gratis

Categories