OpenAI GPT3 x CF7 x Make x NocoDB: Low Code Smart Contact Form

Previously, we create a simple web contact form using WordPress / Contact Form 7, as well as NocoDB. Today, let us try to make the contact form smarter by introducing OpenAI GPT-3, the AI will help us to rank the comments from visitor, and generate a possible response text to us.

This will help to reduce the man-hours spent on analyzing the comments, and draft the response back to the visitor.

For the smart contact form solution, we going to use 4 tools to built it, which required minimum coding, within 5 minutes!

Here are the breakdown for the tools’ purpose, in sequence where the actions occured

1. WordPress / Contact Form 7
2. Make
3. OpenAI GPT-3
4. NocoDB

At the time when this article being published, Make’s 2 connector are under beta stage, which are OpenAI connector, and NocoDB connector. As far as I tested, the connector works great.

1. To get the OpenAI to work, let’s start by creating an account. Once you done that, create an API keys within your account.

2. Next, record down the Origanization ID

3. You are done with OpenAI here for now, let’s move on to next step.

1. We cover how to create a contact form using WordPress + Contact Form 7 before, to refresh your memory, you may refer to here. For this case, we going to use 2 plugins.

1. Contact Form 7 (you bet)
2. Contact Form 7 – Redirections, Integrations, and Database

2. Next, create a contact form, to make your life easier, we provide a sample for you to cut and paste.

<label> Your name
[text* your-name autocomplete:name] </label>

<label> Your email
[email* your-email autocomplete:email] </label>

<label> Phone
[text* your-phone] </label>

<label> Your message (optional)
[textarea your-message] </label>

[submit "Submit"]

3. You are done with Contact Form 7 here for now, let’s move on to next step, we will need to come back later for this.

1. We cover the building contact form with NocoDB before, to refresh your memory, you may refer to here. For now, let’s just create a base for contact form.

2. Let’s create the fields similar as contact form we created just now using Contact Form 7, with additional 2 fields

• Type: The type of the feedback from visitors which categorized into Spam, Angry or Happy.
• Suggestion: Suggested response text from AI

3. You are done with NocoDB here for now, let’s move on to next step, we will need to come back later for this.

1. Create a “Scenario” in Make, let’s start with a first step by creating a webhook for Contact Form 7. This is to make sure, a new submission from Contact Form 7 will trigger the web hook.

2. Let’s give the webhook a name, any name will do.

3. Once you setup the webhook, you will get the webhook endpoint as below, copy the endpoint URL now.

4. Now go back to the WordPress, place the endpoint at the contact form setup.

5. Next, let’s create a OpenAI GPT-3 connector. You will need to provide the API Key, and the Organization ID here.

6. For the connector OpenAI GPT-3, let’s select the actions “Create a Completion”

7. Let’s setup some default parameters

• Model: The engine we will be using, in this case is “text-davinci-003”. Please take note the charges of each engine is vary
• Prompt: The question we wish to “ask” OpenAI
• Max Tokens: The number of characters to send, and to receive. To understand more, please see here.
• Temperature: Let’s set as default, 0.7
• Top P: Let’s set as default, 1

In order to let OpenAI GPT-3 work with other application, we have to “guide” it and ask the right question, else it will response with long winded answer which you need read between the words.

Below is how I enter the question in the prompt, mixed with the variable from Contact Form 7:

Tell me if this comment is a Spam, or Angry, Good, or Unknown? Please recommend a professional response, please response your answer in JSON format, which having 2 nodes, type and suggestion. Here is the comment: [THE-CONTACT-FORM-7-MESSAGE]

It basically tell the OpenAI to

• Is the feedback is Spam, Angry or Happy, I call it as “type of the message”
• Suggest a response to the feedback
• Return the answer in JSON, so other application able to read it with ease.

8. Once we done with the setup of OpenAI GPT-3, we will need to run it for the first time to get the response.

The moment you run it, as this scenario started with webhook, it will just wait and listen the incoming data from Contact Form 7. At this moment, you may switch to Contact Form 7, and simulate to submit the contact form.

9. If the contact form setup properly, the webhook should be triggered and data should received at Make. You will see the “1” on each circle below.

10. Click on the “1” at the top right of the OpenAI GPT-3 bubble, you shall see the pop which having input and output. You can troubleshoot the data from Contact Form 7, and the response from OpenAI GPT-3.

With the response sample from OpenAI GPT-3, you will be able to move to next step, which is to form into a valid JSON from the string.

11. The response from OpenAI GPT-3 is a text, hence we need to form into a valid JSON object, to do this, we have to use “Parse JSON”

12. To parse the JSON, we need to create a similar JSON object structure. Please take note, the JSON structure  that OpenAI return as a text, need to be the same as JSON object structure we going to parse.

Hence, it is always good to keep it simple and stupid.

In this case, the JSON structure we are having is

{
  "type": "FEEDBACK-MOOD-RETURN-FROM-OPENAI",
  "suggestion": "SUGGESTION-TEXT-RETURN-FROM-OPENAI"
}

13. Once you define the JSON object structure, under the “JSON string”, click the response from pop up, which indicate response from OpenAI GPT-3 connector.

In this case, it is

Choices[].text

14. Final connector! Let’s create the connector for NocoDB, which bring the data from the Contact Form 7 and OpenAI GPT-3, and insert into NocoDB.

15. You will need to enter the NocoDB URL, and the xc-token. We cover the xc-token before at here.

16. We shall select the data from Contact Form 7, and JSON object from OpenAI GPT-3, and map to the NocoDB table – we created previously.

17. We shall done for the entire setup, let’s give it a try.

1. The entire setup in Make should look like below

2. Let’s test by click the “Run once” at the bottom left of the page to try out from Contact Form 7 – You have to submit the data via Contact Form 7, you can use the sample response text I provide here. Sometime, the OpenAI GPT-3 may run into below issue, in this case, just increase the Max Token may solve the issue – that could be due to send out words and response words are exceed the Max Token.

3. Below screen showing the successful screen.

4. We shall check the NocoDB now, and you can see the data are in, including the suggestion from OpenAI GPT-3, amazing! Isn’t it?

5. Lastly, just turn on the scenarios, so that it can switch into Live mode, and wait for the Contact Form 7 . You basically have an AI powered smart contact form, which able to help the admin speed up the customers response work!