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.
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.
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.
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
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')
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>
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.