How to Use the Magic Form Feature

The Magic Form feature is an easy way to hook Prefinery into your existing form with little to no coding involved so that if an email address is submitted on it the data also gets sent to Prefinery. 

It's a great way to hook into a form that you do not control (ie. you cannot edit its code), when embedding the Prefinery form is not an option.

Limitations of a non-Prefinery form

Even with the Magic Form feature, anything else your form does, or should do, is up to you and is no longer controlled by your Prefinery campaign. 

For example, if you want the form to redirect the user to another page afterwards, you need to setup the redirect on your website's end based on the form's action and (optionally) embed the referral page on that redirect page

Alternatively, if you own the form or have control on its code, then our JavaScript Web API option may be a better fit.

Either way — Magic Form or JavaScript Web API — if you need to perform any custom actions after your form is submitted, this will require custom JavaScript written by you or a JavaScript developer familiar with how your form works.

For a complete no-code solution (only copy-paste code to your site), the embedded Prefinery signup form is the easiest to implement, especially of you're looking to redirect it to an embedded referral page.

Magic Form Setup

Here's how to use the Magic Form feature:


Install the Prefinery JavaScript Snippet on your website


Still in the Installation page, in the 2. Push Users into Prefinery section click on the Magic Form tab and copy the class prefinery-magic-form

In your website, you'll need to add the copied class into your <form> element. 

Different websites, page builders and form providers have different ways on how this can be implemented. 

If the above (add class to form) is not an option for you, you can instead identify and copy your form's existing id or class as shown below and use them as your Magic Form selector. 

Back in Prefinery on the Magic Form tab, click on the "clicking here" link to open the Form Selector panel then replace any existing value there with your existing form's id...

...or  class

Please note that changes to the Form Selector value may take up to 10 minutes to take effect. 

That's it, you can now do a test submission on your hooked up form!

Still need help? How can we help? How can we help?