قرار دادن گزینه‌های تصویری در فرم‌های وردپرس با Contact Form by WPForms

گزینه‌های تصویری در فرم وردپرس
گزینه‌های تصویری در فرم وردپرس

آیا به دنبال راهی هستید که بتوانید فرم­‌های خود را به گونه‌­ای طراحی کنید که باعث جذب مخاطب و کاربر بیشتری گردد؟ گرافیک راهی عالی برای جلب توجه مخاطبان شما و درگیر کردن آن­ها با وبسایت شما است. در این بین، عکس­‌ها جایگاه ویژه­‌ای در این زمینه و ایجاد یک محتوای عالی برای ارائه بهتر اطلاعات دارند. در این آموزش، ما به شما نشان خواهیم داد که چگونه می‌توانید گزینه‌های تصویری در فرم وردپرس خود اضافه کنید تا به این صورت نرخ بازدید سایت خود را افزایش دهید و تعامل بیشتری با کاربر خود داشته باشید.

گزینه‌های تصویری در فرم وردپرس

آنچه در این مقاله به اختصار خواهید خواند:

  • گزینه­‌های تصویر چیست و دلیل استفاده از آن­ها در فرم ؟
  • افزودن گزینه‌های تصویری در فرم وردپرس خود
  • اضافه کردن فرم به وبسایت

گزینه­‌های تصویر چیست و دلیل استفاده از آن­ها در فرم ؟

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

برای روشن‌­تر شدن این موضوع، در اینجا از یک فرم با استفاده از گزینه‌­های تصویر استفاده کرده­‌ایم، تا به راحتی منظور این مقاله درک کنید:

choose image in form-گزینه‌های تصویری در فرم وردپرس
فرمی که در آن قابلیت انتخاب عکس اضافه شده است.

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

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

افزودن گزینه‌های تصویری در فرم وردپرس خود

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

WPForms plugin-گزینه‌های تصویری در فرم وردپرس
افزونه WPForms

ابتدا باید افزونه WPForms را نصب و فعال کنید. WPForms یک افزونه برتر وردپرس است. همچنین نسخه رایگان این افزونه با نام WPForms Lite ارائه شده است که دارای ویژگی انتخاب تصویر نیز می‌­باشد.

ایجاد فرم خود با WPForms

پس از فعال کردن افزونه، به قسمت WPForms بروید و Add Form را بزنید تا بتوانید یک فرم اضافه کنید.

wpform setting menu-گزینه‌های تصویری در فرم وردپرس
منوی تنظیمات WPForms

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

create new form-گزینه‌های تصویری در فرم وردپرس
ساخت فرم جدید

با این کار، رابط سازنده WPForms را با زمینه‌هایی از پیش بارگذاری شده را راه‌­اندازی می­‌کند. می­‌توانید با کلیک بر روی آن، هر قسمت از فرم را ویرایش کنید، آن را به بالا و یا پایین حرکت دهید یا حتی می­‌توانید مواردی را حذف کنید.

create form-گزینه‌های تصویری در فرم وردپرس
صفحه ویرایش فرم

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

برای افزودن این گزینه، کافیست قسمت Multiple Choice را از قسمت Standard Fields در سمت چپ صفحه خود بکشید و در فرم خود رها کنید. ما می‌خواهیم آن را درست در بالای کادر “Comment ” و یا “Message” قرار دهیم.

گزینه Multiple Choice در WPForms
گزینه Multiple Choice در WPForms

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

Fild Option in WPForms-گزینه‌های تصویری در فرم وردپرس
گزینه‌های فیلد در WPForms

در این قسمت، شما به باید کادر ” Use image choices ” را علامت بزنید و تا WPForms به طور خودکار این قسمت را بروز کند و امکان گزینه‌های تصویری در فرم وردپرس را اضافه می­‌کند.

Use image choices-گزینه‌های تصویری در فرم وردپرس
گزینه Use image choices

برای متن برچسب آن­‌ها می­‌توانید هر آنچه را می­‌خواهید بنویسید و سپس بر روی دکمه “بارگذاری تصویر” کلیک کنید. شما می­‌توانید از رایانه خود تصویر را بارگذاری کنید یا یکی از کتابخانه رسانه وردپرس خود، تصویر را انتخاب کنید.

بارگذاری تصویر در فرم با WPForms
بارگذاری تصویر در فرم با WPForms

لازم به ذکر است که از تصاویری با فرمت jpg یا png استفاده کنید که بیش از 250px با 250px نباشد. WPForms اندازه تصاویر شما را تغییر نمی­‌دهند. قبل از آپلود کردن باید اطمینان حاصل کنید که آن­ها به اندازه مورد نظر خود هستند. از طرف دیگر، می‌­توانید قبل از افزودن آن­ها به فرم خود، تصویر خود را در خود WordPress ویرایش کنید. این کار برای این است که اگر همه عکس­‌ها اندازه یکسانی باشند، در هنگام نمایش بهتر به نظر خواهند رسید.

  افزونه فرم ساز پیشرفته

اگر بیش از 3 گزینه برای قرار دادن لیست تصاویر برای انتخاب در فرم وردپرسی دارید، کافی است روی دکمه (+) کلیک کنید تا یک انتخاب جدید اضافه شود. برای کاهش آن نیز می‌­توانید از دکمه (-) استفاده کنید.

Add or remove options-گزینه‌های تصویری در فرم وردپرس
اضافه یا حذف کردن گزینه

 

تغییر نحوه انتخاب تصویر شما روی فرم

WPForms تغییر طرح انتخاب تصویر و سایر تنظیمات را از طریق تب ” Advanced Options ” آسان کرده است.

گزینه Advanced Options
گزینه Advanced Options

همانطور که می‌­بینید دارای یکسری گزینه‌­ها است که به ترتیب آن­ها را برای شما توضیح می‌­دهیم. اگر می­‌خواهید گزینه‌های تصویری در فرم وردپرس خود را بطور تصادفی و نه به ترتیب خاصی نمایش دهید، می‌توانید قسمت ” Randomize Choices ” را بررسی کنید. در صورت ایجاد نظرسنجی این گزینه برای شما بسیار مفید خواهد بود.

در زیر قسمت ” Image Choice Style “، شما می‌­توانید نحوه سبک و جایگذاری تصاویر خود را انتخاب کنید. سبک پیش فرض modern است که تصاویر به صورت زیر در کنار هم قرار گرفته‌­اند:

سبک کلاسیک در WPForms
نمایش به صورت سبک کلاسیک

می‌توانید به جای آن، سبک کلاسیک را انتخاب کنید، که با انتخاب یکی از تصاویر به صورت زیر نمایش داده می‌­شود:

سبک کلاسیک در WPForms
نمایش به صورت سبک کلاسیک

همچنین شما می‌­توانید گزینه “none” را برای سبک  نمایش انتخاب کنید. در این حالت، تصاویر شما به سادگی تصاویر معمولی و بدون حاشیه و یا یک ظاهر طراحی ساده خواهند بود به گونه‌­ای که برچسب­‌های هر عکس با radio buttons نشان داده می­‌شوند.

سبک none در WPForms
نمایش به صورت سبک none

در صورت تمایل می‌­توانید چند ستونه بودن این عکس­‌ها را  با استفاده از روش ” Choice Layout ” تغییر دهید. پیش فرض “” Inline است و بسته به نوع انتخاب شما می­‌توانند گزینه‌های تصویری در فرم وردپرس را در کنار یکدیگر قرار دهید یا در چندین ستون و به صورت عمودی در کنار هم قرار بگیرند.

Choice Layout-گزینه‌های تصویری در فرم وردپرس
تنظیمات گزینه Choice Layout

علاوه بر گزینه­‌هایی که گفته شد، گزینه ” Hide Label ” نیز برای گزینه­‌های تصویری در فرم وردپرس وجود دارد. این بدان معناست که هیچ متنی در زیر تصاویر به نمایش در نخواهد آمد. در برخی موارد، ممکن است انجام این کار منطقی باشد. به عنوان مثال ممکن است از مردم بخواهید نظر دهند که کدام یک از برند یا محصول جدید را دوست دارند.

افزودن، حذف یا ویرایش فیلدها در فرم

شما می­‌توانید فیلدهای موجود در فرم خود را اضافه، حذف یا ویرایش کنید. برای ویرایش یک فیلد کافیست روی آن کلیک کنید.

به عنوان مثال، ممکن است بخواهید قسمت “نظر یا پیام” را به صورت اختیاری تغییر دهید و یک برچسب متفاوتی در این قسمت داشته باشید. بعد از کلیک بر روی فیلد مورد نظر، می‌­توانید آن را در سمت چپ صفحه، ویرایش کنید. برای این کار ابتدا برچسب مورد نظر خود را تایپ و سپس  کادر ” Required ” را علامت بزنید تا قسمت مورد نظر انتخاب شود.

paragraph-گزینه‌های تصویری در فرم وردپرس
ویرایش فیلد دیدگاه در فرم

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

حذف فیلد دلخواه در فرم
حذف فیلد دلخواه در فرم

و در آخر و پس ار ویرایش­‌های لازم، روی دکمه “Save” در بالای صفحه کلیک کنید.

اضافه کردن فرم به وبسایت

شما می­‌توانید فقط با چند کلیک، فرم خود را به هر پست یا صفحه­‌ای در سایت خود اضافه کنید. خب برای این کار ابتدا یک صفحه جدید باز می­‌کنیم. پس به قسمت صفحات بروید و افزودن جدید را بزنید، سپس روی دکمه (+) کلیک کنید تا یک بلوک به صفحه خود اضافه کنید. بلوک WPForms را در قسمت Widgets پیدا کنید، یا با استفاده از نوار جستجو  آن را جستجو کنید. سپس، بر روی بلوک کلیک کنید تا آن را به صفحه خود اضافه کنید.

اضافه کردن فرم به صفحه
اضافه کردن فرم به صفحه

در مرحله بعدی، بر روی دکمه ” Select a Form ” کلیک کنید و بر روی نام فرم خود کلیک و آن را انتخاب کنید.

انتخاب فرم برای قرار دادن صفحه
انتخاب فرم برای قرار دادن صفحه

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

choose image in form-گزینه‌های تصویری در فرم وردپرس
فرمی که در آن قابلیت انتخاب عکس اضافه شده است.

اگر پس از نمایش، می­‌خواهید در فرم خود تغییراتی ایجاد کنید، می­‌توانید همان فرم را در WPForms  و در بخش All Forms پیدا کنید. هنگامی که تغییرات خود را ذخیره کردید، فرم شما به طور خودکار در صفحه شما نیز بروزرسانی می‌­شود و نیازی به دوباره اضافه کردن فرم به صفحه یا پست خود ندارید.

ایجاد تصاویر در فرم یک سایت وردپرسی

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

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

دانلود افزونه Contact Form by WPForms صفحه افزونه
مشاوره آموزشی رایگان
شما این فرصت را دارید، با تکمیل فرم زیر، قبل از انتخاب دوره آموزشی مناسب خود، از مشاوره رایگان کارشناسان آموزشی مجموعه همیار آکادمی استفاده نمائید.
 
مشاوران آموزشی
همیار آکادمی
پاسخگوی شما هستند
آیا این مقاله برای شما مفید بود؟
تقریبا
خیر

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

339,213 نفر

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

مطالب زیر را حتما بخوانید

    افزونه فرم ساز پیشرفته

    در تاریخ ۱۵ اردیبهشت ۹۳ بروز شد  تمامی مشکلات برطرف گردید و برای تمام کسانی که نسخه قبل رو خریده بودند نیز ارسال شد آیا تا بحال به فکر ساخت...

دوره‌های آموزشی