With the Bulk Actions add on for Gravity Forms, you can now make a selection of form fields and copy them to any of you other forms on your WordPress website. Simply make a selection of fields and press the ‘Copy to form‘ button at the top of the page.
You’ll be prompted to selected the destination form you’d like to copy the selected fields to. Make your selection and you’re done!
Gravity Forms enables you to create stylish forms that connect with your audience and boost conversions. Adding images to forms can further enhance user engagement, personalizing or adding excitement to the form process, and ensuring your forms convey the right message.
With Gravity Forms, embedding images into forms is a quick and easy process. In this ‘How to…’ article, we will look at a few different ways you can add images to a form, including a third-party plugin that can do the job for you.
Let’s get started…
Note:The images shown within this article use the new Gravity Forms 2.5 form builder. 2.5 is currently in beta, but if you like what you see,check out this articlefor more information on 2.5 and how to install 2.5-beta-1.
Uploading Images
With Gravity Forms, you can display custom images within your form. This allows you to use relevant and attention-grabbing images that your users will relate and respond to. To add images to a form you will first need to upload your chosen images to your website’s media library.
To do so, within your WordPress dashboard, selectMedia > Library > Add New > Select Files.
Then simply select the images you want to use and upload them to the media library - once uploaded, these images are then ready to be embedded into a form.
Adding an Image to a Form
To add a stand-alone image to a form, open the specific form and then select theHTMLfield, which you will find underStandard Fields.
Switch over to yourMedia Libraryand copy the URL of the image you would like to embed.
Then, in theHTMLfield, underContent, paste in the URL within these parameters…
<img src=“Paste Image File URL Here”>
Check out the image below to see this in action…
You will now need to save and preview the page to check that your image has been embedded into your form.
An HTML field can be added anywhere within a form, enabling you to add as many images as you want, wherever you deem appropriate. For more information on using the HTML field to add JavaScript or other HTML content to your forms, check out theGravity Forms Docs.
Adding Images to Other Form Fields
As well as theHTMLform field, images can also be added within other fields. This can be useful if you want your users to choose from a list of options, as you can display an image for each option helping people to easily make a decision.
To set this up, firstly you will need to choose the appropriate field that you want to use to display your options. Here we have selectedRadio Buttons…
UnderRadio ButtonField Settings > General > Choices, you can edit the text for each radio button as well as add an image for each choice. To add an image, follow the same process as discussed previously - copy the URL of the image and then enter it within these parameters<img src=“Paste Image File URL Here”>
After you have entered an image for each choice, again save and preview the form.
Top Tip:If you would like the images to appear in two, or more, columns (see the image at the top of this section) then you will need to enter the relevant CSS Ready Class, which for two columns isgf_list_2col. This should be entered in theRadio Buttons Field Settings> Appearance > Custom CSS Class.
Once the form is live, the user just has to click on the relevant image to select a specific option. This is a great way to create user-friendly forms, encouraging your audience to complete and submit forms, and helping your website to achieve its goals.
With this add-on, you can seamlessly embed images into Checkbox or Radio Button fields, as well as enable a lightbox feature to give users a better viewing experience. This add-on also supports Polls, Surveys, and Quiz fields, as well as the Product and Option fields when Checkbox or Radio Buttons are selected.
Final Thoughts on How to Add Images to a Form
Displaying images within a form adds significantly to aesthetics and user experience, so it is well worth taking the time to add stylish and relevant images. As always with Gravity Forms, there are numerous options when it comes to embedding images into a form, so simply select the strategy that works best for you and your forms - let us know how you get on!
Not a Gravity Forms customer yet?Sign up for our free demoto check out just how easy it is to add an image to a form. You can also view our numerous form templates as well as create your own forms.
Any questions on embedding an image into a form? Please ask away in the comments below…
If you have a form with quite a few fields, it can sometimes become a bit daunting for someone filling out the form. Many times, the form can be simplified by spanning it across several pages. Due to less content being displayed at a time, large forms will not only become more pleasant but also load faster on your site because less information is being loaded at a time. In this article, we will show you how to create a multi-page form using Gravity Forms.
Setup
First, you’ll need to access the form editor within Gravity Forms. To do so, click onFormson the left side of your WordPress admin, then click onAdd New.
Next, it’s time to start creating a form by adding fields. This article assumes that you have a basic understanding in creating forms, but if you need more information on how to create a form in Gravity Forms, see ourform creationarticle. Go ahead and add any fields you will need.
Now that you have your form fields in place, you just need to separate the fields by page. To do this, go to the right of the form editor and look inside theStandard Fieldssection. Inside this section, click on thePagefield type.
Upon clicking onPage, you should see that 3 items have been added to the form editor. These items allow you to determine where pages begin and end. 2 of these items,Begin PagingandEnd Pagingsimply define that this form is a multi-page form. These items cannot be moved and will always be located at the beginning and end of the form editor when editing a multi-page form. You should also see aPage Breakfield type displayed within the form editor. This item separates the individual pages in a multi-page form. The items above it will be on the first page, and items after it will be on the second page.
If you want to add additional pages to a multi-page form, all you have to do is click on thePagefield type again to add an additional page break, and position it where you would like the previous page to end and the next page to begin. You can add as many page breaks as you want.
Options
To modify the behavior of multi-page forms, options exist within the individual items that are added using thePagefield. For more information on how you can modify settings specific to multi-page forms, take a look at thePage Break field typearticle.