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.
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:
- Choose the Gutenforms Form to display
- Click the Insert button
A shortcode will then be displayed in the Classic Editor:
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
- Click the Copy button beside the shortcode for the applicable Form:
- Paste the shortcode in your content as necessary.