نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 2148
تاریخ بروزرسانی ۱۲ اردیبهشت ۱۴۰۱

آموزش ساخت صفحه تماس با ما در وردپرس

همانطور که می دانید، امروزه در همه ی سایت ها فرم تماس با ما برای ارتباط کاربران با مدیریت سایت وجود دارد. فرم تماس با ما باعث بهبود رابط کاربری سایت  و همچنین افزایش اعتماد کاربران به سایت می شود. در نتیجه صفحه ی تماس با ما را می توان یکی از مهم ترین صفحات یک وب سایت دانست، به همین علت تیم طراحی سایت اصفهان وب یار در نظر دارد ساخت فرم تماس با ما با php را به شما عزیزان آموزش دهد. پس در ادامه ما را همراهی کنید.

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

برای ایجاد این فرم به دو فایل زیر نیاز داریم:

  • 1-contact.php که کدهای html در آن قرار می گیرد،
  • 2- send_contact.php که کدهای php را در آن قرار می دهیم.

توجه داشته باشید که این قطعه کد بر روی هاست انجام می شود و برای اجرا بر روی لوکال هاست باید یکسری ویرایشات در بعضی از فایل ها انجام گیرد.

ساخت صفحه تماس با ما html

قطعه کد زیر را در فایل contact.php قرار دهید.

<html>
    <body>
        <form action="send_contact.php" method="post">
            subject: <input type="text" name="subject"><br>
            message:  <textarea name="message" cols="50" rows="4" id="detail"></textarea><br>
            name:    <input type="text" name="name"><br>
            email:   <input type="text" name="email"><br>
            <input type="submit" value="Submit" name="submit">
        </form>
    </body>
</html>

کد بالا یک فرم ساده ایجاد می کند و اطلاعات را می گیرد و به فایل send_contact.php ارسال می کند.

اجرای کد بالا به صورت زیر می باشد.

ساخت فرم تماس با ما

 

کد php برای ساخت فرم تماس با ما

برای تکمیل فرم تماس با ما وردپرس کدهای زیر را هم در فایل send_contact.php قرار دهید.

<?php
 
if (isset($_POST['submit'])) {
    $to = "you@you.com";
    $subject = $_POST['subject'];
    $message = $_POST['message'];
    $name = $_POST['name'];
    $email = $_POST['email'];
 
    $body = "From: $name\n E-Mail: $email\n Message:\n $message";
 
    echo "Data has been submitted to $to!";
    mail($to, $subject, $body);
} else {
    echo "error!";
}
?>

توجه:در خط سوم آدرس ایمیل خود را قرار دهید.

نتیجه کار به صورت زیر می باشد.

ایجاد فرم تماس با ما برای سایت

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

مراحل ساخت فرم در وردپرس و ارسال به ایمیل با php و ajax

کدhtml زیر را در فایل contactform.php قرار دهید.

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

کدphp زیر را در فایلsendemail.php قرار دهید.

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$to = "you@you.com";
$subject = 'the subject';
$message = "From: $name\n E-Mail: $email\n Message:\n $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.";
}
?>

کد ajax زیر را نیز در فایل contactform.php در قسمت 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>

 

ایجاد فرم تماس با ما با php و ajax

همانطور که می بینید صفحه مجددا بار گذاری نشده است.

اکنون شما قادر به ساخت فرم تماس با ما برای سایت تان هستید. با عضویت در کانال webyar_net@ می توانید از جدیدترین آموزش های تیم طراحی سایت وب یار مطلع شوید.

 

مقالات مرتبط
بهترین راهکار برای رفع محدودیت فالو در اینستاگرام

انواع محدودیت های حال حاضر در اینستاگرام • محدودیت فالوو کردن سایر کاربران اینستاگرام: • محدودیت لایک کردن پست‌های مختلف کاربران اینستاگرام: • محدودیت کامنت گذاشتن برای پست‌های مختلف شبکه اینستاگرام: • محدودیت به کار بردن هشتگ در پست‌های مختلف شبکه اینستاگرام: • محدودیت تعداد کلمات متن (کپشن) پست اینستاگرام: • محدودیت تعداد کاراکترهای Biography کاربران اینستاگرام: هدف از فالو و آنفالو کردن در اینستاگرام…

شرکت های طراحی اپلیکیشن

“اگه برنامه تون درست کار نمی‌کنه اصلاً نگران نشید چرا که اگر همه‌چیز درست کار کنه، شما بیکار می‌شید.” قانون موشر چرا این مقاله را با این جمله معروف از موشر بزرگ شروع کردیم؟ شرکت های طراحی اپلیکیشن ، در بین همه شرکت ها و مجموعه هایی که در زمینه برنامه نویسی فعالیت می کنند ، خدمات بزرگی را به جوامع و کسب و کار…