ساخت فرم ارتباط با ما در وردپرس با Contact Form by WPForms

فرم ارتباط با ما در وردپرس

اضافه شدن ویدئوی آموزشی در تاریخ 25 تیر ماه 1396
هر سایتی حداقل دارای یک فرم می باشد که برای امور مختلف می تواند در نظر گرفته شود. 
فرم های تماس با ما، ورود و ثبت نام در سایت از مهم ترین فرم ها در هر وبسایتی به شمار می رود.
فرم ها به شما کمک می کنند تا بتوانید اطلاعاتی را از کاربران خود از جمله نام، نام خانوادگی، ایمیل و … را دریافت کنید.
مثلا در فرم تماس با ما شما باید اطلاعات کاربر به همراه متن پیام را دریافت و در سمت سرور ذخیره کنید. بعد از آن می توانید متنی که کاربران برای شما ارسال می کنند را بخوانید.
در این نوشته همیار وردپرس به معرفی افزونه ای می پردازیم که می توانید به کمک آن  فرم ارتباط با ما در وردپرس را به راحتی ایجاد کنید.

 فرم ارتباط با ما در وردپرس

افزونه ی Contact Form by WPForms همانند دیگر افزونه های ایجاد فرم تماس با ما می باشد اما با چند ویژگی جالب!
با استفاده از این افزونه می توانید فرم مورد نظرتان را انتخاب و سپس با عمل گرفتن و کشیدن یک فیلد به داخل فرم، به راحتی فیلد های مورد نظرتان را به آن بیفزایید.
اکثر بخش های این افزونه رایگان می باشد و شما هیچ محدودیتی را نسبت به استفاده از افزونه نخواهید داشت، پس می توانید با خیال راحت به ایجاد  فرم ارتباط با ما در وردپرس بپردازید.
شما می توانید بی نهایت فرم را ایجاد کنید و زمانی که می خواهید هر کدام از آن ها را در خروجی نمایش دهید کافیست در نوشته یا برگه مورد نظر آن را قرار دهید.

ایجاد فرم تماس با ما با Contact Form by WPForms

wpforms- فرم ارتباط با ما در وردپرس

نصب و راه اندازی افزونه

برای شروع کار ابتدا افزونه را دریافت نموده و از بخش افزونه های سایت خود آن را نصب کنید. بعد از نصب در بخش تنظیمات پیشخوان سایت وردپرسی بخشی با عنوان Contact Form by Supsystic برای ایجاد  فرم ارتباط با ما در وردپرس ساخته می شود.

افزودن فرم جدید

افزودن فرم جدید- فرم ارتباط با ما در وردپرس

بر روی گزینه ی add new کلیک کنید تا اولین فرم تماس با ما در وردپرس را ایجاد کنیم.

ساخت اولین فرم- فرم ارتباط با ما در وردپرس

اگر به قسمت All Forms هم بروید می بایست طبق تصویر بالا روی Add New جهت ایجاد فرم کلیک کنید(فرقی ندارد!).

مشخص کردن عنوان- فرم ارتباط با ما در وردپرس

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

تنظیمات فرم - فرم ارتباط با ما در وردپرس

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

تنظیمات فرم

طبق تصویر بالا می توانید تنظیمات فیلد ” نام ” را در ستون سمت چپ مشاهده کنید. می توانید آن ها را برای خود فارسی کنید مثلا برای لیبل می توانید متن را از انگلیسی به فارسی نمایش دهید.
در قسمت Format هم سه گزینه وجود دارد که می توانید نام را تنها در یک فیلد نمایش دهید یا اینکه نام + نام خانوادگی را نمایش دهید یا اینکه نام + نام وسطی + نام خانوادگی را به نمایش بگذارید. در صورت انتخاب هر کدام برای هر عدد یک فیلد ایجاد می شود که همه در یک خط می باشند.
گزینه ی Required هم مربوط به مهم بودن آن گزینه یا فیلد می باشد که با فعال کردن آن کاربر باید حتما آن فیلد را تکمیل کند.
قسمت Advanced Options هم مربوط به تنظیمات اضافه تر از جمله سایز فیلد، مقادیر پیش فرض نمایشی فیلدها و… می باشد.

  نحوه‌ اضافه کردن مطالب چند ستونی در پست‌های ورد‌پرس

General

general- فرم ارتباط با ما در وردپرس

به قسمت General بروید، در این قسمت تنظیمات مربوط به دکمه ی Submit را مشاهده می کنید. در قسمت مشخص شده در تصویر بالا ما مقدار ” ارسال ” را قرار داده ایم که متن دکمه ی submit می باشد.
در قسمت زیرین هم مقدار ” در حال ارسال… ” را برای زمانی قرار داده ایم که فرم در حال ارسال به سمت سرور می باشد، که می توانید بنا به خواسته ی خود متن دلخواهنتان را قرار دهید.

Confirmation

confirmation- فرم ارتباط با ما در وردپرس

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

تنظیمات دلخواه دیگر

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

copy shortcode- فرم ارتباط با ما در وردپرس

مشاهده خروجی

بعد از اتمام کار می توانید خروجی را مشاهده کنید. برای این کار کافیست به برگه یا نوشته سایت خود بروید و شورت کد مورد نظر را وارد کنید.

قرار دادن شورت کد- فرم ارتباط با ما در وردپرس

طبق تصویر بالا در یک برگه یا نوشته جدید روی گزینه ی Add Form کلیک کنید تا پاپ آپ مورد نظر برای شما نمایش داده شود. بعد از آن از منوی آپشن فرم مورد نظرتان را انتخاب کنید و شورت کد آن را به ویرایشگر سایت خود بیفزایید(بعد از انتخاب فرم، شورت کد بطور خودکار وارد ویرایشگر می شود!).

نتیجه کار

بعد از آن به پیش نمایش نوشته یا برگه می رویم.

نتیجه ی خروجی - فرم ارتباط با ما در وردپرس

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

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

send- فرم ارتباط با ما در وردپرس

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

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

موفق باشید…

ویدئوی آموزشی

دانلود ویدئوی آموزشی

دانلود ویدئو

دانلود افزونه Contact Form by WPForms

دانلودصفحه افزونه

آیا این مقاله برای شما مفید بود؟
تقریبا
خیر

دیدگاهتان را بنویسید

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

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. 3 سال عضو همیار وردپرس

    سلام وقت بخیر
    چطور میشه این افزونه رو به پنل پیامکی متصل کنم
    ممنون

    • 10 سال عضو همیار وردپرس

      سلام دوست عزیز
      باید برای هدف شما سفارشی سازی بشه که کار توسعه دهنده هاست

  2. 3 سال عضو همیار وردپرس

    سلام وقت بخیر من ایمیل خودمو در Notifications قرار دادم ولی فرم ها به ایمیلم ارسال نمیشه امکانش هست راهنمایی کنید

    • 6 سال عضو همیار وردپرس

      سلام
      چک کنید که سایت شما به سیستم smtp متصل باشه! و در قسمت تنظیمات یک ایمیل از طریق هاست بسازید و اونجا وارد کنید که ایمیل ارسال کننده اون باشه.

  3. 5 سال عضو همیار وردپرس

    درود، در وردپرس ورژن ۵.۲.۲ چطور می‌شه توی برگه‌ی جدید اد فُرم کرد و نتیجه رو ذخیره کرد، کاملاً متفاوت با ورژن توی ویدئو هست، ممنون می‌شم راهنمایی کنید.

  4. 6 سال عضو همیار وردپرس

    دوستان مشکل عدم ارسال فرم هایی که ایمیل فرستنده یاهو هستند با تغییر مقدار From Email در قسمت Notifications به راحتی حل می شود. در این بخش یک ایمیل ثبت می کنید و در همه ی فرم ها این ایمیل به عنوان فرستده ی فرم استفاده می شود، حتی لازم نیست ایمیل حقیقی باشد.
    با این کار مشکل اسپم شدن فرم ها هم حل می شود چون شما با معرفی کردن این ایمیل فرستنده به عنوان ایمیلی که اسپم نیست فرم های خودتونو توی اینباکس دریافت خواهید کرد

  5. 6 سال عضو همیار وردپرس

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

  6. سلام ببخشید قسمت Notifications رو که پر میکنم باز هم پیام ها به ایمیلم ارسال نمیشه میشه بگین چیکار کنم ؟

    • 7 سال عضو همیار وردپرس

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

  7. من از توی سایت پیغام میفرستم به ایمیلم چیزی ارسال نمیشه!لطفا بگین کجا باید ایمیل تعریف کنم. ممنون

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

    • لطفا جواب بدیدد

    • لطفا جواب بدیددددد

    • 7 سال عضو همیار وردپرس

      به ایمیلتون خواهد رفت.
      باید برای افزونه یه ایمیل تعریف کنید تا پیام ها به اون ایمیل ارسال بشه.
      موفق باشید…

    • چطوری باید تعریف کنیم؟

    • 7 سال عضو همیار وردپرس

      از بخش Notifications

    • خواهشن جواب بدید