How To Add Gravity Forms Shortcode Anywhere On Your Site?

Gravity Forms is a popular plugin that was designed for adding contact forms to a WordPress website. Using Gravity Forms shortcode, you can easily add contact forms anywhere on your site. But Gravity Forms can be used for various other purposes as there are many addons for Gravity Forms.

Using those addons you can create employment applications, surveys (see best WordPress survey plugin), create calculator forms in WordPress, receive payments, integrate with various third-party tools, and much more.

There are many other form builder plugins like WPForms (WPForms vs Gravity Forms comparison), FormidableForms, HappyForms, etc. But Gravity Forms is one of the most popular and most used.

Gravity Forms is written in PHP. It utilizes several different built-in WordPress features and functions for its form builder. It uses the same MySQL database system that WordPress does, but Gravity Forms keeps all entries and forms in its own set of tables.

WordPress shortcodes let users display preselected items in WordPress posts and pages and allow users to perform certain actions. The Gravity Forms shortcode is the main method for displaying Gravity Forms on your website.

Form shortcode can be used anywhere in WordPress that accepts shortcodes. Most users will put their shortcode in post or page content. Shortcodes are integrated whenever you add a form to a page using a standard WordPress editor.

 

Using the Classic Editor to Add Gravity Forms Shortcode

In the Post or Page Editor, click on the “Add Form” button that appears in the toolbar. This toolbar is located in the body text editor, just left of the Visual/Text tabs menu. The “Insert A Form” window will appear once you’ve clicked on the “Add Form” button.

 

 

Now you can choose a form from the “Select A Form” dropdown option. If you can’t find the particular form that you want in the dropdown list, you can always go back to the Edit Forms page to ensure that your form is active.

 

 

You can choose from the following options after you’ve picked your form:

• Display form title – Selecting this option will show your form’s title.
• Display form description – Clicking on this option will show your form’s description.
• Enable AJAX – Activating this option will let you send forms via AJAX. Using this method makes possible submitting forms without needing to refresh the page. However, because of reCAPTCHA (see how to stop spam form submissions in WordPress forms) limitations, any submitted forms that have reCAPTCHA fields won’t be submitted using AJAX, even if you’ve enabled this feature.
• Tab index – This option located under Advanced Options allows you to designate the starting tab indexes for all fields on your form.

Once you’ve selected and saved your settings, click on the “Insert Form” button. This option will automatically insert the Gravity Forms shortcode in the body of the post or page that you’ve been editing.

 

Using Gutenburg to Add Gravity Forms Shortcode

WordPress 5 introduced Gutenberg, a block-based post and page editor, to replace the classic editing environment. Gravity Forms has its own blocks that can be used in Gutenburg.

The Gravity Forms Gutenburg Block is a new content block for the WordPress Block-based page editor. You can use it to integrate any Gravity Forms that you’ve saved as content blocks from the editor interface. Anyone with an active Gravity Forms license can use this content block. You can add forms to your posts or pages via the Gravity Forms block function.

Start in the form editor, and select the “Add Block” icon (+). Next, choose the Gravity Forms block. You can find this option in the Embed section, or you can also use the block search feature.

 

 

Then you can choose which form to embed by using the drop-down menu that appears in the Gravity Forms block place holder. The standard Gravity Forms editor can still be used for editing and creating forms.

 

 

The block will show a representation of the form after a form has been selected.

 

 

You can use the Advanced section of the block’s settings to disable this preview if you want.

 

 

The editor panel’s limited space may not display certain elements correctly in the preview, due to the limited mobile layout sizing constraints. The same elements will most likely be displayed differently when using a desktop or laptop web browser.

You should preview your form before publishing it to ensure that the final version is accurate. If you want to edit your block options, start by choosing a form. You can select your appearance settings panel in the inspector, or click on the horizontal ellipses option that appears just to the right of your content block.

 

Reusable Blocks

Any editor block that you use (including the Gravity Forms block) can be set to reusable. This means you can add that block in various other pages and posts. When you make a change to that block, it will be applied to all posts/pages where that block can be found.

All you have to do is to select the option that appears in the overflow menu option. This will then create a saved block.

The saved block includes all of the options that were specified at the time that the reusable clock was first created. You can add the saved block to any page that you want.

If you want to edit a reusable block, start by selecting the “Edit” button that’s at the bottom of the block. Any changes that you make will be applied to all copies of that reusable block that are currently being used.

You can use the “Detach from Reusable Block” option to turn the reusable block into a regular block that can be edited independently.