Your First Form

Ready to dive into AI Forms? Let's breeze through setting up your first one and get the hang of how it all clicks together! 🛠️

First step if not already done, enable the feature:

Got a scenario where you need to whip up a custom response based on user input? Whether it's a quiz or a decision tree, AI Forms can be your go-to solution. It's way easier than teaching your chatbot every single step. Trust me!

We're crafting a travel assistant using AI Forms. It'll quiz users about their travel vibe, interests, and boom—suggest a destination. Happy with the choice? It'll roll out a detailed itinerary and, for the grand finale, a price estimate. Sounds tough? Nah, you'll nail it in under 5 minutes! 🏖️✈️

Time to build our first form with blocks. Kick things off in an "AI Form Container" block. It's not a must, but let's play it safe for now. Once you're an AI Forms ninja, feel free to freestyle without it. 🥷

Populate this Container with "AI Form Fields" to ask questions like "Previous destinations," "What are your hobbies?" and stuff like that.

Set up all your fields now, and we'll connect the dots later. Swap out the "LABEL TEXT" for each question and give each a snappy "FIELD NAME" for easy reference later on.

Your setup should look a bit like this now:

We've got 3 fields chilling in our container, each rocking a different 1️⃣ field type. Notice the 2️⃣ "select" field type with options for users to pick from. We'll call back to each field by their 3️⃣ "field name" in our prompts later.

Add a "AI Form Submit" block to craft our prompts based on user input. Here, you can pick your model (you can also use an OpenAI Assisstant !), set the temperature, and craft that prompt. Field names like {LAST_TRIP} will stand in for user values. Got optional fields? Check out this doc for tips.

Almost there! See our prompt referencing the fields? You can also point to webpage elements with query selectors. Got a "#target-element" div? Mention it in your prompt like ${#target-element}. Pros can target just about anything! Plus, you can pull in data from databases, APIs, plugins, and more—learn all about it here.

Our output's currently non-existent ("N/A"), so let's fix that. While query selectors can place our output anywhere, let's keep it simple with an "AI Form Output" block. Link it to our submit block with its ID.

Boom! You've just birthed an AI travel advisor! 🌍 Let's give it a whirl:

But why hit the brakes now? The power of AI Engine and AI Forms means you can get super creative. Use one form's output as another form's input! Remember those query selectors? Let's loop it back into a new prompt.

We'll set up 3 submit buttons, each with its own prompt, tied to one output. They'll each take the previous response and offer more detailed travel plans based on the top 3 options.

Here's our new setup: a fresh container, a friendly message, and 3 columns with submit buttons. Each button (1, 2, 3) points to one output (5) and has its own prompt (4), referencing the earlier response. Button (1) drops "first" in the prompt, and you can guess what buttons (2) and (3) will say. 😉

Let's test with the same values as before and hit "option 1":

Cool, right? 🌟 Imagine the possibilities with a sprinkle of imagination! To wrap up, we'll make one last form for a price estimate using the same tricks.

That's our final masterpiece. You can layer this with filters, JavaScript, and more for powerful tools and slick user experiences. Just look at what you can build with AI Engine forms! Go wild and have fun! 🎉