Using the API Lead Form with Gravity Forms in Wordpress

A note before starting:

While Gravity Forms, Tripleseat, and Wordpress are designed to make their usage as easy as possible considering how powerful they are, it's important to keep in mind that some previous programming knowledge will be necessary for this step. If you're not familiar with editing Wordpress themes (specifically the functions.php file), or the syntax of PHP, you may want to consult a developer before proceeding. 

Gravity Forms with Tripleseat

Gravity Forms is a plugin for Wordpress that eases the creation of forms. They allow you to specify all of the fields, and the type of information (text, date, numerical) that those fields of the form will accept. For Wordpress users this is a great option to streamline your Lead Forms.

Installing Gravity Forms

First, Gravity forms will need to be purchased and installed in Wordpress. Once purchased, you'll be sent a link to download a zip file. Once you have this file, log into your sites wp-admin. From there, go to Plugins, and choose Add Plugin.

Once here, you can upload the plugin. To do so, specify the zip file and upload this.

Once Gravity forms is installed, this can be accessed under plugins to activate it, and then the forms can be accessed under forms.

Once Installed

After you've installed Gravity forms, you can create your forms. The required forms for Tripleseat's Leads are:

  • First Name
  • Last Name
  • Email Address
  • Phone Number

Though all of the other fields available to our Lead Form API Endpoint are encouraged.

While creating your form, please take special care to use the "Email Address" field type for email addresses, the "Number" type for Guest Count, and a "Date" and "Time" field for times and dates. This ensures that there won't be any data validation errors when this information makes it to Tripleseat. These fields are listed under "Advanced Fields".

Once you have completed your fields, save your form and add it to a page or post.

 

But how does this data get to Tripleseat?

This next portion does involve a bit of code, so please be prepared.

Gravity Forms on its own will only store your data in Wordpress. This is useful and serves as a great backup, but doesn't help you with your Tripleseat leads. Fortunately, there is a way around this.

Gravity Forms offers a webhook which allows you to alter its behavior. This webhook is called gform_after_submit. To specify an action (in this case sending the data to Tripleseat's API) to occur after it submits, we're going to have to add some code into Wordpress's function.php

The code to add


add_action( 'gform_after_submission', 'post_to_third_party', 10, 2 );
function post_to_third_party( $entry, $form ) {

$post_url = 'YOUR LEAD API URL HERE';
$body = array(
'lead[first_name]' => rgar( $entry, '1.3' ),
'lead[last_name]' => rgar( $entry, '1.6' ),
'lead[email_address]' => rgar ($entry, '2'),
'lead[phone_number]' => rgar( $entry, '3' ),
'lead[company]' => rgar( $entry, '4' ),
'lead[event_description]' => rgar( $entry, '5' ),
'lead[event_date]' => rgar( $entry, '6' ),
'lead[start_time]' => rgar( $entry, '7' ),
'lead[end_time]' => rgar( $entry, '8' ),
'lead[guest_count]' => rgar( $entry, '9' ),
'lead[additional_information]' => rgar( $entry, '10' )
);
GFCommon::log_debug( 'gform_after_submission: body => ' . print_r( $body, true ) ); $request = new WP_Http();
$response = $request->post( $post_url, array( 'body' => $body ) );
GFCommon::log_debug( 'gform_after_submission: response => ' . print_r( $response, true ) );
}

Please keep in mind that the $body of this array is based on a contact form that is laid out like our standard form. This means that the name will be ($entry, '1.3'), and email_address will be ($entry, '2') because email address was the second field specified when we set up the form. 

Though this can be confusing, you can see the ids of each field of the form by hoviering over them on the Edit page for the form.

Inserting the Code

Now that we have this code set up, we have to insert it into your function.php file. To get to this, go to Appearance> Editor . Then select "Theme Functions" from the menu to the far right.

There will be a warning stating that editing this file is strongly discouraged. While adding this code is harmless, this warning is a good suggestion to take special care of what you are doing.

At the very end of this file, not enclosed in any brackets, paste your modified code that you have created from the example above.

Your form is now connected! Please be sure to test and if you have any further questions, please contact support@tripleseat.com

 

Troubleshooting:

My lead is not showing in Tripleseat.

This can be due to one of two issues. The first is to please make sure that the code is placed at the end of the functions.php file, not toward the beginning where it is commented to add code. Unfortunately, Wordpress makes this a little confusing. The correct place is at the end of the file.

The other possibility is to check to make sure that your fields are numbered correctly. Gravity Forms uses the format of X.3 and X.6 for the first and last name fields, so if it is field one it will list as 1.3 and 1.6 in your code. 

More information about Gravity Forms field numbering is available at:
https://www.gravityhelp.com/documentation/article/field-object/

Have more questions? Submit a request

Comments