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.