With Vibe Coding, you can create forms entirely from text input. You can precisely describe to the AI how your form should look and function.
Possible use cases:
Simple contact forms
Multi-stage funnels
Appointment requests
Quote requests
Job application forms
Quiz and qualification funnels
Forms with conditions and logic
Forms with a thank-you or closing page
All requests can be automatically transferred to the OnePage CRM. Simply mention this in the prompt.
Recommended for any form prompt
Describe as precisely as possible:
Which fields should be included
Which fields are mandatory
Whether the form should be connected to the OnePage CRM
Whether a thank-you page should open after submission, or whether a standard completion/finish step should be displayed instead
Which colors, effects, or animations are desired
After successful submission, the leads are automatically saved in the CRM.
Tip: Not everything has to be in a single prompt
You don't have to meet all requirements in the first prompt. Often, it's even more effective to proceed step by step. For example, you can initially just describe the basic concept. For example:
"Create a multi-stage solar funnel for lead generation."
You can then add further requests:
"Connect the form to the Onepage CRM."
"Add a finishing step with a thank-you message."
"Adopt the website's colors and use modern animations."
"Make first name, last name and email address mandatory fields."
This iterative approach often yields better results and allows you to adapt the form to your needs step by step.
Create a form
Step 1: Open the page
Open the desired page in the editor.
Step 2: Add a vibe section
Click the plus icon, for example, between two sections, and then select "Vibe section - Create with AI":
Step 3: Enter the prompt
Describe to the AI as precisely as possible which form you want to create.
Example: One-step contact form
"Create a modern contact form.
Fields:
First Name (required)
Last Name (required)
Email (required)
Phone
Message (required)
Connect the form to the Onepage CRM. After successful submission, display a finish screen with the message: "Thank you for your inquiry. We will get back to you as soon as possible." Use the colors, fonts, and design style of the existing page so that the form integrates seamlessly into the existing layout."
The required fields were automatically filled in. If a visitor attempts to submit the form without filling in these fields, a corresponding error message will automatically appear.
Furthermore, the desired finish step was created after successful form submission. The result looks like this:
Example: Multi-step funnel
"Create a modern multi-step form for a free solar energy consultation.
Step 1: Building Information
Headline: "Tell us about your building"
What type of building is it?
Single-family home
Multi-family home
Commercial property
Are you the owner or a tenant?
ZIP / Postal Code
Step 2: Energy Consumption
Average annual electricity consumption:
Under 3.000 kWh
3.000–5.000 kWh
5.000–10.000 kWh
Over 10.000 kWh
Do you already have a solar system installed?
Yes
No
Step 3: Goals & Preferences
What is most important to you?
Reduce electricity costs
Independence from energy providers
Sustainability
Energy storage solution
Are you interested in a battery storage system?
Yes
No
Not sure
Step 4: Contact Information
First Name (required)
Last Name (required)
Email Address (required)
Phone Number (required)
Step 5: Summary
Display all entered information in a clear and organized overview.
Button text: "Request Free Consultation"
Additional Requirements:
Progress indicator at the top (e.g. Step 1 of 5)
Back and Next buttons between steps
Validation for all required fields
Modern card-based design with smooth animations when transitioning between steps
Fully responsive for desktop and mobile devices
After successful submission, redirect to an external thank-you page (URL will be added manually by me)
Connect the form to the Onepage CRM"
All requirements have been successfully implemented. In this example, however, you still need to enter the thank-you URL. Here's how:
Click on the Vibe element and go to the settings, as described in the chat. There you can then enter your desired URL.
The form would then look and function live as follows:
Step 4: Verification
Publish your page and then test your form yourself.
Fill it out completely and check that everything works as expected. Pay particular attention to whether required fields are validated correctly and whether the submission is successful.
Then access your CRM, you should see your test entry there, including all form data.
Make changes afterwards
You can now make changes directly in the editor using the controls. Simply click on the form. You can then edit many settings directly:
Colors
Button text
Text in the individual steps
Options in the respective steps (remove, add, or adjust)
Individual form fields can also be edited later.
Make further changes using AI:
Alternatively, you can make further adjustments at any time via the prompt.
Example: Design change
"Change the background to soft color gradients in yellow and orange, as well as a subtle energy particle effect in the background."
Example: Adding controls
"Add more controls: I want to be able to adjust the spacing (padding) myself."
Or:
"Add more controls: I would like the option to individually specify whether each field is mandatory or not."
You can ask the AI to add more fields, logic, animations, controls, or design adjustments at any time.
Add logic and conditions
You can also instruct the AI to incorporate specific conditions or logic into your form. This allows you to create highly customized and intelligent funnels.
Example: Narrowing down by region
"Only allow applicants from Barcelona. Allow the following postal code range:
08001 to 08042
Verify the entered postal code. If the postal code does not match the allowed range, redirect the user to a separate finishing step with the following message: 'Unfortunately, we currently only offer our services within Barcelona.'"
This is what it would look like if you entered a postal code that is outside the postal code area:
The form recognizes the error immediately and redirects you to a separate step. If the postal code falls within the postal code range, you can continue filling out the form normally.
You can also add controls to logic functions to define them flexibly. For example, you can implement a check like the one for postal codes using controls, without hardcoding the logic.
This allows you to control which conditions should apply and how the form should react in each case.
Example: Additional prompt
"Define the form logic as a control so that I can define the conditions myself, for example, like with the postal code check."
You can then apply this to any field you choose.
This allows you to create highly customized funnels with intelligent workflows.
📌 Please note: Sometimes the AI needs several attempts to achieve the desired result. This is perfectly normal. Therefore, please try to describe your requirements as clearly, precisely, and in as much detail as possible.
Frequently Asked Questions (FAQ)
How can I rename the form?
How can I rename the form?
You can simply tell the AI to save the form in the CRM under the desired name. It will then be automatically imported.
For example:
"The form should be saved in the CRM under XY."
Can I still create and sort lists?
Can I still create and sort lists?
Yes, that's still possible. You can read exactly how it works in the following article: Onepage CRM Essentials: View, Edit & Manage Your Leads
💡Do you have any feedback about this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂