How to integrate Patch Forms with OptinMonster for WordPress

This tutorial will guide you through the process of installing the OptinMonster plugin on your WordPress site, creating a Legacy Portal Form, adding the Form script to your site, and setting up an OptinMonster campaign. 

Step 1: Installing OptinMonster Plugin

To set up the OptinMonster plugin on your WordPress site, follow these steps:

1. Log in to your WordPress dashboard.
2. Navigate to "Plugins" on the left-hand menu.
3. Click "Add New".
4. In the search bar, type "OptinMonster".
5. Click "Install Now" next to the OptinMonster plugin.
6. After installation, click on "Activate Plugin".
7. Follow the prompts to create an account if you haven't already done so.
8. Choose the free version of the accounts.

With the OptinMonster plugin installed, you can now create and manage your Patch forms and campaigns within your WordPress dashboard.

Step 2: Creating a Legacy Portal Form

Log in to app.citygro.com using your Patch account username and password. Once logged in follow the steps below.

1. Go to the Forms module of the CityGro Portal.
   
2. Click "+ Create Form"
   
   
3. The 'Fields Page'
   Decide on what fields you would like to use (First Name, Last Name, Etc)
   
   
   (Optional) You can add fields by clicking the orange "+ Add" button
   You can set the field, label, type, and can select the checkbox making it a required field.
   
   
   
   (Optional) Scrolling down to the bottom of the fields page, you can 'Automatically Set Field Values'. We recommend to at least put customers in a group for those who complete the form.
   
   This option can also be used if you want to automatically opt in customers INSTEAD of providing a checkbox for them to mark for themselves.
   
   
   (Recommended) Here is a quick reminder on how to create a new group.
   
   
   
   
4. The 'Styles Page'
   Set the styles of the form.
   The 2nd page is where you can set the style settings.
   You can add images for a header and / or background, as well as change the color of buttons and fonts!
   
   
   
5. The 'Settings Page' 
   This is where you can edit the text on the form that customers will see.
   There is a 'Top Content' portion and a 'Bottom Content' portion.
   
   By default, the bottom content will contain the legal fine print required for SMS opt-ins.
   
   
   
   
6. The 'Success Page'
   This is the page where you can add the finishing touches to your form.
   Want to say a special thank you once the form has been completed?
   Type your message in the 'Finish Message' space.
   
   If left blank a default message will appear.
   
   You can also redirect the customer to a URL upon completion if desired - just add your website under the 'Redirect Options'
   
   
   
   If you customize the completion message, be sure to use the toolbar to make it stand out!
   
   
   
   
7. The 'Confirmation Page'
   The last page of the form will provide a link to copy and post online so that people can complete your form!
   
   There is also an interactive preview on the right-hand side of the window.
   
   
   
   We recommend enabling the SMS Verification step to prevent creating duplicate contacts.
   The following screenshots show the 'process' of going through the Verification steps.
   

• Select the SMS button

• Enter your phone number and select 'Send Code!'
  
  
  
• Enter the 6-digit verification code sent via SMS text message.
  
  
  
  
  

After completing the form select 'Submit'
Form completion message should appear!



Once your form is ready to go and has passed all tests go back to Step 5 Confirmation and use the provided snippet code and form script in the steps below.

<script src="https://cdn.citygro.com/web/sdk.js" data-auto-bootstrap></script>

<cg:form data-id="5ef12c833e2163289e4cf4b3" data-account-id="351376"></cg:form>

Step 3: Adding Form Script to Your Site

To add a script to the header.php file in WordPress, follow these steps:

1. Log in to your WordPress dashboard.
2. Navigate to Appearance > Theme Code Editor.
3. Select the header.php file from the list of files on the right-hand side.
4. Scroll to the `</head>` tag.
5. Paste your script just above the `</head>` tag.
6. Click the "Update File" button to save your changes.

Here's an example of what the code might look like:

```html

<head>

  <title>Your Site Title</title>

  <link rel="stylesheet" href="your-stylesheet.css">

  <script src="https://cdn.citygro.com/web/sdk.js" data-auto-bootstrap></script>

</head>

```

Step 4: Creating an OptinMonster Campaign

Follow the steps below to create an OptinMonster campaign:

1. Navigate to the OptinMonster > Campaigns section of your WordPress dashboard.
2. Click on "Add New".
3. Choose the "Templates" option.
4. Select the "Popup" option.
5. Look for the "Canvas" template and click on "Use Template".
6. Name your Campaign.
7. In the blocks section, search for "Embed Form". Drag and drop the block to your Canvas.
8. Replace all the code in the code text area for the block with the form script 
   
   `<cg:form data-id="xxxxxx44cedcf082a3xxxxxx" data-account-id="000000"></cg:form>`
   
   
9. Choose the "Popup" campaign type from the list of available options.
10. Configure the design settings.
11. Set up the display rules for your popup form. This determines when and where the form should appear on your website, based on factors like time spent on page, scroll depth, and exit intent. Note that most options will require upgrading your account to the paid version.
12. Preview your campaign to ensure everything looks and works as expected.
13. Publish your campaign and start collecting leads!

Make sure to test your campaign thoroughly before publishing it live on your website. This will ensure that your popup form is working correctly and you won't miss out on any potential leads.