- \n
- WordPress (duh)<\/li>\n\n\n\n
- Formidableforms plugin<\/li>\n\n\n\n
- Formidable API addon<\/li>\n\n\n\n
- A ChatGPT API key<\/li>\n<\/ul>\n\n\n\n
Create a form<\/h2>\n\n\n\n
Create a form that has at least three fields:<\/p>\n\n\n\n
- \n
- Input (Invoer)<\/li>\n\n\n\n
- Answer (Antwoord)<\/li>\n\n\n\n
- Instructions (Instructions)<\/li>\n<\/ul>\n\n\n\n
![\"\"](\"https:\/\/rent-a-pilot.nl\/wp-content\/uploads\/2024\/01\/image-1024x740.png\")
<\/a><\/figure>\n\n\n\nInput:<\/h3>\n\n\n\n
You can set the Input field to type “rich text” (if you have the pro version of Formidableforms). This looks nice later on but with the disadvantage that the rich text field does not have the “auto grow” option that the normal text field does have. Your choice.<\/p>\n\n\n\n
Answer:<\/h3>\n\n\n\n
I will use this field later to save the API reply from chatgpt.
It is a standard text field with the auto grow option enabled.
This requires the use of a code snippet that I will cover later.<\/p>\n\n\n\nInstructions:<\/h3>\n\n\n\n
This is the part where you tell chatgpt what to do.<\/p>\n\n\n\n
- \n
- Use a standard text field with the “Auto Grow” option enabled.<\/li>\n\n\n\n
- Put the default instruction that you want to pass to chatgpt in the “Default Value” and let the user edit this if they want. <\/li>\n<\/ul>\n\n\n\n
![\"\"](\"https:\/\/rent-a-pilot.nl\/wp-content\/uploads\/2024\/01\/image-1.png\")
<\/a><\/figure>\n\n\n\nThe actual instructions are a lot longer than that.
Figure out a good prompt, it is the sauce that makes this thing awesome.<\/p>\n\n\n\nForm options – sending the input to chatgpt<\/h2>\n\n\n\n
This is where you need the API addon. Go to the form settings and add an API action. I called mine “Zend data naar ChatGPT”.<\/p>\n\n\n\n
![\"\"](\"https:\/\/rent-a-pilot.nl\/wp-content\/uploads\/2024\/01\/image-2-1024x614.png\")
<\/a><\/figure>\n\n\n\nConfigure the API action<\/h2>\n\n\n\n
![\"\"](\"https:\/\/rent-a-pilot.nl\/wp-content\/uploads\/2024\/01\/image-3-1024x826.png\")
<\/a><\/figure>\n\n\n\nAction name:<\/h3>\n\n\n\n
Whatever you want. I choose “Zend data naar ChatGPT”.<\/p>\n\n\n\n
Trigger:<\/h3>\n\n\n\n
Set this to “Entry is created” and “Entry is updated”.
This will allow you to publish the result on a view later and offer to option to edit the entry and allow the user to fine tune the input and the instructions.<\/p>\n\n\n\nThe howto I will post later along with the code snippet for the API answer.<\/p>\n\n\n\n
Notification URL<\/h3>\n\n\n\n
Use this:<\/p>\n\n\n\n
https:\/\/api.openai.com\/v1\/chat\/completions<\/p>\n\n\n\n
Basic Auth:<\/h3>\n\n\n\n
Ok here comes one of the interesting bits.<\/p>\n\n\n\n
In the API docs it states that you should use something called “bearer authorization” but you cannot put that in here.<\/p>\n\n\n\n
![\"\"](\"https:\/\/rent-a-pilot.nl\/wp-content\/uploads\/2024\/01\/image-4.png\")
<\/a><\/figure>\n\n\n\nHowever, if you dig a little deeper you will find that you can do it like this:<\/p>\n\n\n\n
In Basic Auth, leave the username empty and just write a colon followed by your API key. <\/p>\n\n\n\n
![\"\"](\"https:\/\/rent-a-pilot.nl\/wp-content\/uploads\/2024\/01\/image-5.png\")
<\/a><\/figure>\n\n\n\nEven if you insert the actual API key here the test connection fails but THE API WILL WORK.<\/p>\n\n\n\n
Data Format:<\/h3>\n\n\n\n
- \n
- raw<\/li>\n<\/ul>\n\n\n\n
Method:<\/h3>\n\n\n\n
- \n
- POST (= default)<\/li>\n<\/ul>\n\n\n\n
Character Set:<\/h3>\n\n\n\n
- \n
- Use blog charset (= default)<\/li>\n<\/ul>\n\n\n\n
Raw Data:<\/h3>\n\n\n\n
You now need some JSON code. Put this in:<\/p>\n\n\n\n
{
\"model\": \"gpt-4-1106-preview\",
\"messages\": [
{
\"role\": \"system\",
\"content\": \"[2929]\"
},
{
\"role\": \"user\",
\"content\": \"[2928]\"
}
]
}<\/code><\/pre>\n\n\n\nI used the latest preview model of today but that can change. Look for the model names here<\/a>.<\/p>\n\n\n\n
Replace<\/strong> [2929] in
“role”: “system”,
“content”: “[2929]”
with the field number of field that contains the instructions<\/strong>.<\/p>\n\n\n\nReplace<\/strong> [2928] in
“role”: “user”,
“content”: “[2928]”
with the field number of field that contains the input<\/strong>. <\/p>\n\n\n\nSave the options, you’re done.<\/p>\n\n\n\n
Chatgpt API reference<\/h3>\n\n\n\n
- Use blog charset (= default)<\/li>\n<\/ul>\n\n\n\n
- POST (= default)<\/li>\n<\/ul>\n\n\n\n
- raw<\/li>\n<\/ul>\n\n\n\n
![\"\"](\"https:\/\/rent-a-pilot.nl\/wp-content\/uploads\/2024\/01\/image.png\")
<\/a><\/figure>\n\n\n\n