Can I add a form as a popup on my site?

Yes, you sure can!

You can use buttons or other HTML elements to make the form pop up in a modal when clicked. You may also style the element however you want since it's on your site directly.

Adding a popup form to your site

1. From the form editor, navigate to Share → Embed.
2. Scroll down to the "Popup" section.
3. Copy the embed code from that section and paste it on the desired page in your website. For website builders, you would put this in a code block or similar.

Popup forms can be triggered off any element on your website that you like.

To make any element show your form when it is clicked, set the attributes

• data-paperform-id="my-form-id"
• data-popup-button-"1"

on the desired element.

As long as the Paperform embed code is included on the page and executes, that's all you need to do to use any element to trigger the popup form when clicked.

Button styling

When you copy the embed code from Share → Embed and paste it on your site, you'll notice that the button may look quite plain.

This is because you're just using a regular, unstyled HTML button. So, unless the CSS on your website styles all button elements, you'll likely want to apply some CSS.

The good news is that the button element is directly on your site, is completely within your control, and you can apply CSS however you do so for your site.

Example button and CSS

button[data-paperform-id] {
    background-color: #222;
    border-radius: 4px;
    border-style: none;
    cursor: pointer;
    color: #fff;
    font-family: 'Work Sans', "Helvetica Neue", Helvetica, Roboto, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    max-width: 150px;
    min-height: 44px;
    min-width: 10px;
    padding: 9px 20px 8px;
    width: 100%;
}


button[data-paperform-id]:hover {
    opacity: 0.75;
}

Do not replace data-paperform-id with your form's ID in the above CSS .

This creates a button with

• a black background
• white text
• curved corners
• a slight dimming effect on hover

Programatically triggering a popup form

For even finer control you can also trigger the popup programmatically by including the embed JavaScript

<script src="https://paperform.co/__embed.min.js"></script>

and calling the function

Paperform.popup('my-form-name')

jQuery

If you were using jQuery, you could add something like the following to the footer scripts section:

<script>
  $('#my-element-id').click(function() {
    Paperform.popup('my-form-id');
  });
</script>

Plain JavaScript

Without jQuery, the above would look like:

<script>
  document.querySelector('#my-element-id').addEventListener('click', function() {
    Paperform.popup('my-form-id');
  });
</script>

In both of the above, #my-element-id is a selector for the target element.