Forms with WordPress: Contact Form 7

Overview

When integrating an Act-On Form external post with WordPress, Contact Form 7 is a popular, free, and easy-to-use form-creation tool. This plug-in works by allowing the user to generate a form using the plug-in's interface, and then integrate the constructed form onto any WordPress page or post using a shortcode such as [contact-form-7 id="1" title="Contact form 1"].  Contact Form 7 utilizes PHP-based (server-side) validation, so it requires an adaptation of the standard methods referenced in the article Posting External Forms to Act-On.

See Integrating an Act-On Form External Post with WordPress for other WordPress form plug-ins.

Setup Steps

Step 1:

For each form this is used with, we need an equivalent 'mirror' version of the form to be created within Act-On. For example, if a custom form on your website captures First Name, Last Name, and Email, you'll need to create a form within Act-On that also requests these fields. Your website visitors will never see this Act-On variant of your form - we simply need to receive your custom form’s data.

Step 2:

Next, you'll want to make sure the input names match so that information can be passed properly. In the form builder, you'll see an Edit button appear when hovering over any form field. Click Edit, and take a look at 'Data Field Name' on the resulting pop-up menu. You want to ensure that your 'Data Field Name' matches your custom form's HTML input name.

For example, if your First Name field in Act-On has a Data Field Name of 'fname', you'll want your custom form HTML to contain '<input name='fname'... ' for the equivalent field.

If you make any changes, be sure to click Next twice in the Act-On form builder until you get to the last step, where you can save your form.

Step 3:

Locate these three values to use in the next step: your Marketing Domain, your Account ID, and the specific Form ID.

• Marketing Domain
  1. Navigate to Content > Branding > Web Identity.
  2. In the Marketing Domain section, copy the Default Marketing Domain displayed on this page, excluding the "http://" part
• AccountID
  1. Navigate to Home > Start
  2. In the Account section, copy the number in parentheses next to your account name
• Form ID for the specific form that will receive the submissions
  • Labs Forms
    1. Navigate to Content > Forms and click Edit for the relevant form
    2. Copy the long string of characters at the end of the URL in your browser's address bar
       
  • Classic Forms
    1. Navigate to Content > Forms and locate the relevant form
    2. Click the dropdown menu for the form, then select Get Public URLs > Form URL
       
       
    3. Copy the string of characters before the ":" in the URL, like the bolded section below:
       http://a1234.actonsoftware.com/acton/form/1234/0004:d-0001/0/-/-/-/-/index.htm

Step 4:

Take the parameters from the previous step's instructions and enter them into the bolded portions of the script below. Then copy that entire script into your clipboard.

    <script>var accountId = "account-ID-here";var
    formId = "form-ID-here";var
    marketingDomain = "marketing-URL-without-the-http";</script>

    <script type="text/javascript" src="//a11058.actonservice.com/cdnr/67/acton/attachment/11058/f-0083/1/-/-/-/-/WPCF7Script.js"></script>
  

Step 5:
In your WordPress side bar, navigate to Contact > Contact Forms and find the form you want to capture.

Finally, paste the script below the other form elements (typically the final form element will be the "Submit" button).

Multiple Contact Form 7s on One Page

If you have more than one Contact Form 7 on a particular page, the above process will result in the submission of all forms on the page, leading to some issues with analytics.

Please instead use the following process to target individual forms on the page. Locate your Marketing Domain, Account ID, and Act-On Form ID as explained above. 

Then, locate the Form IDs for each of your Contact Form 7 forms. These can be found by looking at the Contact Form 7 Shortcode. In the following example, the form IDs would be 71 and 75 respectively.

Once you have all of these values, plug them into the script below. Important: make sure you replace the sections that say "Form-ID-here" with the ID of the Contact Form 7.

    <script src="//a11058.actonservice.com/cdnr/67/acton/attachment/11058/f-008b/1/-/-/-/-/wpcf7byID.js"></script>

    <script>document.querySelector("form[action*='form-id-here']").addEventListener('submit',
    function(event) {event.preventDefault(); var divId = document.querySelector("div[id*='form-ID-here']").getAttribute("id");processwpcf7("account-ID-here",
    "act-on-form-id",
    "marketing-url-without-http",
    divId, ""),false});</script>
  

Important: replace "Form-ID-here"  with the ID of the Contact Form 7.

These can be found by looking at the Contact Form 7 Shortcode. In the following example, the form IDs would be 71 and 75 respectively.

NOTE: Please only include the top line of the multi-form script (<script src="//a11058.actonservice.com/cdnr/67/acton/attachment/11058/f-008b/1/-/-/-/-/wpcf7byID.js"></script>) once per page, on the first form. You may remove that line of the script when updating the code for other Contact Form 7s on the page.

Finally, head to Contact > Contact Forms, find the form you want to integrate and click Edit.

Now paste the script below the form elements (typically the final form element will be [submit "Send"]).