Showing the Signup Form in a Popup
Installing the Popup Form
Installing the Prefinery signup form on a page in your website or app requires two parts - the JavaScript Snippet and the form display code. You can learn more about them here.
The implementation may differ from one platform to another so we've created a compilation of how you can install Prefinery specific to a particular website or landing page builder.
If your platform is not listed in the compilation, here's a general summary of how the installation goes:
In your Prefinery project dashboard, navigate to Installation then copy the JavaScript Snippet.
Ensure that the JavaScript Snippet is installed on each page where you want the signup form to be available.
For example, in an HTML page, you'll want to place the snippet right before the closing </head> tag.
Back in the Installation page of your Prefinery project dashboard, under Push Users into Prefinery select Show the Signup Form in a Popup then copy the button code.
Place the button code where you'd like it to appear on the page. You can change the default call-to-action text "Sign Up Now!" to anything you like.
Regardless of where it is placed on the page, when the user clicks it the signup form will appear in a popup modal.
You are not limited to just using the provided button code. You can simply add the class prefinery-form-cta to any call-to-action element on the page to get the signup form popup modal to display. Here are some examples:
In a link
<a href="#" class="prefinery-form-cta">Sign Up Now!</a>
In an image
<img src="images/button.png" class="prefinery-form-cta" />
If you are unable to add a class to your button, you can change the element ID or CLASS which triggers the popup.
Additional Configuration Settings
Here is a complete reference of all settings you can pass to the Prefinery popup. Just add any of these as data attributes in your call to action which triggers the popup.
| Attribute | Value | Description |
|---|---|---|
| data-prefinery-prefill-email | string (e.g. "user@host.com") | Pre-populate the email address. |
| data-prefinery-referrer | string (e.g. "https://www.google.com") | We will automatically determine the HTTP referrer; however, if you would like to manually set this value you may do so. |
For example:
<button type="button" data-prefinery-prefill-email="user@gmail.com">Sign Up Now!</button>
Customizing the Popup Modal with CSS
The popup modal container is loaded as part of the Prefinery JavaScript Snippet, and can inherit styles from the page where it is installed.
As such, you can't customize it inside Prefinery. You cannot style it with any custom CSS in the Signup Form, nor via Code Injection, because the scope of both those methods only apply to the embedded Prefinery form itself.
Instead, here are your options:
A. You could add some CSS to the page itself (where your popup modal is at) outside of Prefinery. For example, you can target the selector #prefinery_popup and make sure to use the !important rule.
Here's a sample:
#prefinery_popup {
border: 2px solid red !important;
}
That results into:
B. Don't use the Modal Dialog (popup) installation option. Instead, use your own popup modal/dialog box and embed the Prefinery signup form on it. This way you have complete control over the popup modal's design. If you are using WordPress for example, you may already have a popup box feature that comes with your theme or page builder plugin, or you can use a standalone plugin like Popup Maker.