Gravity Forms

The Autoaddress Javascript control and CSS can be easily added to a Gravity Forms form in WordPress.

Implementing Autoaddress into a Gravity Forms Form

Requirements

The following are required to implement the Autoaddress control:

  1. The AutoaddressControl.html file which can be found on GitHub here.
  2. A license key, provided by Autoaddress. Contact Autoaddress for more information. 
  3.  WordPress website
  4. Gravity Forms

Implementation   

or demonstration purposes, this document will use the built in address object provided by Gravity Forms and use the HTML object (also provided by Gravity Forms) to insert  the Autoaddress control.

If, at this point, you haven't downloaded the code from GitHub, you can follow our CRM Integration Files section for instructions on how to do that.

After downloading the AutoaddressControl.html file from GitHub, open your WordPress website. In the Admin dashboard, Select the "Forms" list item and select the "New Form" sub item. A pop up box will appear requesting a title for the form and an optional description. Enter the values, you want and select "Create Form".

After clicking the "Create Form" button, a new form will be generated with the title and description you gave it and will look similar to the below image:
 To the right of the screen is a list of field objects you can input to your form.
In the "Standard Fields" section, click on the "HTML" button to make an HTML object appear on the form. 
 Back to the field objects on the right side of the screen, click the "Advanced Fields" tab to show advanced objects.

Click the "Address Button" to make an address object appear in the form.


Next, hover the mouse over the HTML content object to bring up a menu at the top of the object and click the arrow to expand it.


 Copy the code from AutoaddressControl.html and paste it into the "Content" field. Next click the "Update" button to save the changes.

 Then click the "Preview" button to preview what the page will look like.



The page will look similar to the below image:

 At this point, the control won't work properly. the code needs to be updated first to have your license key and the correct names of the address lines. While previewing the page, press F12 to open your browsers developer tools. Click the element selector, allowing you to select objects on the page and view their information.
Use this to get the names of each of the address lines and replace the existing names in the HTML content object.

 Next add your Unique License Key in the HTML content object, replace the text “Your Key Here” with your 32 digit licence key. If you need a Free Trial Development Licence Key please contact us at: support@autoaddress.ie

 Now click the update button again and click preview and test the control.

Using Autoaddress Form in WordPress

For demonstration purposes, this document will insert the newly created address form into the WordPress default "Home" page. 


Go to the Admin menu and select Pages.

This will open a list of all the pages in your WordPress site. Select the page you want to insert the form to (in this case, the Home page).

 The page editor will open and look similar to the below image.

Click the Add form button. A pop up will appear, allowing you to select a form that you've created. Select the Address_Form in the drop down box and click the "Insert Form" button.
Your page editor will now look similar to the image below.

Click the "Preview Changes" button to preview the form in your site before making it live.

The preview page will contain the gravity form holding the autoaddress control like below.

 Click the update button to save the changes and put them into your live site.

Related Articles