آموزش افزونه Contact Form 7 و ساخت فرم تماس در وردپرس

برای اینکه کاربران بتوانند از طریق سایت با ما ارتباط بگیرند، درخواست همکاری بفرستند یا اطلاعات موردنیازمان را در اختیارمان قرار بدهند، به یک فرم تماس نیاز داریم. افزونه Contact Form 7 یکی از افزونه‌های فرم‌ساز وردپرس است که بیشتر برای ساخت فرم تماس از آن استفاده می‌کنیم.

این افزونه را با نام‌های کانتکت فرم سون، فرم تماس 7 و CF7 هم می‌شناسیم. محیط افزونه Contact Form 7 ساده است و برای ساخت فیلدها از تگ‌ها و کدهای آماده استفاده می‌کنیم. در ادامه، یک فرم را از ابتدا می‌سازیم، فیلدهایش را تنظیم می‌کنیم، آن را داخل صفحه تماس با ما قرار می‌دهیم و نحوه ارسال و ذخیره پیام‌های کاربران را بررسی می‌کنیم.

نصب افزونه Contact Form 7 در وردپرس

برای شروع، وارد پیشخوان وردپرس می‌شویم و از منوی «افزونه‌ها» گزینه «افزودن افزونه» را انتخاب می‌کنیم. عبارت Contact Form 7 را داخل کادر جست‌وجو وارد می‌کنیم و افزونه «فرم تماس 7» را پیدا می‌کنیم. سپس روی «هم‌اکنون نصب نمایید» کلیک می‌کنیم و بعد از پایان نصب، افزونه را فعال می‌کنیم.

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

ساخت فرم جدید با افزونه کانتکت فرم 7

وارد بخش فرم‌های تماس می‌شویم و روی گزینه Add Contact Form یا دکمه افزودن فرم تازه کلیک می‌کنیم. در قسمت عنوان، یک نام مشخص مثل «فرم ارتباط با ما» قرار می‌دهیم تا بعداً این فرم را راحت‌تر از فرم‌های دیگر تشخیص بدهیم.

فیلدهای فرم در افزونه Contact Form 7 به‌شکل تگ داخل کادر ویرایش قرار می‌گیرند. بالای همین کادر، دکمه‌هایی برای ساخت انواع فیلد می‌بینیم. با کلیک روی هر دکمه، تنظیمات همان فیلد باز می‌شود و بعد از تکمیل تنظیمات، تگ آماده داخل فرم قرار می‌گیرد.

ساخت فیلدهای فرم تماس در Contact Form 7

برای ساخت فرم ارتباط با ما، اطلاعاتی را که از کاربر نیاز داریم مشخص می‌کنیم. در این آموزش، فیلد نام، ایمیل، آدرس سایت و توضیحات را می‌سازیم و با فیلدهای دیگر افزونه هم آشنا می‌شویم.

ساخت فیلد نام کاربر

برای دریافت نام، روی گزینه «متن تک‌خطی» یا Text کلیک می‌کنیم. اگر پرکردن نام برای ارسال فرم ضروری است، تیک ضروری‌بودن فیلد را فعال می‌کنیم. سپس یک نام انگلیسی مثل your-name برای فیلد در نظر می‌گیریم.

اگر مشخص کنیم که این فیلد برای دریافت نام کاربر ساخته شده است، مرورگر می‌تواند نام ذخیره‌شده کاربر را هنگام تکمیل فرم پیشنهاد بدهد. به این قابلیت Auto Complete گفته می‌شود و باعث می‌شود کاربر سریع‌تر فرم را پر کند.

تعیین کلاس CSS و طول متن

اگر بخواهیم ظاهر این فیلد را با کد CSS تغییر بدهیم، می‌توانیم یک کلاس اختصاصی برای آن وارد کنیم. در غیر این صورت، این قسمت را خالی می‌گذاریم. حداقل و حداکثر تعداد کاراکترهای قابل ورود را هم می‌توانیم مشخص کنیم. برای نمونه، حداقل طول را یک و حداکثر طول نام را ۵۰ کاراکتر قرار می‌دهیم.

تفاوت مقدار پیش‌فرض و Placeholder

برای فیلد می‌توانیم یک مقدار پیش‌فرض قرار بدهیم. اگر گزینه Placeholder را فعال نکنیم، این عبارت مانند یک متن واقعی داخل فیلد قرار می‌گیرد و کاربر باید قبل از نوشتن نام خودش آن را پاک کند.

با فعال‌کردن Placeholder، متن نمونه به‌صورت کم‌رنگ داخل فیلد نمایش داده می‌شود و به‌محض شروع تایپ کاربر از بین می‌رود. برای همین بهتر است متن نمونه را به‌شکل Placeholder قرار بدهیم.

اضافه‌کردن عنوان بالای فیلد

برای اینکه کاربر بداند داخل هر فیلد چه اطلاعاتی وارد کند، بالای تگ فیلد یک Label مثل «نام شما» قرار می‌دهیم. تگ فیلدی که ساخته‌ایم را داخل همین برچسب می‌گذاریم تا عنوان و کادر ورود اطلاعات کنار هم نمایش داده شوند.

ساخت فیلد ایمیل

برای دریافت ایمیل کاربر، یک برچسب با عنوان «ایمیل شما» می‌سازیم و گزینه Email را انتخاب می‌کنیم. فیلد را ضروری قرار می‌دهیم و یک نام انگلیسی مثل your-email برای آن می‌نویسیم. گزینه مربوط به دریافت ایمیل کاربر را هم فعال می‌کنیم تا مرورگر بتواند ایمیل‌های ذخیره‌شده را پیشنهاد بدهد.

برای مقدار پیش‌فرض می‌توانیم عبارتی مثل test@mail.com بنویسیم. اگر این متن را بدون Placeholder قرار بدهیم، کاربر مجبور می‌شود آن را پاک کند. بنابراین گزینه Placeholder را فعال می‌کنیم تا ایمیل نمونه فقط به‌عنوان راهنما نمایش داده شود.

ساخت فیلد آدرس سایت

اگر بخواهیم آدرس سایت کاربر را هم دریافت کنیم، گزینه URL را انتخاب می‌کنیم. این فیلد را می‌توانیم اختیاری بگذاریم و نامی مثل website برای آن بنویسیم. یک آدرس نمونه هم به‌شکل Placeholder قرار می‌دهیم تا کاربر فرمت ورود نشانی سایت را ببیند.

ساخت فیلد توضیحات

برای دریافت پیام یا توضیحات طولانی، از Text Area یا ناحیه متنی استفاده می‌کنیم. فیلد را ضروری قرار می‌دهیم، نام آن را description می‌گذاریم و برچسب «توضیحات شما» را بالای آن قرار می‌دهیم.

هنگام جایگزین‌کردن تگ‌ها، بهتر است فیلد قبلی را کامل پاک کنیم و بعد تگ جدید را قرار بدهیم. اگر فقط بخشی از تگ قبلی انتخاب شود، ممکن است کد دو فیلد با هم ترکیب شود و افزونه هنگام ذخیره خطا نمایش بدهد.

آشنایی با فیلدهای دیگر فرم تماس 7

افزونه Contact Form 7 فیلدهای دیگری هم در اختیارمان قرار می‌دهد که با توجه به اطلاعات موردنیازمان می‌توانیم از آن‌ها استفاده کنیم.

تلفن، عدد و تاریخ

با فیلد تلفن می‌توانیم شماره تماس کاربر را دریافت کنیم. فیلد Number برای دریافت عددهایی مثل سن کاربرد دارد و حداقل و حداکثر آن براساس مقدار عددی تنظیم می‌شود. با فیلد Date هم می‌توانیم یک تاریخ از کاربر بگیریم.

فهرست کشویی، چک‌باکس و دکمه رادیویی

با فهرست کشویی چند گزینه را داخل یک منو نمایش می‌دهیم تا کاربر یکی از آن‌ها را انتخاب کند. در چک‌باکس امکان انتخاب چند گزینه وجود دارد، اما دکمه رادیویی برای زمانی کاربرد دارد که کاربر فقط باید یکی از چند گزینه را انتخاب کند.

فیلد پذیرش قوانین

فیلد Acceptance را برای عباراتی مثل «قوانین را می‌پذیرم» یا «با شرایط موافقم» به کار می‌بریم. بهتر است این گزینه را قبل از دکمه ارسال قرار بدهیم تا کاربر ابتدا آن را تیک بزند و بعد بتواند فرم را ارسال کند.

آزمون و دریافت فایل

در فیلد Quiz می‌توانیم سؤال و پاسخ درست را وارد کنیم. برای نمونه، سؤال «پایتخت ژاپن کجاست؟» را می‌نویسیم و پاسخ «توکیو» را برای آن مشخص می‌کنیم. هر سؤال باید در یک خط جداگانه قرار بگیرد.

با فیلد File هم امکان دریافت فایل از کاربر را فراهم می‌کنیم. در تنظیمات این فیلد می‌توانیم نوع فایل‌های مجاز مثل تصویر، ویدئو یا فایل صوتی را مشخص کنیم.

اضافه‌کردن دکمه ارسال

در پایان فرم، گزینه Submit را انتخاب می‌کنیم و متنی مثل «ارسال اطلاعات» را برای دکمه می‌نویسیم. سپس فرم را ذخیره می‌کنیم. اگر ساختار تگ‌ها اشتباه باشد یا بخشی از یک فیلد قبلی داخل کد باقی مانده باشد، افزونه خطا را اعلام می‌کند. تگ‌های تکراری یا ترکیب‌شده را اصلاح می‌کنیم و دوباره فرم را ذخیره می‌کنیم.

قراردادن فرم Contact Form 7 داخل برگه

بعد از ذخیره فرم، افزونه یک کد کوتاه یا Shortcode در اختیارمان قرار می‌دهد. این کد را کپی می‌کنیم و داخل برگه‌ای که می‌خواهیم فرم در آن نمایش داده شود، قرار می‌دهیم.

استفاده از فرم در المنتور

اگر صفحه را با المنتور ساخته‌ایم، آن را با المنتور باز می‌کنیم و ابزارک «کد کوتاه» را داخل صفحه قرار می‌دهیم. سپس شورت‌کد فرم را داخل ابزارک می‌چسبانیم و تغییرات صفحه را ذخیره می‌کنیم.

اگر از المنتور استفاده نمی‌کنیم، می‌توانیم همین شورت‌کد را داخل ویرایشگر پیش‌فرض وردپرس قرار بدهیم. ظاهر فیلدها براساس استایل قالب سایت نمایش داده می‌شود و با هر بار ذخیره فرم می‌توانیم صفحه را تازه‌سازی کنیم و نتیجه تغییرات را ببینیم.

تنظیم ایمیل‌های افزونه Contact Form 7

یکی از مهم‌ترین بخش‌های افزونه کانتکت فرم 7، تب «ایمیل» است. اطلاعاتی که کاربر داخل فرم وارد می‌کند، به‌صورت ایمیل برای مدیر سایت ارسال می‌شود و افزونه به‌صورت پیش‌فرض این اطلاعات را داخل پیشخوان ذخیره نمی‌کند.

مشخص‌کردن گیرنده و فرستنده ایمیل

در قسمت «به»، مشخص می‌کنیم پیام فرم برای چه آدرسی ارسال شود. تگ [site_admin_email__] به همان ایمیلی اشاره می‌کند که در تنظیمات عمومی وردپرس قرار داده‌ایم؛ بنابراین لازم نیست آدرس مدیر را دوباره به‌صورت دستی بنویسیم.

در قسمت «از طرف»، نام سایت را با تگ Site Title قرار می‌دهیم تا اگر چند سایت را مدیریت می‌کنیم، متوجه شویم فرم از کدام سایت ارسال شده است. آدرس فرستنده را هم از دامنه خودمان انتخاب می‌کنیم. برای نمونه، اگر دامنه ما example.com باشد، از ایمیلی مثل info@example.com استفاده می‌کنیم. در آموزش تأکید می‌شود که آدرس فرستنده با دامنه سایت مرتبط باشد تا احتمال اسپم‌شدن ایمیل کمتر شود.

تنظیم موضوع و پاسخ به ایمیل کاربر

در قسمت موضوع، می‌توانیم نام سایت و یکی از اطلاعات فرم مثل نام کاربر را قرار بدهیم. چون نام فیلد در این فرم your-name است، تگ همین فیلد را داخل موضوع می‌گذاریم. اگر فیلد موضوع هم ساخته باشیم، نام همان فیلد را داخل Subject قرار می‌دهیم.

در بخش Reply-To باید تگ فیلدی را بنویسیم که ایمیل کاربر را از آن دریافت کرده‌ایم. با این کار، وقتی ایمیل دریافتی را باز می‌کنیم و روی پاسخ‌دادن می‌زنیم، پاسخ برای همان آدرس کاربر ارسال می‌شود.

تنظیم محتوای ایمیل

داخل کادر متن پیام، تگ فیلدهایی را قرار می‌دهیم که می‌خواهیم در ایمیل ببینیم. برای نمونه، مقابل «نام» تگ your-name، مقابل «ایمیل» تگ your-email و مقابل «توضیحات» تگ description را قرار می‌دهیم. چون در فرم فیلد موضوع نساخته‌ایم، خط مربوط به آن را حذف می‌کنیم.

Exclude a line from output if all of its mail-tags are blank

اگر گزینه حذف خط‌هایی با تگ خالی را فعال کنیم، اطلاعات اختیاری که کاربر وارد نکرده است از ایمیل حذف می‌شوند. برای نمونه، وقتی فیلد سایت اختیاری باشد و کاربر آن را خالی بگذارد، خط «سایت:» هم از پیام حذف می‌شود.

ارسال ایمیل با محتوای HTML و پیوست

اگر داخل متن پیام از کدهای HTML استفاده کرده‌ایم، گزینه استفاده از HTML را فعال می‌کنیم. در قسمت پیوست هم می‌توانیم نام فیلدی را قرار بدهیم که فایل را از کاربر دریافت می‌کند. امکان واردکردن مسیر نسبی یک فایل موجود در هاست هم در این قسمت وجود دارد.

ارسال ایمیل دوم برای کاربر

با فعال‌کردن Mail 2 می‌توانیم یک ایمیل جداگانه برای کاربری بفرستیم که فرم را تکمیل کرده است؛ برای نمونه، به او اطلاع بدهیم که درخواستش ثبت شده است. تنظیمات این ایمیل مانند ایمیل مدیر است، اما گیرنده آن تگ فیلد ایمیل کاربر خواهد بود.

در این آموزش به این ایمیل دوم نیازی نداریم و آن را غیرفعال نگه می‌داریم تا یک ایمیل اضافه ارسال نکنیم.

تغییر پیام‌های فرم تماس 7

در تب «پیام‌ها»، متن‌هایی را می‌بینیم که بعد از ارسال فرم یا هنگام بروز خطا به کاربر نمایش داده می‌شوند. از همین قسمت می‌توانیم پیام موفقیت، خطای فیلدهای ضروری، مشکل ارسال و سایر پیام‌های افزونه را تغییر بدهیم.

تنظیمات اضافی افزونه Contact Form 7

در تب «تنظیمات اضافی» می‌توانیم با دستورهای آماده، رفتار فرم را تغییر بدهیم. لینک راهنمای این دستورات هم در همان صفحه قرار دارد و ما را به مستندات سازنده افزونه هدایت می‌کند.

با یکی از این تنظیمات می‌توانیم فرم را فقط برای کاربران واردشده نمایش بدهیم. امکان قراردادن فرم در حالت آزمایشی، جلوگیری از ارسال ایمیل و تغییر رفتار فیلد پذیرش هم وجود دارد. در این فرم به چنین تنظیماتی نیاز نداریم و کادر را خالی می‌گذاریم.

ذخیره پیام‌های Contact Form 7 با افزونه Flamingo

افزونه Contact Form 7 در حالت عادی اطلاعات فرم‌ها را داخل سایت ذخیره نمی‌کند و پیام‌ها را فقط از طریق ایمیل می‌فرستد. برای اینکه ورودی‌های فرم داخل پیشخوان وردپرس هم باقی بمانند، افزونه مکمل فلامینگو را نصب می‌کنیم.

وارد بخش افزودن افزونه می‌شویم، فلامینگو را جست‌وجو می‌کنیم و بعد از نصب، آن را فعال می‌کنیم.

مشاهده پیام‌های دریافتی

بعد از فعال‌سازی، منوی فلامینگو به پیشخوان اضافه می‌شود. در بخش «پیام‌های دریافتی» می‌توانیم اطلاعاتی را ببینیم که کاربران از طریق فرم فرستاده‌اند. بخش دفترچه تلفن هم اطلاعات کاربران ثبت‌شده را نمایش می‌دهد.

برای آزمایش، نام، ایمیل و توضیحات را داخل فرم وارد می‌کنیم و روی «ارسال اطلاعات» می‌زنیم. بعد از نمایش پیام موفقیت، وارد پیام‌های دریافتی فلامینگو می‌شویم و اطلاعات ثبت‌شده را بررسی می‌کنیم.

استفاده از نام‌های پیش‌فرض فیلدها

برای اینکه فلامینگو اطلاعات را بهتر شناسایی و در ستون‌های مربوط نمایش بدهد، بهتر است تا جای ممکن از نام‌های پیش‌فرض افزونه استفاده کنیم. برای نمونه، نام کاربر را با your-name، ایمیل را با your-email و موضوع را با your-subject دریافت می‌کنیم. اگر مانند این آموزش نام فیلدها را تغییر بدهیم، ممکن است بعضی اطلاعات در ستون‌های اصلی تشخیص داده نشوند، اما با بازکردن پیام همچنان می‌توانیم مقدار فیلدها را ببینیم.

یکپارچه‌سازی افزونه Contact Form 7

در بخش «یکپارچه‌سازی»، می‌توانیم افزونه Contact Form 7 را به ابزارهای دیگر متصل کنیم. اگر Akismet روی سایت فعال باشد، امکان هماهنگی آن با فرم تماس وجود دارد.

برای استفاده از Google reCAPTCHA هم وارد لینک مربوط می‌شویم، با حساب گوگل کلید سایت و کلید مخفی را دریافت می‌کنیم و آن‌ها را داخل تنظیمات افزونه قرار می‌دهیم. بعد از انجام این اتصال، امکان استفاده از کپچا در فرم فراهم می‌شود. در نسخه ۳ کپچا، کاربر نیازی به تیک‌زدن گزینه جداگانه ندارد.

برای ساخت فرم‌های حرفه‌ای‌تر چه کار کنیم؟

افزونه Contact Form 7 برای ساخت فرم‌های ساده و کاربردی گزینه مناسبی محسوب می‌شود؛ اما اگر بخواهیم فرم‌های حرفه‌ای‌تر و پیشرفته‌تری بسازیم، می‌توانیم از افزونه‌های دیگری مثل گرویتی فرم و کیوفرم استفاده کنیم. برای یادگیری این افزونه‌ها می‌توانید از دوره آموزش گرویتی فرم و آموزش کیوفرم در مهارت وب استفاده کنید.

جمع‌بندی و صحبت آخر در مورد Contact Form 7

در این آموزش یاد گرفتیم که چگونه افزونه Contact Form 7 را نصب کنیم و با استفاده از تگ‌های آماده آن، یک فرم ارتباط با ما بسازیم. فیلدهای نام، ایمیل، سایت و توضیحات را تنظیم کردیم، با گزینه‌های دیگر فرم آشنا شدیم و شورت‌کد ساخته‌شده را داخل صفحه تماس با ما قرار دادیم.

در ادامه، ایمیل مدیر، فرستنده، موضوع، Reply-To و محتوای پیام را تنظیم کردیم و بخش پیام‌ها و تنظیمات اضافی را دیدیم. در پایان هم با نصب افزونه فلامینگو، ورودی‌های فرم را داخل وردپرس ذخیره کردیم و بخش یکپارچه‌سازی افزونه کانتکت فرم 7 را بررسی کردیم.

اگر سؤال یا نکته‌ای درباره افزونه Contact Form 7 و ساخت فرم تماس در وردپرس دارید، آن را از قسمت نظرات با ما مطرح کنید.