Available Tutorial Series Installments…

This will update as we release more tutorial installments in the series.

Welcome to another refreshing serving of Divi goodness, a deep dive into the cutting-edge and form-idable (hehe) excitement of Divi and AI brought to you by the most recent feature of Divi Form Builder, Divi Form AI, powered by ChatGPT. We’ve crafted an all-inclusive guide that’s not just an educational journey, but also a delightful gastronomic adventure, as we steer you in creating a custom Divi Smoothie Recipe Generator.

Our clever instrument, the “Divi Chef Engine,” is a brilliant fusion of tech and nutrition. It magically creates smoothie recipes based on what’s already in your fridge and modifies them to align with your specific dietary requirements. Picture having a personal dietitian and a top-notch chef at your disposal, operating around your likes and what’s in your pantry! I’m already getting hungry here…

But the wonders of Divi Form AI don’t end here. Our smoothie tool extends beyond mere recipe creation to provide in-depth nutritional data, ensuring you’re not only pleasing your palate but also hitting your health targets. And in keeping with our commitment to ease and reach, this inventive feature will directly send you the personalized recipe, right from within the form itself.

The charm of the Divi Form Builder AI resides in its versatile usage. This smoothie generator isn’t just a cool gadget, but a demonstration of the transformative power of Divi Form AI. It’s proof of the wide and deep possibilities it introduces to your website, amplifying user experience to levels previously unthinkable. If you haven’t yet, check out our other use cases at diviformbuilder.com.

For those yet to grab a license, there is no time like the present because if you’re not early, you’re late! Join us on this groundbreaking voyage, where gastronomic delight meets tech innovation. Brace yourself to get hands-on and set off on a healthier, tech-forward future with us. We assure you this tutorial will transform your perception of website design and utility, offering you a fresh outlook and thrilling new tools for your upcoming project.

Video Tutorial

Step 1: Basic Form Field Setup

In this section, we will set up the basic form fields for our smoothie recommendation tool. These fields include ingredients, smoothie type, and dietary restrictions.

Add our Divi Form

1. Create a new page in the Divi visual builder and add a single column row.
2. Add a Divi Form Builder module to the row and name it “Smoothie Doctor” or any desired name.

Input Field for ingredients

1. Add a new field for our ingredients.
2. Select Input as the field type.
3. Enter a field ID easy to remember (e.g., f_ingredients). 
4. Under the Layout Tab, customize the ingredients field by adding a label to the top, icon, and placeholder text (e.g., “Enter your ingredients, comma-separated”)

Radio Field for smoothie type

1. Add a new field for our smoothie type.
2. Select Radio as the field type.
3. Enter a field ID easy to remember (e.g., f_type). 
4. Customize the smoothie type field by adding options for veggie smoothie and fruit smoothie.
5. Under Layout Options, set Radio/Checkbox Field Style to Default or Button style.
6. Set the following one line options to “YES”.
7. If you use the button style, be sure to set the active radio/checkbox styles on the Design Tab.

Checkbox Field for dietary restrictions

1. Add a new field for our dietary restrictions.
2. Select Checkbox as the field type.
3. Enter a field ID easy to remember (e.g., f_restrictions). 
4. Customize the dietary restrictions field by adding options for Low-calorie, Dairy-free, and None.
5. Under Layout Options, set Radio/Checkbox Field Style to Default or Button style.
6. Set the following one line options to “YES”.
7. If you use the button style, be sure to set the active radio/checkbox styles on the Design Tab.

Step 2: Adding Divi Form AI Field and Overview

In this section, we will add the Divi Form AI feature to our form. Divi Form AI will enable us to output AI-generated smoothie recipes based on the ingredients, type, and dietary restrictions our users might have. We will break this down into a few steps as we define the AI persona, AI prompts, and more to this Divi AI powered form.

AI Field for recipe output

1. Add an AI field to the form and name it “AI Recipe” or any desired name.
2. Select AI field as the field type.
3. Enter a field ID easy to remember (e.g., f_recipe).
4. Scroll down to the Form AI section and configure the prompt settings. This is where we will define the instructions for the AI model.

Divi Form AI form settings overview

I know we are all eager to jump in and start working on our AI prompts to get to that sweet sweet ChatGPT goodness and smoothie deliciousness, but first things first, let’s take a look at the AI settings.

You’ll find these by scrolling down to Form AI on the main form settings (not the field settings).

1. Set an estimated spend limit for this specific form which can be reset in admin settings.
2. Decide what you want the form to do when the limit has been reached.
3. Show, hide, or disable the submit button for the form until AI content is generated.
4. Save AI responses to the database to gauge prompt and response quality.
5. Rate limit API calls to avoid abuse.
6. Enable this if you are getting bad responses or it seems like the AI is not tracking all the input.

Step 3: Divi AI Setup – Defining an AI Persona

Context is how these AI models are reigned in from crazy hallucinations and spitting out some gibberish that seems completely off base. To give the AI model context and a specific role, we will define an AI persona. In AI lingo, the persona is how we give it the context it needs to answer your prompts more effectively. If you want to know more about giving your AI context, check out our post on Crafting an AI Persona for ChatGPT to get better responses.

Lucky for you, Divi Form Builder comes with a few pre-defined AI personas, but will also let you take full control and craft a persona from scratch. To find these options, got to the AI Field settings and scroll down to Form AI.

Crafting our Custom AI Persona

1. In the Pre-defined Prompt Persona section, select “Custom” from the predefined prompt persona options.
2. Provide a description of the AI chef’s role and skillset in Custom Prompt Persona. For example, you can say, “You are an AI chef that is experienced in creating delicious smoothie recipes based on ingredients the user provides and adheres to any dietary restrictions they may have.”
3. You can even give the AI persona a name, such as “Chef Engine,” by adding something like “Your name is Chef Engine and you should refer to yourself as such.” to the end of your Custom Prompt Persona.

By defining an AI persona, we provide the AI model with context and guidance on the type of information we expect it to generate. This helps ensure that the AI-generated smoothie recipes are tailored to the user’s inputs and preferences.

Step 4: Divi AI Setup – Engineering your AI Prompt

Time to get to the biggest task when working with any type of AI like ChatGPT or Divi Form AI, prompt engineering. Now for the layman prompt engineering could be daunting, but all it basically is is learning how to talk to the AI so it knows what you are saying and does what you want it to do. For more on prompt engineering basics, check out our documentation.

So within the context of this Divi Form AI tutorial, we need to provide the necessary context and instructions for generating the smoothie recipe. Because we are doing more than a simple content generation and adding value with Divi From AI, we consider user input for our Divi Smoothie Generator. We do this by passing our prompt the field IDs we created earlier.

Now you know why I was such a pain about it.

The most important things to keep in mind are the following:

1. Make sure you have the correct field ID.
2. Make sure you wrap the field ID in %% (eg. f_ingredients becomes %%f_ingredients%%).

Knowing this, all we need to do is tell the AI how to handle the user input from your Divi Form and what you want it to do with it. We’ll tell it what ingredients the user has, what type of smoothie they want, and then what dietary restrictions to take into account.

Crafting our AI prompt

1. In the prompt section, start by mentioning the user’s available ingredients using the field ID %%f_ingredients%%. This will ensure that the AI model knows which ingredients to consider.
2. Next, include the type of smoothie the user wants using the field ID %%f_type%%. This will guide the AI model in generating the appropriate recipe.
3. Mention the user’s dietary restrictions using the field ID %%f_restrictions%%. This will ensure that the AI model takes these restrictions into account while generating the recipe.
4. Clearly state that you want the AI to provide a detailed step-by-step smoothie recipe that considers the ingredients and dietary restrictions.
5. Emphasize that the user’s dietary restrictions and smoothie type should be adhered to in the recipe.

The prompt we landed on is the one below.

The user has the following list of ingredients available to them:
%%f_ingredients%%
They want a %%f_type%% smoothie recipe.
They have the following dietary restrictions:
%%f_restrictions%%

Please give me on detailed step-by-step smoothie recipe that takes the users ingredients and dietary restrictions into account. Make sure you adhere to their dietary restrictions and make the type of smoothie they want.

Do not ask me any follow-up questions, just provide the information.

Now if you followed all the steps exactly as I had them, your GPT response should look something like this.

Step 5: Divi AI Setup – Improving the Prompt

If the initial prompt doesn’t give the desired output, you can improve it by tweaking the wording or providing more context. We might also want to add the nutritional information at the bottom of the response as an added benefit to our users.

Improving the prompt

1. Let’s ask the AI to add the nutritional information by adding I also want you to output detailed nutritional information as an HTML table format for easy reading
2. Consider using HTML tags to format the table output by going further and adding Use <table> <thead> <tr> etc as needed to output the table to your prompt.

With this added refinement to your Divi AI form, your GPT response should look something like this.

Step 6: Divi AI Setup – Form Text Preloader

Now, I’m not going to lie to you, depending on the GPT model you are using, users can sit there waiting for a few seconds which is not great. It is always a good idea to add a preloader to improve the user experience to reassure them that your site has not crashed or is frozen for some reason.

Divi Form AI has a few options to choose from for the preloader to help with this. Aside from a few animated ones, we also have our Text Preloader which gives it a cyberpunk terminal look which is pretty awesome!

Let’s add a text preloader

1. Head over to the Field settings for your AI Recipe field.
2. Scroll down to Form AI and select Text from the AI Response Loading Style settings.
3. In AI Response Text, enter the lines of text you want to display during the preloading process, such as “Analyzing ingredients…” and “Considering restrictions…”
4. You can customize the text color for each line using HTML color codes between curly braces (eg. {#000000} for black text).
5. You can then decide if you want the text output on the same line, or each on a separate line.

Divi AI Smoothie Recipe Generator, so easy a sheep could use it!

Conclusion

Congratulations! You have successfully created a smoothie recommendation tool using Divi Form AI. Your kids are going to think you are so hip. By following the steps outlined in this tutorial, you can now generate personalized smoothie recipes based on user inputs. You could even take it a step further and have the recipe emailed to the user by using the email confirmation feature in Divi Form Builder.

And as always, feel free to customize the form design and experiment with different prompt variations to further enhance the user experience.

Enjoy building amazing sites with Divi Form Builder and Divi Form AI!