How to embed a Gravity Form with (or without) shortcodes

Once you’ve finished signing up for Gravity Forms, spent some time exploring the templates, and made your first form, it’s time to add it to a page.

Or maybe you’ve only just installed Gravity Forms, and are trying to figure out where to go next. Fortunately, Gravity Forms has already added several forms on installation. So you can get started adding them to a page right away. Here’s how:

Understanding WordPress Blocks and Shortcodes

If you’re already experienced with shortcodes and blocks, feel free to skip ahead to the next section. If not, this is a quick, 2-minute crash course.

Shortcodes

Shortcodes have been around for quite a while. They made it easy to add widgets like videos and galleries to your website.

Traditionally, that task would often involve getting your hands dirty with JavaScript or at least HTML. Shortcodes were shortcuts to help you avoid code.

As nice as Shortcodes were, they still involved some arcane knowledge that wasn’t accessible to every caliper of WordPress site creator. So, as of version 5, WordPress introduced blocks.

Blocks

Blocks are similar to shortcodes, but they can be added graphically and without looking up codes and variables. As of version 5, all WordPress design elements are now blocks by default.

As the name suggests, they’re the building blocks of your website. They include text, headers, images, and everything else.

Even shortcodes are now blocks.

How to embed a Gravity Form in WordPress

Whether you use shortcodes or blocks is your choice. Shortcodes often have more options and give you a little control over how things work. But they can also be trickier to implement.

1. Adding a Gravity Form as a Block

Adding blocks to your site is as easy as typing. As soon as you start entering text, WordPress turns it into a Paragraph block.

But adding other types of blocks is pretty easy as well. You have two options.

Adding blocks with a mouse

• Click on any blank line and you’ll see a plus button to the right of it.
• Click that plus and you’ll see a modal pop-up.
• From there, you can search for the block you want, select an option from the default list, or click the button at the bottom to see a complete menu.

Adding blocks with a keyboard

• Type a forward slash “/”.
• A list will pop up showing a few options.
• Start typing the name of the block you want.
• Keep typing or use the arrow keys to select a block.

Now add a Gravity Form

Using the keyboard or the mouse method, type “grav” as your search and you should see a Gravity form block available. Select that.

The Gravity Form block gives you one thing to do. You can select a form from the dropdown. So go ahead and choose one.

Your form should automatically show up.

If you click anywhere on the form, four buttons show up near the top of the form. The pencil button lets you edit the form and the gear lets you edit its settings.

2. Adding Gravity Forms with a Shortcode

But before you can add a form shortcode, you’ll need to look up a form ID.

As was mentioned before, shortcodes have been blocks since version 5. To add a Gravity shortcode, start by adding the shortcode block.

Getting the Shortcode

If you’re working on a page or post, save it and go back to the admin panel.

Now choose the Forms item with the gravity icon from the left menu. Open any form in the form list.

Click the embed button from the upper-right-hand corner of the menu bar above the form editor. A modal that completely covers the form will pop up.

Scroll to the bottom of the modal and click Copy Shortcode. That will give you a typical embed shortcode.

Navigate back to the page you were working on. Now add the shortcode to the shortcode block.

You’ve probably noticed that adding the shortcode involved a few more steps than the block. So why would you want to use shortcodes? The answer is shortcode options.

Shortcodes offer a handful of variables that aren’t available in the block form. The default shortcode you copied probably had “id” and “title.” Here are the others you can use:

• id - The unique identification number of your form.
• title - Show or hide the form title.
• description - Show or hide the description.
• ajax - AJAX lets pages and posts refresh without a reload. It’s not as big of a deal as it was in 2008.
• tabindex - Choose a starting tab.
• field_values - Lets you set default values.

More features, more freedom

As you’ve learned, there are two ways to add blocks to your site. You can click the plus and search for the block you want. Or you can add a forward slash “/” and just type to find the block you want.

Once you get used to the forward slash technique, you’ll find it very natural and intuitive because it’s just typing. You can add blocks like a pro without moving your fingers from the keyboard.

Unfortunately, Gravity Forms doesn’t work like that. You have to drag and drop the elements, which is nice, but it’s less efficient. It would be much better if you could build out your form like you were writing a document.

Luckily, you can do that with another form tool called Paperform.

Paperform is a form tool that exists outside of the WordPress ecosystem, but can still be dropped into WordPress as smoothly as any plugin. And since Paperform isn’t a WordPress plugin, you’re unleashed from the clunky rigid interfaces that most plugins have.

Also, Paperform is a dedicated, real-world form tool, it has many more features and a lot more depth than Gravity forms. Check it out for free.

Related reading

• The 6 best WordPress form plugins in 2023
• How to add a contact form to WordPress
• 7 ways to boost form conversion rates
• How to build a lead generation funnel with online forms
• How to add a form to a Shopify store