Getting Started - Wordpress ContactForm7 to API

Step 1 - Add a Lead Providers to ampEducator
Step 2 - Install Redirection for Contact Form 7 Plugin to Wordpress
Step 3 - Edit your Form
Step 4 - Configure the Field Mapping in Contract
Step 5 - Test your Form


This guide provides instructions to submit Contact Form 7 to ampEducator using a third party plugin called Redirection "Contract Form 7 to API". Contact Form 7 is a great Form tool, but lacks the ability to support API calls on it's own. ampEducator has no direct affiliation to Redirection or the author and this is just suggested solution to clients who wish to submit form data from Contact Form 7 to ampEducator. There are many other Form plugins available for Wordpress as alternatives to Contact Form 7 (and Redirection) that will submit a webhook / API Post to ampEducator. Regardless of what option you choose, in order to create a webhook API POST to ampEducator you must first Add a Lead Provider first.


Step 1 - Add a Lead Providers to ampEducator

You will need to login to ampEducator to create the POST URL (webhook) under Prospects Section > Lead Providers Tab:


  • In ampEducator go to Prospects > Lead Providers and Click New Lead Provider
  • Select Provider Type HTTP Post
  • Provider Name = Enter a name that will identify the Lead Provider
  • Unique ID* = contactus1 (this can't be changed one created)
  • Description = additional information to describe the Lead Provider
  • Click Add.


Once added you can view the Lead Provider details including the Lead Provider URL that is created using the Unique ID you entered. This needs to be copied and pasted into the appropriate field in your Form provider settings:

This URL is the "webhook" that will allow you to POST form data to from your Wordpress Form assuming your Form provider has a API POST capability.


Additional options including notify Admissions Advisor via email and sms are available


Field Mapping. including mapping fields, this is important to ensure that the field data submitting to the URL will be properly matched to the accepted fields in ampEducator. 


Example: if you form in Wordpress uses "first_name" instead of the setting in ampEducator of "firstName" then you will need to update the Mapped from as "first_name" so that it passes the data properly:




Step 2 - Install Redirection for Contact Form 7 Plugin to Wordpress


If you wish to use your existing Contact Form 7 Forms then you will need to choose a plugin to that allows it to support API calls. ampEducator suggests Redirection https://redirection-for-contact-form7.com/product/wpcf7r-api/


  • In Wordpress go to Add Plugins > Add New > Search for: Redirection for Contact Form 7

 

 

  • Install and Activate the Plugin.
  • Under Contact > Extensions > Click Activate (or Get It!) and Enter your License Code

 

 

  • Click Save.

Step 3 - Edit your Form


Additionally, Contact Form 7 uses a specific format in order to submit data. Depending on what data you wish to submit you will need to code your Contact Form to display and then submit the correct data to ampEducator. 


Example: Sample Contact & Wordpress Form.


Here is the matching code for the form above in Wordpress Contact Form 7:


<label>Please select your Location:

[select Location "Calgary|1" "Other Location|2"]</label>


Note: Using the | beam separator in Select Menu instructs Contact Form 7 to Display the option “Calgary” but submit the number “1” in the example above. This is important for Locations because ampEducator uses numbers for Locations. In order to submit “Calgary” as Location you will need to submit “1” to ampEducator. You can determine your location number by clicking Generate HTML button in the Username (top right) > Institution Config > Prospects > Webform section. This will generate an HTML file that you can open in a text editor and locate the Location Name and assigned number in ampEducator.


<label>Please select your Program on Interest:

[select Program placeholder "Program ABC|ABC" "Business Presentations|BA"]</label>


Note: Similar to Locations, Interested In uses the Code in ampEducator to map the submitted data from Wordpress Contact Form 7. Use the | beam separator to match up the Code to the Preferred Display name.


<label> Your Full Name (required)

    [text* name] </label>


Note: ampEducator will accept “name” as the field name mapping for Full Name field. The application will automatically separate the First Middle and Last Name by space for you. If you prefer to use separate fields for First Name, Middle Name and Last Name you can map the fields to the following formats:


First name = use “firstName” in the Tags Mapping

Middle name = use “middleName” in the Tags Mapping

Last name = use “lastName” in the Tags Mapping


<label> Your Email (required)

    [email* your-email] </label>


<label> Phone Number

    [text your-phone] </label>


<label> Your Message

    [textarea your-message] </label>


Note: ampEducator can accept custom fields that you add. Custom fields are numbered and must be mapped by matching fieldname. For example, there is no “Your message” field in ampEducator by default so it needs to be added under Institution Config > Students > Custom Fields as a text field that will show up in the Prospect / Student Profile as “Your Message/Question” or “How can we help you” etc.


Each custom field is assigned a number and this is what is used in Step 4 for Tag Mapping “customField1”


[checkbox* optedIn "I consent to electronic communication|true"]


Note: ampEducator tracks opt in and out for Prospects and Students. This can be found under the Prospect/Student Profile in ampEducator “Other” tab. Scroll down to “Emailing List” to view the Status. In order to email (or SMS) in ampEducator you must have Opt In Status from the Prospect or Student. To collect this automatically at the time of WebForm submit from the website you must have optedIn = true as shown above.


Step 4 - Configure the Field Mapping

  • Go to the Form in Wordpress

  • Click on Actions Tab > Choose Action “API POST/GET Request” and click Add new action

  • Edit the New Rule

  • Copy the Web Form Action from (your ampEducator account) in Step 2 to the Base API Url

    • https://<INSERT-PURL-HERE>.ampeducator.com/web/public/prospects/webform

  • Set Api Input type = POST

  • Expand (+) Tags mapping and Map your Form Field name to the matching ampEducator field name

 

  • Toggle Enabled to ‘ON’ and Click Save.


Step 5 - Test your Form

Fill out the Form and hit submit. If the form is successful you will see the Prospect added in the Prospects section of ampEducator. You can also check in the Lead Provider Submissions to troubleshoot Errors as anything you submit whether it is accepted by ampEducator or not will be listed here:






End of Guide Document | ampEducator Inc. 2021