Use the Bootstrap Modal form plugin to open a Formidable form or View in a Bootstrap modal popup. You can display a Formidable form, View, calculator, or shortcode inside a Bootstrap Modal popup.

Subscribe on YouTube

There are 2 ways to add a modal popup to a page or post:

• Use the WordPress block editor
• Insert the shortcode manually

Download and install

1. If you haven't already, install and activate the current version of Formidable Forms Premium on your WordPress site.
2. After confirming your Formidable Forms license, go to Formidable → Add-Ons and toggle on the Bootstrap Modal add-on.
   

   

Use the WordPress block editor

Add a modal popup with a block on a page or post. The block adds a button that opens the modal when clicked.

1. Open a WordPress page or post, or create a new one.
2. In the block editor, click the (+) icon in the top-left toolbar (1) to open the block library. The icon turns into an X while the library is open. Search for the Formidable Modal block (2). Then click it or drag it into your page or post (3).
   

   

3. The Modal block adds a Click here button and an empty modal. Inside the modal, add a form, View, calculator, or any other block.
   

   

4. Click the modal button to change its text. A side panel opens on the right side of the page, where you can adjust the settings and appearance of the Modal button. It includes layout options for changing the button width.
   

   

   
   To personalize the button's appearance, click the Styles icon at the top of the side panel. It looks like a half-filled circle. Then select one of the available styles, or customize the color, typography, and dimensions.
   

   

5. Click the Modal content to change the styling of the modal. A side panel opens on the right side of the page, where you can adjust the settings and appearance of the Modal dialog. It includes options for the dialog size and colors. The typography options are on the Styles tab.
   

   

Display form in modal block

1. To add a form, click inside the modal. Then click the (+) icon that appears. The icon turns into an X while the search is open. Search for and click the Formidable Forms block.
   

   

2. Select a form from the dropdown list.
   

   

To keep the modal open after the form is submitted, turn on Submit this form with AJAX in the form's settings.

Display View in modal block

1. To add a View, click inside the modal. Then click the (+) icon that appears. The icon turns into an X while the search is open. Search for and click the Formidable Views block.
   

   

2. Select a View from the dropdown list.
   

   

Display calculator in modal block

A calculator is a form, so you add it with the Formidable Forms block.

1. Click inside the modal. Then click the (+) icon that appears. Search for and click the Formidable Forms block.
2. Select your calculator from the dropdown list. Calculator forms are listed with your other forms. The calculator then shows inside the modal, and you can change it under Select Form in the side panel.
   

   

3. Publish or update the page. When someone visits the page, they can click the modal button to open the calculator.

Insert the shortcode manually

Place the shortcode on any page, post, widget, or View, or even within a form. It inserts a link that opens a Bootstrap modal when clicked.

1. In the block editor, click the (+) icon in the top-left toolbar (1) to open the block library. The icon turns into an X while the library is open. Search for the Shortcode block (2). Then click it or drag it into your page or post (3).
   

   

2. Insert the following shortcode in the Shortcode block.

   [frmmodal-content label="Click here"]Insert content here[/frmmodal-content]

   

   
   Learn more about the modal shortcode parameters.

Usage

[frmmodal-content label="Click here"]Put content here[/frmmodal-content]

Replace "Put content here" with any content you like. You can enter shortcodes as well.

Parameters

Use the following parameters with the frmmodal-content shortcode.

Required

• label: Set the label for the popup link. This is the link that opens the modal when clicked. It also sets the modal title if the modal_title parameter isn't set. In a View's Edit Listing Page Content window, you can make the label dynamic with a field shortcode, such as label="[10]". Replace 10 with the ID of your label field. This works only in a View, where the field shortcodes are replaced first. On a page or post, WordPress ends the shortcode at the first ], so the link shows broken text such as ”[10.

  [frmmodal-content label="[10]"][formidable id=x][/frmmodal-content]

  Note: Quotes are required around a parameter value that has spaces, so the full value is passed. Without quotes, only the first word is displayed.

Optional

• modal_title: Set a title for the popup.

  [frmmodal-content modal_title="Log in form" label="Click here"][frm-login][/frmmodal-content]

• modal_class: Add a class to the popup.

  [frmmodal-content modal_class="classes here" label="Click here"][formidable id=x][/frmmodal-content]

• class: Apply a CSS class to the clickable link.

  [frmmodal-content class="my-style" label="Click here"][formidable id=x][/frmmodal-content]

• size: Change the size of the popup box. Options are large or small.

  [frmmodal-content size="large" label="Click here"][display-frm-data id=x][/frmmodal-content]

• button_html: Fully control the HTML of the modal button.

  [frmmodal-content modal_title="Log in form" button_html="<a href='#'>Click here</a>"][frm-login][/frmmodal-content]

• skip_modal_wrapper: Used internally for the modal content created by the WordPress block editor. If this is empty or 0 (the default), the necessary wrapper tags are added to the modal content.

  [frmmodal-content modal_title="Log in form" label="Click here" skip_modal_wrapper="1"]
  <div class="wp-block-frm-modal-content">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <h4 class="modal-title">Modal title</h4>
                  <a class="close frm_icon_font frm_cancel1_icon alignright" data-dismiss="modal" data-bs-dismiss="modal"></a>
              </div>
              <div class="modal-body">
                  <p>The modal content</p>
              </div>
          </div>
      </div>
  </div>
  [/frmmodal-content]

  If skip_modal_wrapper is empty in the example above, you only need to pass <p>The modal content</p>.

  [frmmodal-content modal_title="Log in form" label="Click here"]<p>The modal content</p>[/frmmodal-content]

Display a form in a modal popup

To show a form in a Bootstrap modal popup:

1. Create a form if you haven't already.
2. Go to your form's Settings → General. In the AJAX section, check the Submit this form with AJAX box. Then click Update.
3. Add this shortcode to a WordPress page or post:

   [frmmodal-content label="Click here" modal_title="Subscribe here"][formidable id=x][/frmmodal-content]

   Replace x with the form ID or key, and "Subscribe here" with your own modal title. You can add any of the regular form shortcode parameters to the formidable shortcode.

4. Publish or update the page or post.

When someone visits the page or post, they can click the link to open the form in a Bootstrap Modal popup.

Display a View in a modal

To open a View in a Bootstrap modal:

1. Create a View if you haven't already.
2. Add this shortcode to a WordPress page or post:

   [frmmodal-content label="Click here" modal_title="Studio Contacts"][display-frm-data id=x][/frmmodal-content]

   Replace x with the View ID or key, and "Studio Contacts" with your own modal title. You can also add any of the regular View shortcode parameters to the display-frm-data shortcode.

3. Publish or update the page or post.

When someone visits the page or post, they can click the link to open the View in a Bootstrap Modal popup.

Show the detail page in a modal

When a View is included on a page, you can open its detail page in a modal.

1. Create a detail page for a View.
2. Instead of using [detaillink], click the Listing Page content of your View to open the Edit Listing Page Content window. Then add this shortcode.

   [frmmodal-content label="Details"][display-frm-data id=x entry=[id]][/frmmodal-content]

   Replace x with the ID or key of the View that has the detail page. This can be the same View.

3. Publish the View on a page or post.

When someone visits the published View and clicks the Details link, the detail page opens in a Bootstrap Modal popup.

Editing with a View in a modal

If you have set up front-end editing with a View, the entry can be edited in a Bootstrap modal.

1. Create a View and set up front-end editing.
2. Click the Listing Page content of your View to open the Edit Listing Page Content window. Then add this shortcode.

   [frmmodal-content label="Edit"][formidable id=x entry_id=[id]][/frmmodal-content]

   Replace x with your form ID or key. You can also add any of the shortcode parameters to the formidable shortcode.

3. Publish the View on a page or post.

When someone visits the published View and clicks the Edit link, the entry opens for editing in a Bootstrap Modal popup.

Show detail page in modal after clicking an image

A View can show a list of images that each open the View's detail page in a modal. To make an image from a single file upload field open the modal, use the shortcode below.

[frmmodal-content modal_title='Image' label='[25 show_image=1]'][display-frm-data id=x entry=[id]][/frmmodal-content]

Replace 25 with the ID of your file upload field. Replace x with the View ID or key.

Display a login form in a modal

To display a login form in a popup:

1. Edit an existing WordPress page or create a new one.
2. Insert the login form shortcode on the page.

   [frmmodal-content label="Log in"][frm-login][/frmmodal-content]

   You can use any of the regular login shortcode parameters in the frm-login shortcode.

3. Publish or update the page.

When someone visits the page, they can click the link to open the login form in a Bootstrap Modal popup.

Display a field value in a modal

To display a value from a field in a popup:

1. Edit an existing WordPress page or create a new one.
2. Add this shortcode to the page:

   [frmmodal-content label="Click here"][frm-field-value field_id="x"][/frmmodal-content]

   Replace x with the ID of the field you want to show. You can use any of the regular shortcode parameters in the frm-field-value shortcode.

   The modal shows the value from the field's most recent entry, and every visitor can see it. To show the value from one specific entry instead, add the entry parameter with the entry ID, such as entry="25".

   Since Formidable Forms 7.0, a value from a specific entry shows only to users who can view entries in the admin area (administrators by default) and to the person who submitted that entry. Since 7.0.1, that includes a logged-out visitor, in the same browser, for 1 hour after they submit it. Everyone else, including other logged-out visitors, sees nothing, or the shortcode's default value when one is set, such as default="Not available". To show a field's value to every visitor, use the frm_field_value_requires_ownership hook. Only do this for values that are meant to be public.

3. Publish or update the page.

When someone visits the page, they can click the link to open the field value in a Bootstrap Modal popup.

Open Bootstrap modal image

Show a thumbnail image that opens the full-sized version in a Bootstrap modal.

[frmmodal-content modal_title='Image' label='<img src="thumbnail.jpg" />']<img src="full-sized-image.jpg" />[/frmmodal-content]

If the image is in a single file upload field, you can do this dynamically in a View's Listing Page content.

[frmmodal-content modal_title='Image' label='[25 show_image=1]'][25 size=full show_image=1][/frmmodal-content]

Replace 25 with the ID of the file upload field.

Change modal link to a button

By default, the shortcode creates a link that opens a Bootstrap modal. To change it to a button, add the class="frm_button" parameter. Use this HTML with the Bootstrap modal shortcode.

<div class="with_frm_style">[frmmodal-content class="frm_button" label="Request a Quote"][formidable id=x][/frmmodal-content]</div>

Replace x with the form ID or key.

Troubleshooting

The modal doesn't open when the link is clicked

The add-on adds the modal and its script to the footer of the page. If clicking the link only adds # to the page address, or nothing happens:

• Check that your theme loads the WordPress footer. A theme that doesn't call the wp_footer() function leaves out the modal and its script, so the link does nothing.
• Look for a JavaScript error or a conflict with your theme or another plugin. Learn how to fix a JavaScript error.

Remove Bootstrap scripts

Your theme or another plugin can also load Bootstrap. Sometimes this makes the modal close as soon as it's clicked, and only the grey overlay stays on the screen. It can also open two grey overlays, so the page behind the modal looks darker than usual. To prevent this, include the script only once on the page.

add_action( 'wp_enqueue_scripts', 'remove_bootstrap_js', 100 );
function remove_bootstrap_js() {
	wp_dequeue_script( 'bootstrap' );
	wp_dequeue_style( 'bootstrap' );
}

This code removes the Bootstrap script and styles that your theme or another plugin loads the standard WordPress way (enqueued) with the handle bootstrap, in the page header or footer. A copy a plugin prints directly into the page isn't removed. The modal keeps its own copy.

If your theme or plugin uses another handle, replace bootstrap with that handle. To find it, view the page source and look for the Bootstrap script tag. Its id is the handle followed by -js. For example, id="bootstrap-js" means the handle is bootstrap. Don't use frm-bootstrap-modal: that's the modal's own copy.

Modal closes on submit

When the modal closes on submit, users can't see the success or error messages. This also happens when the form has errors: the page reloads, and the errors show only after the visitor opens the modal again.

To fix this, go to your form's Settings → General. In the AJAX section, check the Submit this form with AJAX box. Then click Update. This keeps the modal open, stops the page from reloading, and shows the form messages.

In the block editor, a Formidable Forms block shows an Improve Your Form's User Experience message while this box is unchecked. Click Form Settings in the message to open the form's settings in a new tab.

Conditional logic doesn't work in the modal

If fields that conditional logic hides show as soon as the modal opens, check whether the same form is on the page more than once. For example, the form is on the page and in a modal, or in two modals.

Only the first copy of the form works correctly, so show each form only once on a page. A JavaScript error on the page can cause the same symptom. Learn more about using the same form on a page more than once and fixing JavaScript errors.

Related developer hooks

• Add a custom attribute to the modal button with the frm_modal_link hook.
• Show a field's value from a specific entry to every visitor with the frm_field_value_requires_ownership hook.