Bootstrap Modal Popup – Formidable Forms

Bootstrap Popup Form
  • Description
  • FAQ
  • Screenshots
  • DEMO
  • Updates & Support

Use the Bootstrap Modal form plugin to open a Formidable form or View in a Bootstrap modal popup. You can also display any shortcode inside of a Bootstrap Modal popup, whether created by Formidable Forms or another plugin.

Download and install

  1. If you haven’t already done so, install and activate Formidable Forms Pro.
  2. In your WordPress admin, go to ‘Formidable’ → ‘Add-Ons’ and click the ‘Install’ button for the Bootstrap Modal form plugin.

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.
Bootstrap Modal Popup View

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.
Bootstrap Modal Popup Log In

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.
  4. 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.
    Bootstrap Modal Popup Picture

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=" />"]<img src=" />[/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.

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>

Frmmodal shortcode

You may insert the frmmodal shortcode on any page, post, widget, View, or even inside of a form. The shortcode inserts a link that will open a Bootstrap modal when clicked.

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]

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.

or
Shopping Cart
  • Your cart is empty.
Scroll to Top