Page Builder Summit Limited Time Offer - 20% OFF! Use coupon PBS20 - View Details

< Back

How to Use OpenAI in WordPress Forms

How to Use OpenAI in WordPress Forms

OpenAI is a powerful tool that can improve your WordPress forms with interactive conversations, editing, images, and more. Adding OpenAI to WordPress forms is simple with WS Forms. In this post, we’ll see how to use OpenAI in WordPress forms and see several examples with WS Form.

The WS Form OpenAI add-on can be used for:

  • Completions (Question and answer style responses)
  • Edits (Instruction based text editing)
  • Moderation (Checking for offensive content)
  • Images (Creating images from a prompt)

For a full explanation of the WS Form OpenAI add-on as well demos, read the OpenAI knowledge base article.

Install the OpenAI WS Form Plugin

To add OpenAI to WS Form, you’ll need to download the free plugin. Check our add-ons page to download the plugin. Once you’ve downloaded the plugin, simply upload and activate the plugin the same way as any WordPress plugin. You’ll also need to add the license key.

Note – OpenAI with WS Form is currently in beta.

Connecting OpenAI to WS Forms

Adding OpenAI to WS Forms is simple. First, create an OpenAI account. Go through the steps as normal and verify your account. You can now get started using OpenAI.

Connecting OpenAI to WS Forms

Next, create an API Key on the OpenAI API Keys page. You’ll use this API Key to connect OpenAI to your WS Form. Click Create New Secret Key, copy the key, and click OK.

Connecting OpenAI to WS Forms

Finally, go to WS Form > Settings in the WordPress dashboard. Click the OpenAI tab, enter your key and save it. You can also add the OpenAI organization ID, but this is optional. You’re now ready to use OpenAI with your WS Forms.

Connecting OpenAI to WS Forms

There are two ways to create an OpenAI form with WS Form: automatically or manually. Here’s a quick look at both options.

Create an OpenAI Form Automatically

Go to WS Form > Add New in the WordPress dashboard and select the OpenAI tab. Here, you’ll see several premade forms with OpenAI already integrated. Simply choose the template for the form you’d like to build, make any changes you want, publish your form, and add it to your pages. Let’s step through a few examples to see how they work.

Create an OpenAI Form Automatically

The Completion Template

This example uses the Completion form template. Like all the templates, this template is created for you automatically with all the settings in place. We’ll see how to set these up in the section on creating them manually, but we’ll look at a couple of settings here.

Automatic OpenAI Completion Form

Max Tokens

Max Tokens is a setting in the Actions options. It lets you choose the maximum number of tokens to allow each time the action runs. The more tokens you allow, the more content can be returned but also the more expensive each request might be if you are on a paid plan. The default is 150, which is the setting selected for the Completion form.

Max Tokens

Temperature

Temperature is another setting in the Action options. It lets you choose the temperature setting for the OpenAI request. This determines whether or not the output changes each time. It adjusts the amount of randomness that’s introduced into the output. If it’s set to 0 it will be more conservative. If it’s set to 1 it will be more creative. The Completion template is set to 1.

Temperature

On the front end, your form will include the OpenAI features that your visitors can use. I entered a prompt and clicked Get Completion. The results appeared in the Completion field with high-quality tips regarding my prompt. I was more than impressed with the results.

Automatic OpenAI Form Results

Automatic OpenAI Edit Form

The OpenAI Edit form uses a Text Area field for the input, another Text Area field for the instructions to OpenAI, a Custom button to run OpenAI, another Text Area field for the OpenAI output, and a button to submit the form. It uses the Edit endpoint. The Input, Instruction, and Output fields tell OpenAI where to get its information to edit and where to place it when it’s finished. The Temperature is set to 1. The Edit Action does not have a setting for max tokens.

Automatic OpenAI Edit Form

Here’s how the form looks on the front end. I’ve entered text into the Input field without capitalizing the first word or adding punctuation. I then gave it some instructions in the Instruction field to add punctuation and capitalization. The output field shows the result. This was a simple edit, but OpenAI performed it perfectly.

Edit OpenAI Form Results

Automatic OpenAI Image Form

There are two Image templates. We’ll use the Image File upload template. The OpenAI Image File form uses a Text Area field for the image description, a Custom button to run OpenAI, an upload field using DropzoneJS as the type, and a button to submit the form. It uses the Image endpoint.

Automatic OpenAI Image Form

Here are the results. I asked for an image of mountains with a sunset and a lake. OpenAI gave me exactly what I asked for.

Image OpenAI Form Results

Create an OpenAI Form Manually

You can also create an OpenAI form manually or add OpenAI to any existing WS Form. Create your form as normal and then add a ‘Make OpenAI Request’ action, and an output field. The Action tells the form to make an OpenAI request. The output tells OpenAI where to display the results.

There are 4 different OpenAI endpoints you can make requests to:

  • Completion
  • Edit
  • Moderation
  • Image

They provide lots of fun and interesting ways users can interact with AI within your WS Forms. You can learn more about the different endpoints in the knowledge base.

In this example we’ll create a form that uses the Completion endpoint. I’ve added an AI response to the Support Request form template that can help the user step through a problem. The process for the other endpoints is similar to this example.

Create an Output Field

Before we can tell OpenAI where to post its results, we need to give it a field to post to. Simply drag and drop a Text Area field onto the form. I’ve renamed my Text Area field Suggestions to indicate it’s providing the users with a few suggestions to try.

Add an Output Field

Create a ‘Make OpenAI Request’ Action

First, click the Actions icon at the top of the page.

Create an OpenAI Form Manually

Next, click the plus icon to add a new action.

Create an OpenAI Form Manually

Click the Action dropdown box and select Make OpenAI Request from the list of options. Save your form.

Running the OpenAI Action

For my example, I’ll use a Completion endpoint. This will help us find answers to problems entered into the Support Request field. First, click the Action icon at the top of the page and open the settings for Make OpenAI Request. You’ll see a dropdown box called Endpoint. It’s set to Completion by default. This is the option we want.

Completion OpenAI Form

You can optionally choose a specific OpenAI model, including any custom models you may have created.

Next, we’ll choose the Input field, where OpenAI looks for the information to analyze. Click the Input Field dropdown box and choose the field. For my example, this is the support request field where the user entered a description of the problem.

Completion OpenAI Form

Finally, select the Output field. This is the field where OpenAI will post the results. For my example, this is the Text Area field I’ve labeled Suggestions. Save and publish your form. Now we can add the form to a page or post.

Completion OpenAI Form

Use Conditional Logic with a Button to Run OpenAI

For OpenAI, it’s best to use Conditional Logic with a custom button to run the ‘Make OpenAI Request’ action. This lets the user interact with OpenAI without automatically submitting the form. Users can continue to interact with OpenAI until they’re ready to submit the form themselves.

First, drag and drop a Custom button from your toolbox to the location you want it in your form. I’ve renamed my Custom button AI Response.

Running the OpenAI Action

Next, click the Conditional Logic icon at the top of the screen.

Running the OpenAI Action

Next, click Add Row to create the conditional logic statement.

Running the OpenAI Action

For the IF statement, click the Select dropdown box and choose your Custom button. Mine is named AI Response.

Running the OpenAI Action

Next, add a THEN action by clicking the plus icon under the THEN section.

Running the OpenAI Action

For the THEN statement, click the Select dropdown box and choose the Make OpenAI Request action.

Running the OpenAI Action

Next, click the second Select dropdown box and choose Run Immediately. Finally, click Save & Close. You can now publish your form and add it to your content.

Running the OpenAI Action

Test The Form

The user can now enter a description in ‘Your Support Request’ and then click ‘AI Response’ to get a response from OpenAI.

Completion OpenAI Form Results

Ending Thoughts

That’s our look at how to use OpenAI in WordPress forms. OpenAI is a powerful tool and works well with WS Forms. It’s easy to integrate and use and includes lots of options that create interesting forms. We highly recommend adding OpenAI to your WS Forms today.

We want to hear from you. Have you tried OpenAI with your WS Forms? Let us know about your experience in the comments.

Leave a Reply

< Back

Rapid, Responsive, Accessible, No-Code WordPress Forms

Further Reading