Connect Contact Form 7 to API

Contact Form 7 is a popular WordPress forms plugin. When used with the Pro plugin, we can capture data from a form and then send this data to an external API.

Data that is returned from the API can then be displayed as part of the confirmation message – but please note that Contact Form 7 does not allow HTML within their confirmation message, so the resulting message can only ever be simple text.

There are 2 methods that you can use, with Method 1 being the simplest as it does not require any coding.

Method 1 – No Code

How it works

Contact Form 7 has a feature called custom ‘form-tags‘, which look similar to a shortcode and can be placed within your forms.

We’ve built a custom form-tag which allows us to use tokens to capture the data from form fields, without writing a single line of code.

Let’s jump straight into an example.

Step 1: Setup the API & endpoint

We are setting up our API to send some user data to the Ongage API. Take note of the api_id and the endpoint_id shown below within the shortcode and template tag. That is what we use in the form-tag shown in the next step.

Step 2: Add the form-tag

We’ve created a Sign Up form with some text fields and have included our custom [wpgetapi] form-tag.

Step 3: Capture our fields

Now back in our endpoint settings, we can capture the data coming from each field by using tokens.

The token (system:POST:first_name) captures the data from the form’s ‘first_name’ field. So if the user enters ‘Bob’ into this field, ‘Bob’ will be sent as the value.

Essentially, what we setup in the image above will be sent to the API like this:

{
    "email": "bob@google.com",
    "first_name": "Bob",
    "last_name": "Smith"
}

The form-tag attributes

The form-tag is placed within your form and follows this format: [wpgetapi api_id|endpoint_id|message_type "keys"]

To use the form-tag, we simply declare it with an opening bracket and then the keyword wpgetapi followed by our attributes.

The attributes are:

• api_id: the API ID that you wish to use and that you have setup in the API Setup page
• endpoint_id: change this to the endpoint ID of the endpoint you wish to use
• message_type: (optional) defaults to ‘none’. What this will do is inject the returned data from the API into the thank you message after the form is submitted.
  • none – will not use the returned data from the API. Uses the message that you set within CF7
  • replace – completely removes the default CF7 message and replaces it with the returned API data
  • append – this appends the API data to the standard CF7 message
  • prepend – this prepends the API data to the standard CF7 message
• keys – (optional) must be declared with quotation marks. This steps down into the returned API data. It follows the same syntax as the nested data feature.

A complete form tag might look like this: [wpgetapi ongage_signup|signup|append "data,0,timestamp"]

---

Method 2 – Some Coding

This method requires some PHP coding knowledge.

We will outline the steps that will allow you to integrate Contact Form 7 with WPGetAPI. In our example we are just using a quick test example to connect to the Binance API and retrieve the price of a cryptocurrency pair. Other more suitable uses for this could be something like sending a subscriber email address to your email marketing platform.

Step 1: Setup Contact Form 7

Once you have Contact Form 7 installed, you will need to add a form. Visit the Contact Form 7 docs for help in setting this up – https://contactform7.com/getting-started-with-contact-form-7/

We have set up our form with the following fields:

• your-name
• your-email
• the-value – this is what we will use to send to our API

In the Additional Settings tab we have also added “skip_mail: on” which stops the email being sent (which is default for Contact Form 7 as it is a contact form).

Now we just need to add the shortcode [contact-form-7 id=”7959″ title=”Untitled”] to our page and it will display our form.

Step 2: Setup the Binance API

The settings for our Binance API are shown in the screenshot below and you can see that we are using the endpoint: https://api.binance.com/api/v3/avgPrice

Step 3: Process the form and get the API data

We now need to add the following code into our themes functions.php file. This will basically get our form value, which will be a cryptocurrency pair and then send this as a query variable to the Binance API to retrieve the price. We are then modifying the output of the forms message to give us the price.

// hook into the contact form 7 action upon processing the form
add_action( 'wpcf7_before_send_mail', 'wpgetapi_send_data_to_api', 10, 3 );

function wpgetapi_send_data_to_api( $contact_form, &$abort, $submission ) {

    // Getting user input through the the-value field
    $the_value = $submission->get_posted_data( 'the-value' );

    // call the binance api and retrieve the 'price' key
	$price = wpgetapi_endpoint( 'binance', 'price_of_coin', 
		array( 
		    'debug' => false, 
		    'query_variables' => 'symbol=' . $the_value, 
		),
		array(
			'price'
		)
	);

	// get the form properties
	$properties = $contact_form->get_properties();

	// set the success message
	$properties['messages']['mail_sent_ok'] = 'Current '. $the_value . ' price is ' . $price;
	$contact_form->set_properties($properties);

}

Step 4: View the results

Now it is just a matter of testing our form to see the results, which will be the current live price of a cryptocurrency pair from Binance.