نحوه ساخت فرم تماس با ما بدون افزونه

<?php
/*
Template Name: نام قالب
*/
?>

در این جا باید چارچوب کلی و قالب بندی صفحه تماس با ما را مشخص کنید که برای این کار می توان از کد زیر بهره گرفت .

<?php get_header() ?>

<div id=”container”>
<div id=”content”>
<?php the_post() ?>
<div id=”post-<?php the_ID() ?>”>
<div>
</div><!– .entry-content ->
</div><!– .post–>
</div><!– #content –>
</div><!– #container –>

<?php get_sidebar() ?>
<?php get_footer() ?>

ساخت فرم

حال زمان ایجاد فرم تماس با ما در وردپرس رسیده است . شما می توانید یک فرم ساده را در همین فایل و داخل div که به محتوا مربوط می شود ، قرار دهید . با استفاده از کد های زیر می توانید یک فرم را در صفحه ی تماس با ما خود ایجاد کنید .

<?php get_header(); ?>
<div id=”container”>
<div id=”content”>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id=”post-<?php the_ID(); ?>”>
<h1><?php the_title(); ?></h1>
<div>
<?php if(isset($emailSent) && $emailSent == true) { ?>
<div>
<p>با تشکر، ایمیل شما با موفقیت ارسال شد</p>
</div>
<?php } else { ?>
<?php the_content(); ?>
<?php if(isset($hasError) || isset($captchaError)) { ?>
<p>متاسفم، خطایی رخ داده است لطفا مجددا سعی نمایید<p>
<?php } ?>

<form action=”<?php the_permalink(); ?>” id=”contactForm” method=”post”>
<ul>
<li>
<label for=”contactName”>نام شما:</label>
<input type=”text” name=”contactName” id=”contactName” value=”<?php if(isset($_POST[‘contactName’])) echo $_POST[‘contactName’];?>” />
<?php if($nameError != ”) { ?>
<span><?=$nameError;?></span>
<?php } ?>
</li>

<li>
<label for=”email”>ایمیل شما:</label>
<input type=”text” name=”email” id=”email” value=”<?php if(isset($_POST[’email’])) echo $_POST[’email’];?>” />
<?php if($emailError != ”) { ?>
<span><?=$emailError;?></span>
<?php } ?>
</li>

<li><label for=”commentsText”>پیغام:</label>
<textarea name=”comments” id=”commentsText” rows=”۲۰″ cols=”۳۰″><?php if(isset($_POST[‘comments’])) { if(function_exists(‘stripslashes’)) { echo stripslashes($_POST[‘comments’]); } else { echo $_POST[‘comments’]; } } ?></textarea>
<?php if($commentError != ”) { ?>
<span><?=$commentError;?></span>
<?php } ?>
</li>

<li>
<input type=”submit” value=”ارسال ایمیل”></input>
</li>
</ul>
<input type=”hidden” name=”submitted” id=”submitted” value=”ارسال ایمیل” />
</form>
<?php } ?>
</div><!– .entry-content –>
</div><!– .post –>

<?php endwhile; endif; ?>
</div><!– #content –>
</div><!– #container –>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

قرار دادن کدهای پردازش فرم

تا به اینجا ما فرم را ایجاد کرده ایم ولی مطمئنا این کد کار نخواهد کرد پس برای کار کردن فرم باید این کار را نیز انجام داد ، علاوه بر این مرحله باید دکمه ارسال یا submit  را نیز تعبیه نمایید به طوری که کاربر در زمانی که بر روی دکمه کلیک می کند محتویات فرم به ایمیل ادمین وارد شود .

<?php
/*فرم تماس با ما
*/
?>

<?php
if(isset($_POST[‘submitted’])) {
if(trim($_POST[‘contactName’]) === ”) {
$nameError = ‘لطفا نام خود را وارد نمایید’;
$hasError = true;
} else {
$name = trim($_POST[‘contactName’]);
}

if(trim($_POST[’email’]) === ”) {
$emailError = ‘لطفا آدرس ایمیل خود را وارد نمایید.’;
$hasError = true;
} else if (!preg_match(“/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i”, trim($_POST[’email’]))) {
$emailError = ‘آدرس ایمیل وارد شده صحیح نمی باشد’;
$hasError = true;
} else {
$email = trim($_POST[’email’]);
}

if(trim($_POST[‘comments’]) === ”) {
$commentError = ‘لطفا پیغام خود را وارد نمایید’;
$hasError = true;
} else {
if(function_exists(‘stripslashes’)) {
$comments = stripslashes(trim($_POST[‘comments’]));
} else {
$comments = trim($_POST[‘comments’]);
}
}

if(!isset($hasError)) {
$emailTo = get_option(‘tz_email’);
if (!isset($emailTo) || ($emailTo == ”) ){
$emailTo = get_option(‘admin_email’);
}
$subject = ‘یک پیغام از طرف ‘.$name;
$body = “نام فرستنده: $name \n\nایمیل نویسنده: $email \n\nپیغام: $comments”;
$headers = ‘From: ‘.$name.’ <‘.$emailTo.’>’ . “\r\n” . ‘Reply-To: ‘ . $email;

wp_mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}

} ?>

ساخت فرم تماس با ما ، با PHP و Ajax

شما به راحتی می توانید با زبان PHP  و تکنولوژی Ajax یک فرم تماس با ما ساده و زیبا را ایجاد کنید . همه ی ما می دانیم که برای ارسال محتویات فرم به اسکریپت پردازش گر ارسال ایمیل PHP  بعد از آنکه بر روی دکمه ارسال کلیک کردید ، صفحه ی مرور گر نیاز به بارگذاری مجدد دارد . در واقع صفحه فرم تماس با ما دوباره بارگذاری می شود تا نتیجه عملیات نمایش داده شود ولی به طور کلی کاربران تمایل زیادی به بارگذاری اجباری و مجدد یک صفحه ندارند پس بهتر است از روشی استفاده شود که منطقی تر و دارای تاثیر مثبت باشد .

مراحل ساخت فرم تماس با ما و ارسال به ایمیل با PHP و Ajax

ما برای انجام این کار و ساخت فرم تماس با ما با تکنولوژی Ajax ما از فریم ورک JQuery استفاده می کنیم.

کدهای HTML

یک فرم ایجاد کرده و نام آن را contactform.html قرار داده ایم و کد های زیر را درون آن قرار می دهیم . در کد همانگونه که مشاهده می کنید در فیلد input به جای استفاده از submit  از button استفاده شده است تا در هنگام کلیک بر روی دکمه ، ارسال به طور خودکار انجام شده و نیازی به بارگذاری مجدد صفحه نیست تا بتوان از دستورات JQuery  بهره ببریم .

<form id=“contactform” action=“” method=“post”>
    <label>Name:</label><input id=“name” type=“text” name=“name” />
    <label>Email:</label><input id=“email” type=“text” name=“email” />
    <label>Message:</label><textarea id=“message” name=“message”></textarea>
    <input id=“submit” type=“button” value=“send” />
    <div id=“success” style=“color: red;”></div>
</form>

کدهای PHP

کد های زیر را در فایل sendemail.php قرار دهید این کد ها همانند یک فرم ارسال ساده می باشد تنها با این تفاوت که در انتها عملیات را چاپ می کند .

// Here we get all the information from the fields sent over by the form.
$name = $_POST[‘name’];
$email = $_POST[’email’];
$message = $_POST[‘message’];
$to = ‘youremail@domain.com’;
$subject = ‘the subject’;
$message = ‘FROM: ‘.$name.‘ Email: ‘.$email.‘Message: ‘.$message;
$headers = ‘From: youremail@domain.com’ . “\r\n”;
if (filter_var($email, FILTER_VALIDATE_EMAIL)) { // this line checks that we have a valid email address
mail($to, $subject, $message, $headers); //This method sends the mail.
echo “Your email was sent!”; // success message
}else{
echo “Invalid Email, please provide an correct email.”;
}

کدهای  jQuery

کد های عملیات JQuery به صورت زیر می باشد . کدی که در زیر مشاهده می کنید به وسیله ی کلیک بر روی دکمه ، ارسال را تشخیص داده و اطلاعات فرم را به صورت تکنولوژی Ajax به فایل PHP ارسال و نتیجه HTML چاپ شده در فایل PHP را در داخل تگ با id با نام success نمایش خواهد داد . توجه داشته باشید برای اجرای کد های JQuery نیاز دارید تا آن بخش head  صفحه تماس با ما بارگذاری شود .

$(document).ready(function() {
                $(‘#submit’).click(function() {
                    $(‘#submit’).attr(‘value’, ‘Please wait…’);
                    $.post(“sendemail.php”, $(“#contactform”).serialize(), function(response) {
                        $(‘#success’).html(response);
                        $(‘#submit’).attr(‘value’, ‘SEND’);
                  });
                    return false;
                });
            });

اگر مایل باشید بدانید که کد فایل contactform.html به چه صورت خواهد بود . به کد کاربردی وردپرس  زیر توجه فرمایید . با چنین کد هایی و استفاده از آن ها شما دارای یک فرم تماس با ما با قابلیت برخورداری از تکنولوژی Ajax  برای ارسال اطلاعات فرم به ایمیل استفاده خواهید .

<!DOCTYPE html>
<html>
  <head>
    <script src=“http://code.jquery.com/jquery-latest.js”></script>
    <script>
            $(document).ready(function() {
                $(‘#submit’).click(function() {
                    $(‘#submit’).attr(‘value’, ‘Please wait…’);
                    $.post(“sendemail.php”, $(“#contactform”).serialize(), function(response) {
                        $(‘#success’).html(response);
                        $(‘#submit’).attr(‘value’, ‘SEND’);
                    });
                    return false;
                });
            });
    </script>
  </head>
  <body>
    <form id=“contactform” action=“” method=“post”>
      <label>Name:</label><input id=“name” type=“text” name=“name” />
      <label>Email:</label><input id=“email” type=“text” name=“email” />
      <label>Message:</label><textarea id=“message” name=“message”></textarea>
      <input id=“submit” type=“button” value=“send” />
      <div id=“success” style=“color: red;”></div>
    </form>
  </body>
</html>

موفق باشید

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