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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
Create a ‘Make OpenAI Request’ Action
First, click the Actions icon at the top of the page.
Next, click the plus icon to add a new action.
Click the Action dropdown box and select Make OpenAI Request from the list of options. Save your form.
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.
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.
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.
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.
Next, click the Conditional Logic icon at the top of the screen.
Next, click Add Row to create the conditional logic statement.
For the IF statement, click the Select dropdown box and choose your Custom button. Mine is named AI Response.
Next, add a THEN action by clicking the plus icon under the THEN section.
For the THEN statement, click the Select dropdown box and choose the Make OpenAI Request 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.
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.
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.
