Embedding Forms: Classic Editor and Page Builders

Overview

With your Gutenforms Form(s) created, you’ll want to display them on your WordPress web site – typically within a Page, Post or Custom Post Type.

How you do this when editing a Page, Post or Custom Post Type will depend on whether you’re using the Classic Editor or a Page Builder.

Using Gutenberg for your Page? Refer to the Gutenberg documentation.

Adding a Gutenforms Form: Classic Editor

To add a Gutenforms Form to your Page, Post or Custom Post Type using the Classic Editor:

  • Click the Gutenforms icon in the Classic Editor toolbar:
    Gutenforms: Classic Editor: Toolbar
  • Choose the Gutenforms Form to display
    Gutenforms: Classic Editor: Insert Form
  • Click the Insert button

A shortcode will then be displayed in the Classic Editor:
Gutenforms: Classic Editor: Shortcode

Previewing or viewing the Page will then display the Form.

Adding a Gutenforms Form: Page Builders

The following Page Builders provide specific modules / widgets where the Classic Editor steps above can be performed:

Page Builder Supported Module / Widget Name
Avada / Fusion Builder Text Block
Beaver Builder Text Editor
BeTheme / Muffin Page Builder Visual Editor
Bold Builder Text Element
Divi Text Module
Elementor Text Editor
Enfold / Avia Layout Builder Text Block
Flatsome UX Builder Text Element
Live Composer Text Element
Oxygen Builder Rich Text Module
Porto2 Uses Classic Editor or Gutenberg
Pro Theme / Cornerstone Page Builder Each Dynamic Element is registered as an Element in Cornerstone
SiteOrigins Page Builder Editor Module
Thrive Architect WordPress Content Element
Visual Composer Text Block
WPBakery Page Builder Text Block
X Theme / Cornerstone Page Builder Each Dynamic Element is registered as an Element in Cornerstone

If you’re using a different Page Builder, or want to embed a form in a different module / widget, you can use the Shortcode syntax described below.

Adding a Gutenforms Form: Shortcode

To add a Gutenforms Form anywhere on your site where shortcodes are supported, simply enter the following shortcode text:
[gutenforms form_id="your_form_id"]

You’ll need to replace “your_form_id” with the Gutenforms Form ID, which can be found by:

  • Clicking on the Gutenforms menu in the WordPress Administration Menu
    Gutenforms Menu
  • Click the Copy button beside the shortcode for the applicable Form:
    Gutenforms: Shortcode: Copy
  • Paste the shortcode in your content as necessary.