ساخت فرم تماس با ما در PHP به همراه فیلدهای سفارشی

در این آموزش PHP قصد داریم به شما نحوه ساخت فرم تماس با ما به همراه فیلدهای سفارشی قابل اضافه توسط کاربر را با PHP و jQuery نشان بدیم.

فرم تماس با ما در یک اپلیکیشن (وب/موبایل) یک بخش مهم برای کاربران به منظور ارتباط با شما است.فرم های تماس با ما (contact) معمولا دارای فیلدهایی مثل عنوان, پیام و بعضی مواقع نام و ایمیل است.

این فیلدها بر اساس نوع اپلیکیشن تحت وب ما متفاوت هستند. به هر حال قصد داریم این بخش فیلدها را بصورت داینامیک قرار بدیم.

در آموزش های قبلی نحوه ساخت فرم تماس با ما در php و همچنین فرم تماس با ما اسلایدی را دیدیم.

در این مثال, یک فرم تماس با ما در PHP را به همراه فیلدهای نام, ایمیل, عنوان و پیام را ساختیم. پر کردن همه این فیلدها ضروری است.و این اعتبارسنجی با jquery انجام شده است.

فیلدهای سفارشی بصورت جفت نام-مقدار هستند. در شروع یک مجموعه از جفت نام – مقدار از فیلدهای ورودی به همراه گزینه “افزودن بیشتر” وجود دارد.

با کلیک روی گزینه “افزودن بیشتر” فیلدهای سفارشی بصورت داینامیک به فرم تماس با ما اضافه می شود.

کد HTML فرم تماس با ما

در این بخش از ساخت فرم تماس با ما, کد HTML برای نمایش فرم تماس با ما به همراه فیلدهای سفارشی را می بینید.

این کد فیلدهای استاندارد فرم تماس با ما مثل نام, ایمیل, عنوان و پیام را نشان به همراه فیلد سفارشی را نشان می دهد.همچنین دکمه افزودن بیشتر نیز وجود دارد.

در این کد, توابع جی کویری برای اعتبارسنجی فیلدهای فرم صدا زده شدند. تمام فیلدها بجز فیلدهای سفارشی توسط تابع جاوااسکریپت اعتبارسنجی می شوند.

دکمه “افزودن بیشتر” توسط تابع addMore() و رویداد کلیک کنترل می شود. این تابع بصورت داینامیک فیلد را در تگ دربرگیرنده فرم اضافه می کند.

<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"></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="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)) {

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

<?php

}

</div>

</form>

</div>

اسکریپت jQuery افزودن بیشتر

کد جی کویری زیر برای افزودن فیلدهای سفارشی به فرم تماس با ما استفاده شده است.

در این اسکریپت, فایل input.php لود می شود. این فایل شامل سورس HTML فیلدهای سفارشی است. نام و مقدار فیلد ها بصورت داینامیک توسط تابع جی کویری لود می شود.

اینجا ما از متد append جی کویری برای قرار دادن محتوای فیلدها استفاده می کنیم.

تابع validateContactForm() نیز تمام فیلدهای فرم بجز فیلدهای سفارشی را اعتبارسنجی می کنید. همینکه مقدار true را برگشت داد, اطلاعات فرم به همراه داده های فیلد سفارشی به سمت php ارسال می شود.

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

سورس HTML فیلدهای سفارشی

کد زیر محتوای فایل input.php را نشان می دهد. این کد شامل فیلدهای ورودی برای جفت نام-مقدار فیلدهای سفارشی است.

این فیلدها مقادیر را بصورت آرایه ای از کاربر ذخیره می کنند.

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

کد PHP ارسال ایمیل فرم تماس با ما

بعد از ارسال موفقیت آمیز داده ها به فایل PHP , این مقادیر دریافت و داخل متغیرها ذخیره می شوند.

در کد زیر نحوه دریافت آرایه custom_name و custom_value را می بینید.

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

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

$name = $_POST["userName"];

$email = $_POST["userEmail"];

$subject = $_POST["subject"];

$emailContent = "<p>You have received new email via Contact Form: </p>";

$emailContent .= "<p><b>Message: </b>" . $_POST["content"] . "</p>";

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

$emailContent .= "<p><u>Custom Information:</u></p>";

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

$emailContent .= "<p>" . $_POST["custom_name"][$k] . ": " . $_POST["custom_value"][$k] . "</p>";

}

$toEmail = "admin@netparadis.com";

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

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

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

$type = "success";

}

اینجا ما از تابع mail() در PHP برای ارسال ایمیل استفاده کردیم.

اگر قصد ارسال ایمیل با SMTP سرور Gmail را دارید می توانید کتابخانه PHPMailer را به پروژه خود اضافه و استفاده کنید.

خروجی – ساخت فرم تماس با ما در PHP به همراه فیلدهای سفارشی

اسکرین شات زیر به شما خروجی ساخت فرم تماس با ما در PHP به همراه فیلدهای سفارشی و گزینه “افزودن بیشتر” را نشان می دهد.

امیدوارم از آموزش ساخت فرم تماس با ما در PHP به همراه فیلدهای سفارشی نهایت استفاده را برده باشید.

برای دانلود سورس کد از باکس دانلود زیر استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.

لغو پاسخ

Abol ۱۹ خرداد ۱۴۰۰

واقعا عالی

پاسخ
حسین صالحی ۱۰ تیر ۱۳۹۸

باسلام خدمت شما. در کد مربوط چه طور میتوان از زبان فارسی استفاده کرد . من تمام تنظیمات در سرور دیتابیس رو فارسی کردم ولی اطلاعات ارسالی از فرم به دیتابیس فارسی ذخیره نمیشود.

پاسخ

حسن شفیعی ۱۰ تیر ۱۳۹۸

سلام. در اینجا ما از دیتابیس استفاده نکردیم.
اگر مشکل ذخیره سازی فارسی رو دارید باید جدول و ستون ها اون روی utf8_persian بزارید و کانکشن دیتابیس خودتون رو نیز utf8 قرار بدید که برای هر دو pdo و mysqli دستورات ست کردن utf8 متفاوت است
برای mysqli :
mysqli_query($conn,"SET CHARACTER SET 'utf8'");
یا mysqli_set_charset($conn,"utf8");

برای PDO :
استرینگ کانکشن : "mysql:host=$host;dbname=$db;charset=utf8"

یا
$db = new PDO("mysql:host=localhost;dbname=$dbname",$username,$password, array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));

موفق باشید.

پاسخ

حسین صالحی ۱۰ تیر ۱۳۹۸

ازتون خیلی ممنونم با کد بالا مشکلم حل شد . سپاس گذارم مرسی

پاسخ
حسن شفیعی ۱۱ تیر ۱۳۹۸

خواهش می کنم. موفق باشید.

پاسخ

ساخت فرم تماس با ما در PHP به همراه فیلدهای سفارشی

کد HTML فرم تماس با ما

اسکریپت jQuery افزودن بیشتر

سورس HTML فیلدهای سفارشی

کد PHP ارسال ایمیل فرم تماس با ما

خروجی – ساخت فرم تماس با ما در PHP به همراه فیلدهای سفارشی

دانـلود باکــس

ساخت فرم تماس با ما اسلایدی با jQuery

ساخت فرم تماس با ما با قابلیت ارسال فایل ضمیمه در php

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه