Contact Form by WPForms

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

  • آخرین بروز رسانی: 2 هفته قبل
  • تعداد نصب های فعال:+ 3 میلیون
  • نسخه افزونه: 1.6.1
  • امتیاز کاربران وردپرس :4.9 از 5 ستاره
  • نسخه وردپرس : آزمایش شده تا 5.4.2
  • حداقل نسخه وردپرس :4.9
دانلود افزونه از وردپرس
اطلاعات نویسنده
پژمان تیموری

1 سال عضو افزونه جو

با افزونه WPForms ، شما به راحتی می توانید به ساخت فرم های تماس حرفه ای در وردپرس بپردازید. این افزونه فرم ساز در یک محیط ویژوال و کشیدن و رها کردن(drag&drop) اجازه ی طراحی فرم های فوق العاده زیبا و جذاب را می دهد. پس در ادامه با ما همراه باشید.

چرا داشتن فرم تماس در سایت مهم است؟

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

در این میان کار برای وردپرس کاران ساده است.با وجود افزونه های متعدد فرم ساز شما می توانید هر نوع فرمی از فرم های ثبت نام گرفته تا فرم های نظر سنجی را در یک محیط گرافیکی جذاب ایجاد کنید. در ادامه یک افزونه وردپرس بسیار کارآمد در این مورد معرفی خواهیم کرد.

افزونه ایجاد فرم تماس حرفه ای در وردپرس

در آموزش های قبل ما با افزونه Contact form 7 برای ایجاد فرم تماس آشنا شدیم. همچنین با ایجاد فرم تماس چند مرحله ای در وردپرس با همین افزونه و یک افزونه کمکی آشنا شدیم. اما اگر می خواهید فرم های جذاب و حرفه ای در یک محیط گرافیکی و با امکانات بیشتر طراحی کنید می توانید از افزونه های فرم ساز همچون Contact Form by WPForms استفاده کنید.

تمایز این افزونه وردپرس با Contact form 7، محیط گرافیکی و جذاب و امکان طراحی فرم ها به شیوهdrag&drop یا کشیدن و رها کردن المان ها و ایجاد انواع مختلفی از فرم ها حتی فرم های پرداخت و خبرنامه و سازگاری با افزونه های همچون ووکامرس ، افزونه های چند زبانه و افزونه های پرداخت مختلف است.

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

نصب و فعال سازی افزونه فرم ساز WPForms

ابتدا باید این افزونه وردپرس را نصب و فعال سازی کنید.(می توانید راهنمای نصب افزونه وردپرس را در این زمینه بخوانید).

بعد از فعال سازی، نام WPForms در پیشخوان قرار می گیرد که با قرار گرفتن روی آن گزینه های مختلف آن را می توانید ببینید. که شامل دیدن همه ی فرم ها، افزودن فرم جدید، تنظیمات کلی و…است. در بخش تنظیمات شما می توانید تنظیمات مختلفی را همچون فعال سازی ریکپچا و یا تنظیم قالب ایمیل ارسالی را انجام دهید.

فرم تماس حرفه ای در وردپرس
فرم تماس حرفه ای در وردپرس

توصیه می شود بخوانید: افزونه خبرنامه برای وردپرس

ایجاد یک فرم تماس ساده

برای افزودن یک فرم تماس از قسمت WPForms، بر بر روی Add new کلیک کنید تا وارد مرحله بعدی شوید. در این صفحه شما به راحتی می توانید در قسمت Form Name یک نام برای فرم خود وارد کنید و در ادامه می توانید از یکی از قالب های از پیش طراحی شده برای ایجاد فرم های خود استفاده کنید که شامل موارد زیر است.

افزونه فرم ساز WPForms
افزونه فرم ساز WPForms
  • Blank:فرم تماس خالی
  • Simple: ایجاد یک فرم تماس با ما با المان های پیش فرض همچون نام و ایمیل
  • NewsLetter:یک قالب پیش فرض خبرنامه
  • Suggestion:ایجاد یک فرم نظر سنجی

قصد ما ایجاد یک فرم تماس است بنابراین به سادگی بر روی Simple کلیک می کنیم تا وارد مرحله ی بعد شود.در این مرحله وارد محیط فرم ساز افزونه یا Form builder خواهید شد. در سمت چب فیلدها قرار دارند که می توانید با کلیک کردن آن ها را را به فرم پیش فرض اضافه کنید و در سمت راست پیش نمایش زنده ای از فرم ایجاد شده توسط شما قابل مشاهده است. می بینید که با توجه به انتخاب قالب آماده در مرحله ی قبل فیلد های پیش فرض ایجاد شده اند که شامل نام، ایمیل و پیام کاربر است.

افزونه فرم ساز وردپرس
افزونه فرم ساز وردپرس

ویرایش هریک از گزینه های فرم

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

فرم تماس حرفه ای در وردپرس
فرم تماس حرفه ای در وردپرس

به طور مثال ما در اینجا فیلد نام را ویرایش خواهیم کرد. که به طور پیش فرض شامل دو قسمت است. موارد در تصویر زیر قابل مشاهده است. که چه طور ترجمه ها تغییر کرده اند.

افزونه فرم ساز WPForms
افزونه فرم ساز WPForms
  • Format:در این قسمت شما می توانید نوع فیلد را انتخاب کنید. که به ترتیب شامل یک خطی مانند تصویر بالا(simple) ، دو ستونه و سه ستونه است.
  • Required: با تیک این گزینه فیلد به صورت ضروری در می آید.

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

افزونه فرم ساز وردپرس
افزونه فرم ساز وردپرس
  • Field size: اندازه فیلد که شامل سه مورد کوچک،متوسط و بزرگ است.
  • Name: که شامل دو قسمت است. قسمت اول Default، نامی که درون فیلد به طور پیش فرض قرار می گیرد وکاربر می تواند آن را پاک کند. Placeholder، نامی که در پس زمینه به طور کم رنگ هک می شود.
  • Hide: این قسمت شامل دو گزینه است. قسمت اول برای پنهان کردن نام فیلد و قسمت دوم زیر نام های اضافی در حالت های چند ستونه فرم.

تنظیمات مشابه ای برای هریک از فیلد های دیگر موجود است که می توانید آن را انجام دهید. فقط دقت کنید در بخش تنظیمات فیلد ایمیل، یک گزینه با نام Enable Email Confirmation وجود دارد که با فعال سازی این گزینه فرد باید ایمیل خود را برای اطمینان دوبار وارد کند.

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

فرم تماس حرفه ای در وردپرس
فرم تماس حرفه ای در وردپرس

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

Contact Form by WPForms
Contact Form by WPForms
  • Enable anti-spam:محافظت از فرم در برابر پیام های هرز یا مخرب
  • Enable Ajax: فعال سازی حالت ایجکس برای فرم ها( ارسال مقادیر فرم بدون تازه سازی صفحه).

با ذخیره سازی فرم، شما می توانید از فرم استفاده کنید.

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

بعد از ایجاد یک فرم حرفه ای می توانید از بخش WPForms>All Forms، همه ی فرم های ایجاد شده را ببینید. کافی است کد کوتاه آن را کپی و در یک برگه یا نوشته قرار دهید با انتشار برگه می توانید فرم دلخواه خود را ببینید.یا در ویرایشگر گوتنبرگ وردپرس می توانید از میان بلاک ها، در دسته بندی ابزارک ها، بلاک WPForms را انتخاب کنید.به تصاویر زیر دقت کنید.

افزونه فرم ساز وردپرس
افزونه فرم ساز وردپرس
Contact Form by WPForms
Contact Form by WPForms

تنظیمات بیشتر افزونه WPForms

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

فعال سازی ریکپچا یا Rcaptcha

می دانیم که داشتن ریکپچا یکی از اقدام مهم امنیتی برای حفاظت فرم های شما در برابر حملات مخرب محسوب می شود. برای افزودن ریکپچا به قسمت WPForms>setting و تب Recaptcha بروید. برای فعال سازی این امکان شما نیاز به دریافت Site key , secret key از گوگل دارید. که باید در فیلد های مربوطه قرار دهید. برای راهنمایی می توانید آموزش نحوه دریافت شناسه ریکپچا را بخوانید.

افزودن ریکپچا به فرم تماس
افزودن ریکپچا به فرم تماس
  • Type: نوع فرم تماس، می دانیم که سه ورژن مختلف برای ریکپچا وجود دارد.
  • Fail Message:خطای تایید نشدن ریکپچا را می توانید به فارسی وارد کنید.
  • NO-Conflict:می توانید این گزینه را زمانی که ریکپچای دیگر در سایت فعال است برای جلوگیری از تداخل تیک بزنید. و در نهایت بر روی ذخیره کلیک کنید.

تنظیمات ایمیل

در این قسمت شما می توانید قالب کلی و شکل نمایش ایمیل ارسالی به کاربران و تنظیمات مربوط به ایمیل را انجام دهید. برای این کار کافی است به تب Email بروید.در قسمت اول می توانید انتخاب کنید که ساختار ایمیل به صورت متنی باشد یا html.که می توانید به طور پیش فرض قرار دهید.

فرم تماس حرفه ای در وردپرس
فرم تماس حرفه ای در وردپرس
افزونه فرم ساز WPForms
افزونه فرم ساز WPForms
  • Header Image: در این قسمت می توانید یک تصویر برای هدر ایمیل ارسالی قرار دهید.
  • Background color: رنگ پس زمینه قالب ایمیل ارسالی به کاربرن

ترجمه پیام ها

اگ به تب validation بروید می توانید ترجمه برخی عبارات مانند پیام های نادرست فرمت ایمیل را ویرایش و به فارسی تبدیل کنید. برخی ترجمه مربوط به عبارات را در تصویر زیر می بینید.

فرم تماس حرفه ای در وردپرس
فرم تماس حرفه ای در وردپرس
خلاصه:

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

۳+

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هنوز آموزشی برای این افزونه تهیه نشده است.