Form

Embed forms from popular WordPress form plugins

Overview

The Form element embeds forms created by popular WordPress form plugins directly into your page builder designs. Instead of building forms from scratch, you can leverage the powerful form builders you already use.

The Form element supports multiple form plugins:

  • Contact Form 7 – The most popular free form plugin
  • WPForms – Beginner-friendly drag-and-drop form builder
  • Gravity Forms – Advanced form solution with conditional logic
  • Formidable Forms – Feature-rich form and application builder
  • Ninja Forms – Flexible form builder with extensive add-ons

To embed a form, enter the form's shortcode or select from detected forms. The form renders on both the canvas preview and the published frontend, maintaining all plugin functionality including validation and submission handling.

The Form element cannot have children — all form content comes from the shortcode output generated by your form plugin.

Settings

Configure the Form element using these Inspector options:

Setting Description Default
Form Shortcode (formShortcode) The full shortcode string from your form plugin. Copy this directly from your form plugin's form list. (empty)
Form Plugin ID (formPluginId) An optional ID for plugin-specific shortcode generation. Some plugins can auto-detect forms by ID. (empty)
Wrapper Classes (wrapperClasses) Additional CSS classes applied to the form container div. Use for spacing, backgrounds, or custom styling. (empty)

Supported Form Plugins

Each form plugin uses a different shortcode format. Here are the shortcode patterns for each supported plugin:

Plugin Shortcode Format
Contact Form 7 [contact-form-7 id="123" title="Contact"]
WPForms [wpforms id="123"]
Gravity Forms [gravityform id="123" title="false"]
Formidable Forms [formidable id="123"]
Ninja Forms [ninja_form id="123"]

Finding Your Form Shortcode

Follow these steps to find and use your form's shortcode:

  1. Create your form in your form plugin's builder interface
  2. Navigate to the forms list in your plugin's admin area
  3. Copy the shortcode shown next to your form (usually in a "Shortcode" column)
  4. Paste the shortcode into the Form Shortcode field in the Inspector
  5. Preview — the form appears in the canvas preview
Styling Tip

Style forms using the wrapperClasses field to add background colors, padding, or borders. For more specific styling, add custom CSS targeting your form plugin's CSS classes in the theme's Custom CSS section.

Important

Form submission, validation, and email notifications are handled entirely by your form plugin — not by the page builder. Always test your forms on the published frontend after making changes to ensure they work correctly.

Examples

Contact Form 7 Embed

Embed a Contact Form 7 form using its shortcode.

<!-- Form element with Contact Form 7 shortcode -->
<div class="form-wrapper">
  [contact-form-7 id="123" title="Contact Form"]
</div>

<!-- The shortcode renders to: -->
<div class="form-wrapper">
  <form action="/contact/#wpcf7-f123" method="post" class="wpcf7-form">
    <p>
      <label>Name</label>
      <span class="wpcf7-form-control-wrap">
        <input type="text" name="your-name" class="wpcf7-form-control">
      </span>
    </p>
    <p>
      <label>Email</label>
      <span class="wpcf7-form-control-wrap">
        <input type="email" name="your-email" class="wpcf7-form-control">
      </span>
    </p>
    <p>
      <input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit">
    </p>
  </form>
</div>

WPForms with Custom Wrapper Classes

Add custom styling to a WPForms embed using wrapper classes.

<!-- Form element with wrapper classes for styling -->
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
  [wpforms id="456"]
</div>

<!-- Inspector Settings: -->
Form Shortcode: [wpforms id="456"]
Wrapper Classes: bg-gray-50 p-6 rounded-lg shadow-sm

Styled Form Container

Create a visually appealing form section with background and padding.

<!-- Section containing a styled form -->
<section class="py-16 bg-blue-600">
  <div class="container mx-auto max-w-xl">
    <h2 class="text-3xl font-bold text-white text-center mb-8">Get in Touch</h2>
    <div class="bg-white p-8 rounded-xl shadow-lg">
      [gravityform id="789" title="false" description="false"]
    </div>
  </div>
</section>

<!-- Inspector Settings for Form element: -->
Form Shortcode: [gravityform id="789" title="false" description="false"]
Wrapper Classes: bg-white p-8 rounded-xl shadow-lg

Custom CSS for Form Plugin Styling

Override form plugin styles using Custom CSS in your theme settings.

/* Custom CSS for Contact Form 7 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
  @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.wpcf7-form input[type="submit"] {
  @apply w-full bg-blue-600 text-white py-3 px-6 rounded-lg hover:bg-blue-700 transition-colors cursor-pointer;
}

/* Custom CSS for WPForms */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container textarea {
  @apply w-full px-4 py-2 border border-gray-300 rounded-lg;
}

.wpforms-container .wpforms-submit {
  @apply bg-blue-600 text-white py-3 px-6 rounded-lg hover:bg-blue-700;
}
Plugin Installation Required

The Form element requires that you have a form plugin installed and activated in WordPress. Create your forms using the plugin's interface, then embed them in the page builder using the Form element.

Next Steps

  • Accordion – Learn about expandable content panels
  • Tabs – Organize content in tabbed panels
  • Inline Code – Embed custom HTML or shortcodes