1. Locate and Configure Settings
The page break option within Gravity Forms allows you to create multiple pages within one section of your website. This not only allows you to save space within one section of a page, but also gives the person filling out the form more incentive to continue on.
For starters, you will need to locate the ‘next button settings’ within the page break element. Click on the page break element and you will see the dropdown settings (shown below). You have three tabs within the configuration here, General, Appearance, and Advanced. For the purposes of changing the next button we will stick within the General tab.
For starters, you will need to locate the ‘next button settings’ within the page break element. Click on the page break element and you will see the dropdown settings (shown below). You have three tabs within the configuration here, General, Appearance, and Advanced. For the purposes of changing the next button we will stick within the General tab. Gravity Forms by default sets the settings to “default” (surprise surprise). You will need to change the Next Button settings to Image.
2. Create The New Button Image
Next, you will need to create or upload the next button to replace the Gravity Forms default image. If you already have your button image ready to swap out, skip to step number three below.
For the purpose of this exercise I created a quick button using Adobe Illustrator. The dimensions of the canvas used are: 150 width x 35 height (in pixels). This is not a tutorial in Adobe Illustrator but quick changes that you might want to consider are the button’s color and shape. Make something that stands out so that users will find it. If your site has a certain typography as well, this would be a great opportunity to match the settings within any of the image-creation software you are using. Keep in mind that the font size that renders within your site will not match exactly inside Adobe Illustrator, Canva, Photoshop, etc.
This is because the button made from any of the image-creation software will render and be saved as an image rather than a dynamic font. It is important to save the final button as an image in .png format, preferably with a transparent background. If you cannot save the image with a transparent background, make sure that the button’s background color matches that of your site (where the Gravity Form will be embedded).
For the purpose of this exercise I created a quick button using Adobe Illustrator. The dimensions of the canvas used are: 150 width x 35 height (in pixels). This is not a tutorial in Adobe Illustrator but quick changes that you might want to consider are the button’s color and shape. Make something that stands out so that users will find it. If your site has a certain typography as well, this would be a great opportunity to match the settings within any of the image-creation software you are using. Keep in mind that the font size that renders within your site will not match exactly inside Adobe Illustrator, Canva, Photoshop, etc.
This is because the button made from any of the image-creation software will render and be saved as an image rather than a dynamic font. It is important to save the final button as an image in .png format, preferably with a transparent background. If you cannot save the image with a transparent background, make sure that the button’s background color matches that of your site (where the Gravity Form will be embedded).
3. Upload and Swap Out Image
Now it’s time to upload your new .png button. Head on over to the media library or upload feature of your website. Select the button’s file and upload to the media library. Upon upload completion click on the new image thumbnail to open up the image settings.
Now it’s time to upload your new .png button. Head on over to the media library or upload feature of your website. Select the button’s file and upload to the media library. Upon upload completion click on the new image thumbnail to open up the image settings. Once inside the image’s settings, scroll down to the “Copy Link” line. Copy this URL exactly (beginning with https: – www. – http – it will vary on the website’s structure), shown below.
Take the copied link from the settings and paste it into the image path URL from the first step. Make sure to update and save your Gravity Forms before exiting and congrats your button will now render as the updated image. These exact steps can also be used to change the “Previous” button as well.
If you have any questions, need a customized button created, or just want to say hello, get in touch below!
