فرم تماس با ما یکی از بخش هایی است که در هر سایت وجود دارد و این فرم باعث افزایش ارتباط شما با مخاطبان سایت تان خواهد شد. در این آموزش قصد داریم تا نحوه ساخت فرم تماس با ما در وردپرس را به شما آموزش دهیم. در آموزش ویدیویی میتوانید علاوه بر مشاهده نحوه ساخت فرم تماس در وردپرس با Contaat Form 7، آموزش ساخت فرم تماس با ما در وردپرس با استفاده از افزونه MetForm را نیز مشاهده کنید. با ما در ادامه همراه باشید.
در این مقاله چه میخوانید؟
ساخت فرم تماس با ما در وردپرس با افزونه Contact form 7
افزونه Contact form 7 یکی از افزونه های محبوب و البته رایگان وردپرس است که به شما اجازه میدهد تا به راحتی فرم تماس های مورد نظر خودتان را ایجاد کنید. برای دانلود این افزونه کاربردی میتوانید به انتهای این مقاله مراجه کنید.
برای نصب این افزونه، ابتدا وارد افزونه ها شده و در قسمت جستجو، عبارت contact form 7 را جستجو میکنیم. افزونه “فرم تماس ۷” با بیش از ۵ میلیون نصب فعال را نصب کرده و فعال میکنیم.
بعد از فعالسازی افزونه، از سمت راست منو،افزونه فرم تماس در وردپرس Contact 7 را انتخاب میکنیم. همانند تصویر زیر، لیستی برای تان باز میشود که تمامی فرم های ساخته شده را به ما نمایش میدهد. برای ساختن فرم تماس با ما بر روی “افزودن جدید” کلیک کنید.
در صفحه جدید، بخش های زیر به شما نمایش داده میشود.
- عنوان فرم : شما در این بخش، عنوان فرم تان را وارد کنید.
- سربرگ ها : در این سربرگ ها تنظیمات متفاوتی برای فرم تعبیه شدهاند، که به توضیح آنان میپردازیم.
بخش فرم در افزونه سازنده فرم تماس Contact Form 7
در این بخش، میتوانیم فیلد ها و بخش هایی که در فرم ما نمایش داده میشود را انتخاب کنیم. در این بخش فیلد هایی مثل متن آدرس، شماره، متن تک خطی و … را میتوانیم انتخاب کنیم. برای اضافه کردن یک بخش جدید به فرم تماس کافی است که بر روی یکی از فیلد ها کلیک کنیم. به عنوان مثال بر روی تلفن کلیک میکنیم تا صفحه زیر برایمان نمایش داده شود.
- نوع زمینه : اینجا میتوانیم اجباری بودن یا نبودن فیلد را مشخص کنیم. به این صورت که کاربر باید این فیلد را تکمیل کند یا نه.
- نام : در این جا میتوانیم نام و عنوان خودمان را برای این فیلد مشخص کنیم.
- مقدار پیش فرض : شما میتوانید مقداری را که میخواهید به صورت پیش فرض در این فیلد قرار بگیرد را وارد کنید تا در صورتی که کاربر چیزی در این فیلد وارد نکرد، این مقدار، در فرم قرار گیرد.
با زدن گزینه “این متن به عنوان نگه دارنده در زمینه استفاده می شود” در صورتی که کاربر روی فیلد کلیک کند، مقدار پیش فرض پاک خواهد شد. - گزینه “ویژگی شناسه(ID) و “ویژگی کلاس” برای طراحی ظاهری فیلد قرار گرفته اند که در صورت نیاز میتوانید از این دو گزینه استفاده کنید.
در آخر بر روی گذاشتن برچسب کلیک کنید تا فیلدی با تگ یا کد کوتاه نشان داده شده در کادر ایجاد شود. از این تگ ها در فرم و ایمیل استفاده خواهد شد.
اگر میخواهید که فیلد شما در فرم دارای یک عنوان باشد، فیلد ایجاد شده را در بین <label></label> قرار دهید و اسم مورد نظرتان را قبل از فیلد بنویسید. به عنوان مثال
<label> شماره همراه
[tel* tel-609] </label>بقیه مواردی که میخواهید را همانند افزودن تلفن انجام داده و به سراغ بخش ایمیل بروید.
ایمیل در افزونه ساخت فرم تماس در وردپرس Contact Form 7
در این بخش، تنظیمات ایمیلی که قرار است اطلاعات فرم برای آن ارسال شود را کنترل میکنیم.
- به : ایمیلی که میخواهید فرم بعد از ثبت شدن توسط کاربر به آن ارسال شود را وارد کنید.
- از طرف : در صندوق ایمیل تان، ایمیلی که میخواهید به عنوان فرستنده نمایش داده شود را میتوانید وارد کنید.
- موضوع : با استفاده از این بخش میتوانید موضوع ایمیل در ایمیل ارسال شده توسط فرم را انتخاب کنید.
- Additional header : در این بخش میتوانید اطلاعات اضافی را همراه ایمیل ارسال کنید. به عنوان مثال اگر بخواهید به ایمیل پاسخ دهید، برای کسی که این فرم را پر کرده ایمیلی ارسال میشود.
- Message body : این بخش به عنوان متن ایمیل ارسال خواهد شد. در این بخش میتوانید از تگ ها و کد های کوتاهی که در هر برای هر فرم ایجاد شده استفاده کنید. همچنین میتوانید از تگ هایی که بالای فرم نشان داده شده، استفاده کنید. به این صورت که در هر جایی که بخواهید اطلاعات مربوط به آن فیلد نمایش داده شود، تگ آن را وارد کنید.
ایمیل ۲ در بخش ایمیل
در صورتی که میخواهید اطلاعات فرم به ایمیل دیگری هم ارسال شود، میتوانید این گزینه را انتخاب کنید و تنظیمات مربوط به آن ایمیل را همانند ایمیل اول انجام دهید.
پیام در افزونه فرم تماس در وردپرس
با مراجعه به این بخش، میتوانید پیام هایی مثل اخطار ها و هشدار هایی که در حین پر کردن فرم به کاربر نمایش داده میشود و همچنین پیام موفقیت آمیز بودن ثبت اطلاعات را از این بخش ویرایش کنید.
تنظیمات اضافی افزونه Conact Form 7
در این بخش میتوانید کد های اضافی مثل CSS را در این بخش وارد کنید
در آخر بر روی ذخیره کلیک کنید تا تمامی تنظیمات ذخیره شود.
بعد از فرم با موفقیت ذخیره شد، یه پیامی به شما نشان داده میشود که در آن کدکوتاهی نمایش داده میشود. از این کد کوتاه برای استفاده کردن این فرم در هر صفحه ای استفاده میکنیم.
به برگه ها رفته و برگه ای به اسم تماس با ما ایجاد میکنیم. در ویرایش برگه اگر از ویرایشگر گوتنبرگ یا دیگر ویرایشگر ها مثل المنتور استفاده میکنید، از کد کوتاه استفاده کرده و کد کوتاهی که کپی کردهاید را در این جا جایگذاری میکنیم. شما برای مشاهده ساخت فرم تماس در وردپرس با استفاده از المنتور، به صفحه آموزش المنتور مراجعه کنید.
بقیه المان ها را به برگه اضافه کرده و برگه را منتشر میکنیم تا نتیجه کار را مشاهده کنیم.
امیدوارم از این آموزش بهره کافی را برده باشید.
4 دیدگاه
۱۴۰۰/۰۶/۳۰ زمان ۱:۵۸ ق٫ظ
با عرض سلام
من یه مشکلی توی بخش فرم دارم.
وقتی دکمه ارسال رو میزنم، میخوام که صفحه (قالب) مورد نظرم بیاد و به کاربر پیامی بده.
لطفا راهنمایی بفرمایید
با تشکر
۱۴۰۰/۰۶/۳۰ زمان ۹:۲۱ ق٫ظ
سلام
وقت شما بخیر
در افزونه contact Form7 این قابلیت وجود نداره.
شما می تونید طبق ویدئویی آموزشی از طریق فرم ساز MetForm، اقدام به ساخت فرم کنید و سپس در بخش تنظیمات همون فرم در بخش “Redirect To” آدرس (url) صفحه مدنظر خودتون رو قرار بدید و تنظیمات رو ذخیره کنید.
با این کار پس از ثبت و ارسال فرم، کاربر به صفحه ای که در قسمت “Redirect To” مشخص کردید، هدایت میشه.
ضمناً از پلاگین Gravity هم می تونید برای این کار استفاده کنید.
۱۴۰۱/۰۴/۲۳ زمان ۱۰:۳۳ ب٫ظ
بسیار عالی بود با تشکر از ویدیو خیلی خوبتون
۱۴۰۱/۰۵/۱۰ زمان ۸:۴۰ ب٫ظ
خواهش میکنم. امید وارم براتون مفید بوده باشه