Installing a Form in WordPress using the HTML Embed Option

This process can be used for any WordPress page in your theme that has a Custom HTML Block.

If you have not already, install the Patch Pixel by downloading the Patch WordPress plugin that can be found in the plugin store by searching 'Patch Retention'.

Build and save a Form. For instructions on how to build a form click here.

Use the Automatic Installation option, which can be found in the Forms module -> Step 5: Installation. Follow these instructions from within your Patch account:

Locate and edit the Form you want to embed. Navigate to Step 5: Installation. Click the purple plus button in the data table within the Automatic Installation section.

The ‘Form Setup’ dialog will open.

By default, the form you are building/editing is selected.

Click the dropdown for Form Type and select ‘Embedded’.

Insert a Unique ID: Choose a unique ID to use for embedding this form onto your site. Make sure this unique ID is easily recognizable and pertains to this specific form. Unique IDs must be globally unique. An example would be embedding a form on your contact page in which a unique identifier could be #contact-page-form.

When entering the unique ID for this setting start with a '#' (hashtag) and then include a '-' (dash) in between each word you are using. 

If you do not include the # the element will throw an error and the settings cannot be saved until this is corrected.

Once you have set your unique ID you will then need to copy the script provided in the dialog. 

Base script: <div id="your-element-id"></div>

Examples: 
<div id="contact-page-form"></div>

or

<div id="blog-newsletter"></div>

Take the script you just copied and paste it into a custom code /HTML block on your site where you want the form to show. Note: Only one HTML element ID can exist per page. 

Installing Script Onto Your Site

You will need to use the Custom HTML code block provided within your theme editor for Forms to propagate onto your site without additional development. Where on your site these elements are available is dependent upon your theme or custom development.

Log in to your WordPress site. Using the left-side menu navigate to 'Pages'. 

Then find and click edit on the page you want to embed the form on. 

Within the page editor/builder add a 'Custom HTML' block onto the page where you want the form to display. Please note how you add the HTML block onto your site depends on your Theme. 

Paste the code snippet you copied earlier from your Patch account and paste it into the code block. Preview and save your changes by clicking 'Publish' or 'Update'.

Test the form on your site.

If this does not work some sites may require you to put the Form into an iframe. Here is the iframe snippet you would use. You will need to insert the form link into this script. You will need to style it accordingly for your needs.

<iframe src="form-link" width="600px" height="500px" frameborder="0"></iframe>

One-click Popup (Shopify & WordPress Sites)

Click the purple plus button in the data table within the Automatic Installation section.

The ‘Form Setup’ dialog will open. By default, the form you are building/editing is selected.

Click the dropdown for Form Type and select ‘Popup’.

An additional setting to choose how this popup will trigger on your site will appear.

Choose from the available options of ‘Immediately On Page Load’, ‘After a delay’, or ‘On exit intent’. If you select ‘After a delay’ you will then need to determine the # of seconds until the popup appears. Most delay popups show around the 3-second mark.

There is an additional setting for determining whether this popup will appear over other popups on your site.

Once you are done make sure to save your changes. Your form popup will appear on your site automatically. Please note due to caching, changes to product configuration may take up to an hour to propagate to the web page that has the Pixel installed.