How to embed Popover with MightyForms into a web page

Adding forms to your website can increase your online presence and make your business more accessible. Popover is a container-type graphical control element that hovers over its parent window and blocks any other interaction until it is selected.

MightyForms makes it easy and intuitive to create a form that pops-up from a button. You can see and edit this feature after you publish and share your online form.

Step 1. Create your form

Login to your MightyForms dashboard, then:

Select an existing form from your dashboard
Create a new form from scratch
Select one of the Templates
or Transfer an existing Form

You can share your form on social media or a direct link. Also you can easily embed your form in a web page.

Note: Make sure to Publish your form, and click 'Update'* after any changes you make.

Step 2. Publish the form then click 'Share'

On the upper right corner of the screen you'll see the 'Publish' button, click on it to publish the most recent version of your form.

Then, right next to it, click 'Share'.

Step 3. Select 'Popover'

When you click 'Share' a new window will show the options on how you can share the form.

On the right side of the Share dashboard, you'll see the embed code options. Select 'Popover' and customize the button (Colors, Position, Auto Launch, etc.).

Using the 'Color' button you can choose a background color and color of your icon. Make sure that the background color and the color of the icon is enough contrast.

By Clicking on 'Button Position' you can place the button on the right or left side of the page as best for your design.

The button 'Close on Submit' provides that your form will automatically disappear after submission.

You can personalize the popover button by setting your custom icon in SVG format. Just click the 'Custom Icon' button and upload it from your computer.

'Auto Lunch' function provides for the appearance of the form after a set time. Click the ON button and set the time up to your needs.

On the right side of the Share dashboard, you'll see the embed code.

Copy the code and paste it in the place you wish to have your form embedded using html type of blocks in your CMS.

Or send copied code to the developer for it.

That's it! Your popover form is ready!

Was this article helpful? Your opinion is important to us. Please, share your opinion with us so we can keep improving.