Bootstrap Modal

Knowledge BaseExtend Formidable FormsAdd Ons → Bootstrap Modal

Use the modal add-on to open a Formidable form or View in a Bootstrap pop-up. You can also use the modal add-on to display any shortcode, created by Formidable or another plugin, inside of a pop-up.

Download and install

  1. Download the latest version of the Bootstrap Modal plugin.
  2. In your WordPress admin, go to 'Plugins' → 'Add New' and click the 'Upload Plugin' button at the top of the page.
  3. Upload the zip file you just downloaded in step one. Once the plugin is installed, click 'Activate Plugin' or go to the 'Plugins' page, find 'Formidable Bootstrap Modal' and click 'Activate'.

Display a form in a modal

If you would like to open a Formidable form in a Bootstrap modal, 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 type="formidable" id=x label="Click here"]

    Replace x with the form ID/Key. You may also add any of the regular form shortcode parameters in the modal 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.
Bootstrap popup form

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 type="view" id=x label="Click here"]

    Replace x with the View ID/key. You may also add any of the regular View shortcode parameters can be used in the modal 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 View Popup

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 type="frm-login" label="Log in"]

    Any of the regular login shortcode parameters can be used in the modal 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 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 type="frm-field-value" field_id="x" label="Click here"]

    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 frm-field-value parameters can be used in the modal 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 Picture popup

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 type="formidable" id="x" label="Click here"]

Replace x with the ID of a Formidable form.

Parameters

The following parameters can be used with the frmmodal shortcode.

Required

  • type - Insert the name of the shortcode that will be displayed in the pop-up. Options include formidable, view, frm-login, frm-field-value and any other WordPress shortcode.
  • label - Set the label for the pop-up link. This is the link that brings up the modal when clicked.
  • id - ID of the form or view. Only required with type="formidable" and type="view".

    [frmmodal type="formidable" id=x label="Click here"]
  • Optional

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

      [frmmodal type="formidable" id=x modal_title="Log in form" label="Click here"]
    • size - Change the size of the pop-up box. Options are 'large' or 'small'.

      [frmmodal type="view" id="x" size="large" label="Click here"]
    • class - Apply a CSS class to the clickable link.

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

    Releated Customizations

    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.

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