---
title: Can I add a form as a popup on my site? | Paperform Help Center | Paperform
description: Use our popup button, or make any element on your website show a Paperform in a popup when clicked.
url: "https://paperform.co/help/articles/pop-up-forms"
type: static
generatedAt: "2026-04-04T00:42:00.807Z"
---

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

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.

![Screenshot of a popup form, as loaded after the button was clicked on an embedded page.](https://img.paperform.co/fetch/f_auto,w_1400/https://d3gw2uv1ch7vdq.cloudfront.net/img/embedded-pop-up-form.png)

## Adding a popup form to your site

 1. From the form editor, navigate to Share → Embed.
 1. Scroll down to the "Popup" section.
 1. 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

```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

![Animated GIF of the mouse hovering over the example button. The button's white text rests on a black backround at first, and this background changes to a dark grey when the mouse hovers over it.](https://img.paperform.co/fetch/f_auto,w_1400/https://d3gw2uv1ch7vdq.cloudfront.net/img/simple-button-styling.gif)

## Programatically triggering a popup form

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

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

and calling the function

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

### jQuery

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

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

### Plain JavaScript

Without jQuery, the above would look like:

```html
<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.

### Related Articles
  [How can I embed my form in a React app?  Embedding your form within your React app is slightly more complicated than simply copying and pasting some embed, but only slightly. This article provides guidance on how to embed Paperform in your React app.](/help/articles/how-can-i-embed-my-form-in-a-react-app/)
[How do Paperform forms look when they are embedded?  We'll cover some great examples of embedded Paperform forms.](/help/articles/how-do-your-forms-look-when-they-are-embedded/)
[How do I embed a Paperform form in Webflow?  Embedding your Paperform form in a Webflow site is quick and easy. We'll show you how to get it done fast.](/help/articles/embed-paperform-forms-in-webflow/)
[How do I embed a Paperform form to Squarespace?  Embedding to Squarespace is different from a standard embed. Here are Squarespace embedding instructions, and tips on fixing any issues you have.](/help/articles/squarespace-embedded-forms/)
[Can I change my form's width when embedding it as a popup?  Paperform doesn't provide tools to modify the width of your embedded form. An alternative to the built-in tool is to apply some CSS rules within the page your pop-up form appears on.](/help/articles/can-i-change-my-forms-width-when-embedding-it-as-a-pop-up/)