Bootstrap Modal Popup

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.

There are several ways to publish a modal popup with a block.

• Use the WordPress block editor
• Insert the form 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, proceed to the Formidable → Add-Ons page and click the Install button for the Bootstrap Modal Form plugin.
   

Use the Wordpress block editor

The Modal popup can be created with a block on a page or post. Follow the steps below to learn how to trigger a modal popup using a button.

1. Go to a WordPress page/post or create a new one if you have not already.
2. In the block editor, click the (+) icon, and search for the Formidable Modal block. Choose the modal block to insert into your page or post.
   
   Alternatively, you can click the (+) icon from the left sidebar and search for the Formidable Modal block in the search bar. Drag and drop the modal block into the page/post editor.
   
3. Inside the Modal block, you can add a form, view, calculator, or any block you want.
   
4. Click the Modal button to change the text. A side panel will appear on the right side of your page where you can configure the settings and appearance of the Modal button. It includes layout options for changing the button width.
   
   You can personalize the button appearance by selecting from the available style options or by customizing the color, typography, and dimensions.
   
5. Click the Modal content to change the styling of the modal. A side panel will appear on the right side of your page where you can configure the settings and appearance of the Modal dialog. It includes layout options for changing the dialog size, typography, and colors.
   

Display form in modal block

1. To add a form, search and click the Formidable Forms icon.
   
2. Select a form from the dropdown list.
   

Display View in modal block

1. To add a View, search and click the Formidable Views icon.
   
2. Select a View from the dropdown list.
   

Display calculator in modal block

1. To add a calculator, search and click the Calculator Form icon.
   
2. Select a calculator from the dropdown list.
   

Insert the shortcode manually

The shortcode can be placed on any page, post, widget, View, or even within a form. It inserts a link that, when clicked, opens a Bootstrap modal.

1. In the block editor, click the (+) icon, and search for the Shortcode block. Choose the shortcode block to insert into your page or post.
   
   Alternatively, you can click the (+) icon from the left sidebar and search for the Shortcode block. Drag and drop the shortcode block into the page or post.
   

2. Insert the following shortcode on a page or post. Replace x with the form ID or key.

   [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 would like. Shortcodes can be entered as well.

Parameters

The following parameters can be used with the frmmodal-content shortcode.

Required

• label - Set the label for the pop-up link. This is the link that brings up the modal when clicked. It will also set the modal title if the modal_title parameter is not set. If you want the value to be dynamic, replace it with the ID of your label field.

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

  Note: Quotes are required with params that have spaces for the full value to be passed. If quotes aren't used, only the first word will be displayed.

Optional

• modal_title - Set a title for the pop-up.
  

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

• modal_class - Add a class on the pop-up.
  

  [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 pop-up box. Options are 'large' or 'small'.
  

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

• button_html: Allows fully controlling the HTML of 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 WordPress block editor. If this is empty or 0 (by default), the necessary wrapper tags will be 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

If you would like to show a Bootstrap modal form, follow the directions below.

1. Start by creating a form if you have not done so already.
2. Go into your form's Settings and select Submit with ajax.
3. Add this shortcode to a WordPress page or post:
   

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

   Replace x with the form ID/Key. You may add any of the regular form shortcode parameters to the formidable shortcode.

4. Publish or update the page/post.

Now when the page/post is visited, you will be able to click a link and the form will appear in a Bootstrap Modal popup.

Display a View in a modal

If you would like to open a View in a Bootstrap modal, follow the directions below.

1. Create a View if you have not done so already.
2. Add this shortcode to a WordPress page or post:
   

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

   Replace x with the View ID/key. You may also add any of the regular View shortcode parameters to the display-frm-data shortcode.

3. Publish or update the page/post.

Now when the page/post is visited, you will be able to click a link and the View will appear in a Bootstrap Modal popup.

Show the detail page in a modal

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

1. Create a detail page for a View.
2. Instead of using [detaillink], add this shortcode in the Content box of your View.

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

   Replace x with your View ID/key.

3. Publish the View on page or post.

When the published View is visited, click the Details link, and the detail page will appear in a Bootstrap Modal popup.

Editing with a View in a modal

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

1. Create a View and set up front-end editing.
2. Add this shortcode in the Content box of your View.

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

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

3. Publish the View on page or post.

Now when the published View is visited, you will be able to click the Edit link and the entry to be edited will appear in a Bootstrap Modal popup.

Note: Some JavaScript won’t work correctly if several modal edit links are included on the same page. This is the same as having the same form on the page multiple times.

Show detail page in modal after clicking an image

Views may be designed to show a list of images that open the view detail page in a modal. To set an image from a single upload field to 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 file upload field ID. Replace x with the View ID/key.

Display a login form in a modal

If you would like to display a login form in a pop-up, follow the instructions below. Please note: In order for this shortcode to work, you must have the Registration add-on installed.

1. Go into edit an existing WordPress page or create a new page.
2. Insert the login form shortocode on the page.
   

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

   Any of the regular login shortcode parameters can be used in the frm-login shortcode.

3. Publish or update the page.

Now when the page/post is visited, you will be able to click a link and the login form will appear in a Bootstrap Modal popup.

Display a field value in a modal

If you would like to display a value from a field in a pop-up, follow the instructions below.

1. Go into edit an existing WordPress page or create a new page.
2. Add this shortcode to a WordPress page or post:
   

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

   Replace 'x' with the field ID you would like to pull the value from. Please note that it will display the most recent entry unless you specify the entry ID with the entry parameter. Any of the regular shortcode parameters can be used in the frm-field-value shortcode.

3. Publish or update the page.

Now when the page/post is visited, you will be able to click a link and the value from the field will appear 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 file is is a single file upload field, this can be done dynamically.

[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, a link is created to open a Bootstrap modal. You can change this to a button by using 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=49][/frmmodal-content]</div>

Troubleshooting

Remove Bootstrap scripts

You may have a theme or other plugins that also load Bootstrap. Sometimes, this can cause the modal to immediately close when clicked. In order to prevent this, the script can only be included once on the page. You can learn more about where to put the code in our documentation.

add_action('wp_footer', 'remove_bootstrap_js', 1 );
function remove_bootstrap_js(){
  wp_dequeue_script( 'bootstrap' );
  wp_dequeue_style( 'bootstrap' );
}

Modal closes on submit

If the modal closes on submit, this can prevent users from seeing the success and/or error messages. To fix this, go into your form's Settings → General → AJAX and select "Submit with AJAX". This will keep the modal open, as well as prevent page reloading and allow form messages to be displayed.

Related developer hooks

• Add custom attribute to the modal button with the frm_modal_link hook.

Related Articles

• How To Make a Modal Survey in WordPress [Modals Made Easy!]
  Read More

  7 Bootstrap Modal Popup Examples Sure To Engage Your Users!
  Read More

  How To Add a WordPress Modal Popup (The Easy Way)
  Read More
• What is a Lightbox Popup & How To Make One in WordPress
  Read More