Ninja Forms are an intuitive and customisable tool to use. One of the many features is that you can integrate various third-party CRM via integrations. This is useful if you have email marketing campaigns and want to integrate this through your Horizon website.
In this guide, we will talk about integrating with Constant Contact.
You can view the video below (which has audio commentary), but there is also a written guide to explain the process should you prefer.
Here are timestamps if you want to jump to a certain part of the video:
0:00 Introduction 3:50 Add Constant Contact integration to Ninja Form
0:35 Ninja Form general settings 5:50 Add Constant Contact opt-in to Ninja Form
1:09 Setting Constant Contact Access Token 7:45 Add Ninja Form to any page
3:00 Ninja Form dashboards 10:10 Conclusion
1. Configure Ninja Form settings
We will work on the assumption that you have a Constant Contact account created already.
The process we now need to do is integrate the NF general settings with your CC account.
First, go to NF options and then click on 'settings'.
This will take you to the settings page. Here you will be able to see various different third-party CRMs that you can potentially integrate with. Scroll down to the section for Constant Contact.
Most integrations work by using an API key, which is specific to your account. For Constant Contact, you will need something called the access token. To get this, below the box for 'Constant Contact Access Token', there will be a 'click here' link. Select that.
This will open up the Constant Contact login screen in another browser window. Simply enter your login details.
Once done, you will see a menu asking about allowing access for NF to your account. You can click 'allow'. This will close and take you back to the NF settings. In the access token field, this will be automatically populated with your access token specific to your account.
Scroll down the page and click 'save settings'.
2. Configure Ninja Form itself
Now that we have the access token in place, it is time to actually configure one of the NF itself. This time, click on the option for 'dashboard'.
Here you will be able to pick whatever form you wish to integrate (or you can go ahead and create or duplicate a new one if you'd like). To edit, click on the blue cog icon on the right of the relevant form. A drop-down menu will appear so click on the edit option.
We are now editing the actual form. You will see three tabs at the top but click the one for 'emails and actions'.
This will show you the email settings of that form. On the right will be a series of options that you can click to add. One of them is called Constant Contact show select that.
Once done, you can edit its settings. In the 'list' field, this allows you to choose whichever form you have created in Constant Contact to use. Select whichever one you need.
A new section will appear for 'list field mapping'. Here you can actually map the form fields of your CC form with ninja forms (depending on your form fields you had in your CC form).
For example, in the screenshot above we created a test form in CC that only has the form fields for 'first name', 'last name' and 'email'. The ninja form you have could have many form fields, but because we only have 3 in CC, as a result we are only able to map those particular fields.
To map them, click each relevant field. You will see a 'waffle' button on the right of each on. When clicked, you can pick the form field. For example, if you had first name, select the first name form field option. Repeat this for all relevant fields you have.
Remember to save by clicking the blue 'done' button at the top. Then click the 'publish' button to update the changes.
3. Adding Constant Contact op-tin message
It is not obvious to anyone filling out the form that their details will also be added to your Constant Contact. Therefore, it might be worth adding an op-tin message to your form.
Edit the form again and click on option called 'form fields'. Scroll down to the bottom where you will see a blue plus icon.
Once clicked, you will again see a series of optional boxes to select. One of them will be called 'constant contact op-tin'.
It will automatically be added to the form. You can drag and drop to wherever you want it to be but for something like this usually it would be near the submit button.
This allows people the option to either leave this checked or unchecked but also lets them know about this.
Remember to hit 'publish' at the top to update the changes.
4. Adding Ninja Form to a page
Go back to the ninja form dashboard and make a note of the shortcode for this form. The shortcode can be found under the column of the same name and will look something like: [ninja_form id=x]
Essentially all we will be doing is copying and pasting that shortcode to whatever page we want it to sit on.
Enable the visual builder as normal and simply paste the shortcode in whatever module you want on the page. Save in the normal way and you will see the form (the one integrated with your CC) on the page now.
Congratulations, you have successfully integrated ninja forms with Constant Contact, and added it to a page!