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 sales team for more information. 
  3.  WordPress website
  4. Gravity Forms

Implementation   

For 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 you WordPress website. In the Admin dashboard, Select the "Forms" list item and select the "New Form" sub item.
forms menu

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".

create new 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:
Default Page
To the right of the screen is a list of field objects you can input to your form.
Standard Fields
In the "Standard Fields" section, click on the "HTML" button to make an HTML object appear on the form.
HTML Content
Back to the field objects on the right side of the screen, click the "Advanced Fields" tab to show advanced objects.
Advanced Fields

Click the "Address Button" to make an address object appear in the form.
complete 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.
Expand HTML Content1
Copy the code from AutoaddressControl.html and paste it into the "Content" field. Next click the "Update" button to save the changes.
Update Button
Then click the "Preview" button to preview what the page will look like.


The page will look similar to the below image:
Address Form
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.
element Selector

Use this to get the names of each of the address lines and replace the existing names in the HTML content object.
street address
Next, in the HTML content object, set the key parameter to your license key:
license key
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.

PagesMenu

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).
PagesList
The page editor will open and look similar to the below image.
HomePage

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.
SelectAddressForm
Your page editor will now look similar to the image below.
AddressFormReference

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

The preview page will contain the gravity form holding the autoaddress control like below.
HomePageAddressForm1
Click the update button to save the changes and put them into your live site.
ClickUpdate

Next steps

Integrate your forms into other WordPress plugins: