So you're looking to embed Gravity Forms on your WordPress website, but don't quite understand how. You know you need a shortcode, but what is that, where do you find it, and what do you do with it?

Here, we'll explain what a shortcode is, how to find and use the Gravity Forms shortcode, and how to avoid needing a shortcode entirely.

How to Embed Using the Gravity Forms Shortcode

The quickest way to embed forms is using the Gravity Forms shortcode. A shortcode is a bit of code, in square brackets, used by WordPress plugins to insert things in posts or pages.

Until recently, shortcodes were pasted on their own line in the classic editor. It was kind of confusing, but it worked. In WordPress 5 and later, the Gutenberg editor offers dedicated shortcode blocks.

To get started, open the page you want to add the Gravity Forms shortcode to, then click the + icon to insert a new block.

Search for and select Shortcode.

Now you can paste or type out your Gravity Forms shortcode. Here it is:

[gravityform id="1"]

Use that right now and the Gravity Form with the ID number 1 will show up on that post or page. Change the number to change the form used on the page. You can find the ID numbers for your forms in the Gravity Forms page of your WordPress backend.

There are a few options you can add to the shortcode in order to customize how it looks on your page.

  • Add title="false" and your form's title will no longer show up in the post or page.

  • Add description="false" and your form's description will no longer show up in the post or page.

You can put these options after the ID number but inside the square brackets to disable both the title and the description. Like this:

[gravityform id="1" title="false" description="false"]

There are a few other, more complex options, which you can read about here.

How to Embed Gravity Forms Without a Shortcode

If keeping track of shortcodes doesn't seem fun to you, don't worry: You can use a dedicated Gravity Form block instead, which also lets you preview your forms in the WordPress editor. The only downside is you'll have to download and install the Gravity Forms Gutenberg Add-On. You'll find it on the Gravity Forms download page.

Once the plugin is installed, you can quickly add a Gravity Forms block to any WordPress post or page.

You can choose which form to embed using a dropdown menu, meaning there's no form ID to look up.

And the form will show up in the editor itself, allowing you to see it in context without having to open a preview page.

It's easier to keep track of than Gravity Forms shortcodes, so download the plugin if you're tired of doing things manually.

Connect Gravity Forms to Thousands of Other Apps

You're setting up Gravity Forms to gather information from people who visit your website, but what are you going to do with that information? With Zapier, you can send form entries to thousands of other apps, automatically, saving you from having to copy that information yourself.

[gravitypdf] Shortcode

You can easily add a PDF download link to Gravity Forms Confirmation and Notifications with the [gravitypdf] shortcode. Using the optional Entry Attribute you can also include it on any other WordPress page. If you only need the PDF URL, you can use the PDF Mergetags that have been added in Gravity PDF 4.1.

Jump To Section

Security

There are a number of security protocols in place to prevent unauthorised access to PDF documents. Before using this shortcode it's highly recommended you review the documentation detailing PDF security.

Using the Shortcode

We wanted to make it as simple as possible to use the [gravitypdf] shortcode in your form's confirmations and notifications. With that in mind, we added a Download PDF column to the PDF form list, which has a sample shortcode for each PDF you have set up. Just copy and paste the shortcode sample to your confirmation or notification and click save1. The default behaviour is to generate a download link to the PDF with the text Download PDF. Simple!

Confirmation Types

Gravity Form Confirmations is what gets shown to the user after they complete a form. They come in three flavours:

  1. Text Confirmations
  2. Page Confirmations
  3. Redirect Confirmations

We've ensured the [gravitypdf] shortcode works with as little configuration as possible across all confirmation types.

Text

The text confirmation is the simplest Gravity Forms confirmation type. When selected, you can enter a message using the WordPress editor.

To get it functioning you just need to copy and paste the sample shortcode found on the PDF form list.

Page

The page confirmation allows you to redirect users to an existing WordPress page. This method is not quite "copy and paste", but it's close.

To get it functioning you need to copy the sample shortcode found on the PDF form list and place it on the WordPress page you're sending your user to. Once done, go back to your confirmation configuration and enable the Pass Field Data Via Query String option. Add entry={entry_id} to the field that appears and click save.

Redirect

The redirect confirmation allows you to send the user to another location upon completing their form. If you choose, you can redirect the user to a PDF.

To get it functioning you just need to copy and paste the sample shortcode found on the PDF form list. When you save the confirmation the shortcode will automatically be converted to a direct PDF link.

Usage in Notifications

Gravity Form Notifications are automated emails sent after the form is submitted. If you would prefer not sending the PDF as an email attachment (usually for security reasons) you can use the [gravitypdf] shortcode and create a direct link to the PDF.

Because of the security protocols, this method is very effective when the recipient has a WordPress user account. We don't recommend using it if your forms will be completed by logged out users – add a shortcode to the confirmation page instead.

Building the Shortcode

While we provide a quick and easy way to get a particular PDF's [gravitypdf] shortcode, it's also useful to know what each attribute does, and how it affects the display of the PDF download link that gets generated.

Attributes

The [gravitypdf] shortcode is customisable and there are a number of attributes which can be used to change the default behaviour.

ID (required) : The ID attribute is required and refers to the ID assigned to a particular form's PDF. The easiest way to get the ID is to use the sample shortcode on the PDF form list, as it includes the PDF ID already. However you can find a PDF's ID in the URL when updating the PDF settings. This is denoted by the pid parameter.

*/wp-admin/admin.php?page=gf_edit_forms&view=settings&subview=pdf&id=2&pid=**560f2ef799945***

: Example: [gravitypdf id="560f2ef799945"]

Name (optional) : This attribute doesn't effect the shortcode in any way, but does allow you to quickly determine which PDF it references.

Text (optional) : This attribute allows you to change the generated link's text which the end-user will see. : If the text attribute isn't present it will default to Download PDF. : Example: [gravitypdf id="560f2ef799945" text="View PDF"]

Type (optional) : The type attribute has two valid parameters: download and view. When the download option is set, and a user clicks the PDF link, a save dialog box will open – allowing a user to download and then view the PDF locally. When the view option is set the PDF will be rendered in their web browser. : If the type attribute isn't present it will default to download. : Example: [gravitypdf id="560f2ef799945" type="view"] or [gravitypdf id="560f2ef799945" type="view" text="View PDF"]

Class (optional) : The class attribute allows you to set a specific class on the generated PDF anchor tag (<a></a>). This is useful when you want to style the link a certain way. : If the class attribute isn't present it will default to gravitypdf-download-link. : Example: [gravitypdf id="560f2ef799945" class="my-custom-button-class"] or [gravitypdf id="560f2ef799945" class="my-custom-button-class a-second-class"]

Print (optional) : The print attribute will automatically open a print dialog box when the PDF is viewed. : Example: [gravitypdf id="560f2ef799945" print="true"]

Entry (semi-optional) : When the shortcode is used in Gravity Form confirmations or notifications this attribute can be omitted (as we already know which entry is being processed). However, if you want to use the shortcode outside of that environment you need to pass in the Gravity Form entry ID. : Alternatively, instead of passing the entry ID directly to the shortcode you can set the ID via URL parameters (the "query string"). If the entry or lid URL parameters exist its value will be used as the ID (see Page Confirmation for more details). : Example: [gravitypdf id="560f2ef799945" entry="250"] or [gravitypdf id="560f2ef799945"] with a URL like http://test.com/?entry=250

Common Problem

If the [gravitypdf] shortcode doesn't display a link to the PDF an error likely occurred. To verify this, enable Shortcode Debugging in the Global PDF Settings and test again using an Administrator WordPress account.

Using the Mergetag

Gravity PDF Mergetags are only available in Gravity PDF 4.1 or higher

If you don't need a HTML download link to the PDF, but do want to access the PDF URL you can use the new PDF Mergetags. These are included automatically in the Gravity Forms Merge Tag selector and can be used anywhere merge tags are supported.


  1. The Page confirmation method requires a little extra configuration than text and redirect confirmations.

Edit this page

Last updated on 2020. 11. 22.

Previous

« Viewing Configured PDFs in your Admin Area – Gravity PDF

Next

Managing PDFs – Add, Edit, Deactivate, Duplicate and Delete »

 

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!

 

Posted by Megan Jones at 9:47 am on September 1st, 2020 | 2 comments

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 article for 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, select Media > 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 the HTML field, which you will find under Standard Fields.

Switch over to your Media Library and copy the URL of the image you would like to embed.

Then, in the HTML field, under Content, 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 the Gravity Forms Docs.

Adding Images to Other Form Fields

As well as the HTML form 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 selected Radio Buttons

Under Radio Button Field 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 is gf_list_2col. This should be entered in the Radio Buttons Field Settings > Appearance > Custom CSS Class.

For more information on Ready Classes, check out this CSS Ready Classes Guide.

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.

Rather Use a Plugin?

If adding HTML markup to form fields isn’t for you, then of course there’s a third-party plugin that you can use instead. Gravity Forms Image Choices is a premium add-on brought to you by JetSloth, one of the Gravity Forms Certified Developers.

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 demo to 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…

 

 

www.gravityforms.com/how-to-add-images-to-a-form/

+ Recent posts