در مسیر طراحی سایت حرفه‌ای، داشتن یک فرم تماس با ما یکی از ابتدایی‌ترین و در عین حال مهم‌ترین بخش‌هاست. بسیاری از کاربران تصور می‌کنند برای ساخت فرم تماس، حتما باید افزونه نصب کرد. اما در این آموزش می‌خواهیم آموزش ساخت فرم تماس با ما در وردپرس بدون افزونه را به ساده‌ترین روش ممکن و به صورت گام‌به‌گام آموزش دهیم. این روش نه تنها باعث سبک‌تر شدن سایت می‌شود بلکه شما را بیشتر با ساختار کدنویسی در وردپرس آشنا می‌کند.
چرا فرم تماس بدون افزونه طراحی کنیم
اگر در حال آموزش طراحی سایت هستید یا تازه با وردپرس آشنا شده‌اید، شاید برایتان سوال باشد که چرا فرم تماس را بدون افزونه بسازیم؟ دلیل اصلی این است که هر افزونه‌ای که به سایت اضافه می‌شود، منابع بیشتری از سرور می‌گیرد و ممکن است سرعت سایت را کاهش دهد. به‌علاوه در مواردی که کنترل دقیق‌تری روی ظاهر و عملکرد فرم نیاز دارید، ساخت فرم به صورت دستی بهترین گزینه است.
مرحله اول ایجاد فایل فرم HTML
ابتدا باید وارد پیشخوان وردپرس شوید و از قسمت نمایش، به ویرایشگر قالب بروید. سپس فایل page-contact.php را ایجاد کنید یا یک برگه جدید با قالب دلخواه بسازید. درون این فایل، کد زیر را قرار دهید:
<form method="post" action="<?php echo esc_url($_SERVER['REQUEST_URI']); ?>">
<label for="name">نام شما:</label>
<input type="text" name="cf-name" required>
<label for="email">ایمیل:</label>
<input type="email" name="cf-email" required>
<label for="message">پیام:</label>
<textarea name="cf-message" rows="5" required></textarea>
<input type="submit" name="cf-submitted" value="ارسال">
</form>این کد یک فرم ساده شامل نام، ایمیل و پیام کاربر ایجاد می‌کند. دکمه ارسال نیز فرم را به همین صفحه ارسال می‌کند.
مرحله دوم نوشتن کد پردازش فرم
در مرحله بعد باید داده‌های ارسال‌شده توسط فرم را دریافت و پردازش کنیم. این کار نیز در همان فایل page-contact.php انجام می‌شود. کد زیر را بالای فرم اضافه کنید:
<?php
if (isset($_POST['cf-submitted'])) {
$name = sanitize_text_field($_POST['cf-name']);
$email = sanitize_email($_POST['cf-email']);
$message = esc_textarea($_POST['cf-message']);
$to = get_option('admin_email');
$subject = 'پیام جدید از فرم تماس سایت';
$headers = "From: $name <$email>";
wp_mail($to, $subject, $message, $headers);
echo '<div>پیام شما با موفقیت ارسال شد. متشکریم!</div>';
}
?>این کد بررسی می‌کند که آیا فرم ارسال شده یا خیر و سپس اطلاعات واردشده توسط کاربر را با استفاده از توابع وردپرس امن‌سازی می‌کند. در نهایت پیام را به ایمیل مدیر سایت می‌فرستد.
مرحله سوم ساخت برگه تماس با ما در وردپرس
حال نوبت آن رسیده که فرم ساخته‌شده را در یک برگه وردپرس نمایش دهید. کافی است در پیشخوان وردپرس به قسمت برگه‌ها بروید و یک برگه جدید به نام “تماس با ما” ایجاد کنید. قالب این برگه را بر روی page-contact قرار دهید تا فایل page-contact.php بارگذاری شود. سپس فرم ساخته‌شده در صفحه سایت شما ظاهر خواهد شد.
مرحله چهارم تست فرم و دریافت خروجی
فرم را با وارد کردن اطلاعات تست کنید و مطمئن شوید که ایمیل با موفقیت ارسال می‌شود. اگر ایمیل ارسال نمی‌شود، ممکن است تنظیمات هاست شما اجازه ارسال ایمیل ندهد یا باید از SMTP استفاده کنید. اما در حالت کلی، اگر سایت روی هاست معتبری نصب شده باشد، فرم بدون مشکل کار می‌کند.
مرحله پنجم سفارشی‌سازی ظاهر فرم
برای زیباتر کردن فرم می‌توانید استایل CSS دلخواه خود را به قالب سایت اضافه کنید. اگر در حال آموزش طراحی سایت هستید، این فرصت خوبی است تا دانش CSS خود را نیز به کار ببرید. مثلاً کد زیر را در فایل style.css قالب خود قرار دهید:
form {
max-width: 600px;
margin: 0 auto;
}
input, textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}این کد فرم را ساده و مرتب نمایش می‌دهد و تجربه کاربری بهتری فراهم می‌کند.
آموزش ساخت فرم تماس بدون افزونه برای چه کسانی مناسب است
این آموزش برای افرادی مناسب است که:
- در حال آموزش طراحی سایت هستند و می‌خواهند کدنویسی را یاد بگیرند
- می‌خواهند سایت سریع‌تر و سبک‌تری داشته باشند
- نیاز به فرم ساده‌ای دارند و نمی‌خواهند از افزونه‌های پیچیده استفاده کنند
- علاقه‌مند به یادگیری عملکرد داخلی وردپرس هستند
جمع‌بندی
در این مقاله یاد گرفتیم که آموزش ساخت فرم تماس با ما در وردپرس بدون افزونه نه تنها ممکن است، بلکه بسیار ساده و کاربردی هم هست. تنها با چند خط کد HTML و PHP می‌توانید فرم تماس حرفه‌ای و کارآمدی ایجاد کنید که هم سبک باشد و هم امن. اگر در مسیر آموزش طراحی سایت هستید، این یکی از بهترین تمرین‌ها برای تقویت مهارت‌های وردپرسی شماست.
اگر علاقه‌مند به یادگیری اصولی و پروژه‌محور طراحی سایت هستید، موسسه آموزشی فرهنگ نوین کلاس‌های تخصصی آموزش طراحی سایت را با بهترین اساتید، به صورت عملی و کاربردی برگزار می‌کند. همین حالا برای دریافت مشاوره آموزشی رایگان از طریق سایت فرهنگ نوین اقدام کنید و مسیر حرفه‌ای شدن در طراحی سایت را آغاز نمایید.
بدون نظر