How to Use the Magic Form Feature (Beta)

The Magic Form feature is still in beta. There may be bugs, plus limitations that come with it. If you have access to add and/or edit code on your website, please avoid using Magic Form and instead use any of the other methods of adding users to your project. The Magic Form feature purely exist for rare situations where you don't own or have access to the code of your webpage. 

The Magic Form Beta 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.

Magic Form Limitations

There are limitations when using a non-Prefinery form, especially when using the Magic Form feature to attach to a form on your site.

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 upon submission, you'd 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 which may not even be possible due to you not having access to your website's code in the first place (reason for using Magic Form). 

Another thing to note with Magic Form is that it cannot pass any other form inputs except the email address. If you own the form or have control on its code, then our JavaScript Web API option is what you'll want to use instead. 

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 if you're looking to also redirect it to an embedded referral page upon submission. The embedded form is fully customizable so you can match it with the page's design. 

Magic Form Setup

Here's how to use the Magic Form feature:

1

Install the Prefinery JavaScript Snippet on your website. 

2

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!