Leveraging AI to create forms in Typeform
How we used AI models to help users create efficient forms in a few clicks
Like many companies, we have started to leverage OpenAI within Typeform. This article outlines one initiative where we use AI to help users minimize the time it takes to create a form.
In this article, I will discuss how we added AI to form creation in Typeform. I am a frontend engineer in the Product experience (PX) team, one of the first teams at Typeform to experiment with AI. My team focuses on the user’s first experience, making it as seamless as possible to enable them to reach their end goal smoothly.
We all know that users don’t have much time, so when they need to create forms, they want to be fast and share their forms quickly to complete their use case. This is why my team decided to experiment with a new creation method that would leverage generative AI to automate the form creation process.
The frontend experience
Let’s first focus on how AI is available to the user through a new creation method. When a user lands in Typeform, they first see the workspaces screen. From there, they can create a new typeform, by opening a modal and choosing how to create a new form. This is where we have added the “Create with AI” option.
After selecting Create with AI, the user has to complete two or three steps (depending on the type of user) that I will cover in the following sections.
Type of form
In the first step, called Type of form, the user is asked to enter the type of form they want to create.
They can choose to enter this into the type of form field. The input is expected not to be very lengthy — e.g., “I want to create a feedback survey about the workshop I did last week” or “I want to create a registration event for the Javascript meetup” This way, the users with a clear goal in mind can define what type of form they want to create.
On the other hand, if the user is exploring, we are showing them three suggestions that the AI model generates. These suggestions are generated based on data from the onboarding survey.
The onboarding survey is a short survey the user is asked to complete when creating a Typeform account. This is where we collect data about the type of user they are (work/personal/school), their role, etc. It’s important to note a slight UI difference based on the kind of user. If the user is using Typeform for work and has entered their company website in the onboarding survey, we enrich the input that gets sent to OpenAI. We use the company description for the provided website, retrieved from a third-party service called Brandfetch.
Brandfetch returns different brand assets for the specific brand given a valid URL and the availability of data about the brand i.e company online.
To conclude, before going to the next step, the user can choose any displayed suggestion or type away.
Specific questions
In the second step — Specific questions — we are asking users to add any topics or specific questions they want in the form. This optional field allows users to be more specific and add any additional information that would aid in creating a better form. For example, if it’s an event registration form, they might want to write, “Ask users about food allergies and provide an email or phone number where they can be reached”.
Business information
The third step, business information, only appears for work type users (as mentioned previously, users who answered they use Typeform for work in the onboarding survey), and it’s an input field pre-filled with the company description. Users can adjust the final description sent to the backend if the description isn’t optimal or they want to add more details.
After completing all the required steps, we show a loading screen while we make the call to OpenAI and create the form in the background.
On the Backend Side
Let’s now move to the backend part. We created a k8s service that is responsible for making calls to OpenAI.
In the “create with AI” option, we are using two endpoints, one to retrieve the type of form suggestions (shown in step 1) and the other to generate the questions for the form (done after the user completes all the steps).
Type of form suggestions
For the type of form suggestions, as mentioned previously, we are passing the information from the onboarding survey the user completed upon signup. The onboarding survey answers are mapped using a dictionary to ensure they are optimized for AI. Finally, we construct the prompt — explicit text instructions that AI will use to produce the desired output and send it to OpenAI. Once we get back three suggestions, we show them on the dropdown as suggestions from which the users can choose.
Questions generation
The endpoint to create the questions is more complex, as it receives lengthier inputs that the user submitted — a type of form, specific questions and, depending on the type of user, company description. The prompt consists of both user and system instructions. In the system instructions, we specify some rules: introducing Typeform, giving more info about the expected output, we define the allowed question types, questions and question choices delimiters, we define the format of the output, and additional instructions. The user instructions are built using the data received from the frontend along with a few more guidelines — asking to add a form title in the beginning, not to add notes, limit the number of choices for the question types with choices etc. We are using the gpt-3.5-turbo-0301 model and defining a maximum of 2800 tokens to be generated in the output.
Response parsing
Once we get the response from OpenAI, we parse the string to return valid and properly formatted form questions to the frontend. The parsing starts with splitting the string by the previously defined delimiters. After that, we check if the type is a valid question type that can be used in a typeform — if it’s not a valid type, we dismiss that question. If a question type requires choices, we validate the choices are there, and finally, we extract the form title. We needed to put extra effort into building this function because of AI’s unpredictable responses. Even though we had explicitly said to use the question types defined in the prompt, sometimes it returned types that don’t exist (are not in the list), would add notes, or wouldn’t provide the necessary choices for multiple-choice questions or similar types. That is why we needed to build a robust function that would validate and sanitize the response.
GPT models and function calling
You might wonder about the function calling feature in the OpenAI’s new model released in June (gpt-3.5-turbo-0613), thinking that these problems could be avoided and it wouldn’t require any string manipulation. We have done a separate experiment with this new model. While it allowed for a more structured and powerful way of defining the parameters and their format, the output quality was not satisfactory at the moment compared with the gpt-3.5-turbo-0301 model. The outputs for the form creation offered less valuable questions, not in line with what the users specified in the inputs. We decided to keep using the legacy model for now, especially since OpenAI announced they would keep it until mid-next year.
Error handling
Going back to the frontend, if the question retrieval fails, we retry it automatically one more time with the same parameters — to cover the case of a temporal unavailability of our service or OpenAI.
If the request was successful, the form gets created. Otherwise, there are a few error screens that a user can see depending on the error — allowing them to retry the call to AI again, go back and adjust their inputs or go back to the workspaces screen and use another creation method.
As a visual summary, in the following illustration you can see the connection between the user’s input and the backend.
Results
“Create with AI” was first launched as beta in May, as an A/B test only to a certain percentage of new desktop users who are using Typeform in English and internally we called it Create wizard, affectionately.
Since then we have released several improvements of the prompt generation logic, output parsing function and validation flow. One of the issues we experienced in the early stages was with OpenAI’s latency but they have since improved it. After a release in mid May, the median latency to generate form questions went down from 23 to 6 seconds!
However, the improvements weren’t made only in the backend; we have made a few adjustments to the frontend part. The most significant was loading the suggestions that are shown in step 1 immediately when the user loads the first step, instead of waiting for the user to focus on the textarea. This improved discoverability, especially for mobile users — after we launched the mobile version — and we saw an increase of more than 5% in users completing step 1 and continuing to the next one.
Since the release of the A/B test, we have been following the results closely, and we have seen a 16% increase in the publication rate of typeforms created with AI in comparison to the other creation methods.
I am happy to share that in September we have finally removed the beta badge and made it available to all users — the create wizard is here to stay. Go ahead and try it for yourself!
This has been a big achievement for my team and the company. We are using these innovative technologies to help our users create forms faster and save time that they can use in other aspects of their work. This wouldn’t have been possible without my amazing team; it was a shared effort where we all worked hard to reach this milestone and, finally, improve the experience for our users. Go PX team! #pxkudos
Of course this is not the end, we are working on more experiments with AI so don’t go anywhere!
In the meantime, check out Formless — an AI-powered platform that creates dynamic and conversational data collection experiences, in order to make forms more engaging and natural.
