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

Quick run-through

Pre-requisite check

  • Initial requirement

    Let’s look at how it started, as well as the initial design

  • Backend

    • OpenAI GPT-3: Served as AI brain which handling the response
    • WordPress + Contact Form 7: Served as front end to accept comments
    • Make: Served as integrator which “glue” different system together
    • NocoDB: Served as database, which stored the final result
  • Platform

    • OpenAI GPT-3: SAAS Model
    • WordPress + Contact Form 7: On-prem
    • Make: SAAS Model
    • NocoDB: On-prem
  • Account

    • OpenAI GPT-3: Required a paid account
    • WordPress + Contact Form 7: No account required, only installation
    • Make: Required a basic free accout
    • NocoDB: No account required, only installation
  • Cost

    • OpenAI GPT-3: Required a paid account, you may check the pricing info here.
    • WordPress + Contact Form 7: Only pay for the hosting
    • Make: Required a basic free account, you may check the pricing info here.
    • NocoDB: Only pay for the hosting
  • Programming Required

    You need to know some basic REST API concept for OpenAI, and little HTML knowledge.

Applications Flow

  • null

    Wordpress + Contact Form 7

    A website that host the contact form, visitor of the website able to freely submit the comments / feedback on the website itself

  • null

    Make

    It is platform that connect different applications, without coding! Other than connect different application using connector, it also provide a webhook for other application send in the data

  • null

    OpenAI GPT-3

    Identify the tone of the feedback, and suggest a response based on the feedback

  • null

    NocoDB

    Store the incoming contact form, along with the result from OpenAI

Limitation

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.

Let's get started

OpenAI GPT-3

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.

Wordpress / Contact Form 7

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.

NocoDB

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.

Make

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.

Let's try it out

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!

Although the suggestion from OpenAI GPT-3 can be handy, but it shouldn’t send out directly to the visitors, as I notice sometime the suggestion that OpenAI response are for the admin, not the visitors. In this case, I would suggest that admin should at least check thru the suggestion before sending out to visitor.
Please take note, at this moment (when this article being published), the Make connector for OpenAI GPT-3 and NocoDB are still in beta stage
Leave a Reply

Your email address will not be published. Required fields are marked *

Prev
Building Smart Contact Form using AI with Low Code

Building Smart Contact Form using AI with Low Code

With the help of AI, we can be creative when come to simple contact form, at

Next
OpenAI GPT3 x Airtable x Make: Low Code Smart Contact Form

OpenAI GPT3 x Airtable x Make: Low Code Smart Contact Form

AI no longer a rocket science, with the help of Make, we are now able to make

You May Also Like
Total
0
Share