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.
More Examples
Example 1: Interactive test with evaluation
Create an interactive form where users answer multiple questions and receive a personalized evaluation at the end.
Perfect for:
Coaching funnels
Lead generation
Personality tests
Health/fitness offers
Consulting services
What should be included?
Goal of the form: What should the form achieve? How many steps or questions should it contain? What information should the user receive at the end?
Design preferences: What style is desired? Which colors, animations, or effects should be used? Should it feel modern, playful, premium, or minimalist
Structure: Which sections should the form contain? How should the user be guided through the individual steps? Should there be a progress bar, intermediate steps, or animations?
Result / Evaluation: What should happen after completion? Should a rating, score, recommendation, or call-to-action be displayed? What next steps should the user be able to take?
Example prompt for a psychological test:
"Create a modern interactive quiz form for a psychological personality test.
Goal: The user answers 10 questions about their current well-being and receives an individual evaluation with a score at the end.
Design:
- Premium SaaS look
- Dark background with blue/purple gradients
- Modern glass-effect cards (Glassmorphism)
- Soft shadows
- Rounded corners
- Animated transitions between questions
- Progress bar at the top
- Subtle particle animation in the background
- Emotional but professional atmosphere
Structure:
- Hero section with title: "How are you really doing?"
- Subtitle: "Answer 10 questions and receive your personal evaluation."
- Button: "Start test"
- Afterwards, display individual questions one after another.
Each question:
- Large heading
- 4 answer cards
- Selection animation
- Automatic saving of answers
- Continue button
Questions:
How do you currently feel?
How often do you feel stressed?
How well do you sleep?
How satisfied are you with your daily life?
How much energy do you have?
How do you deal with challenges?
How often do you take time for yourself?
How positively do you look toward the future?
How connected do you feel with others?
How happy do you currently feel?
Evaluation: Calculate a score.
Afterwards, display:
- Result score
- Animated progress circle
- Personal interpretation
- Suitable recommendation
- Call-to-action button
Add modern micro-animations. The result should feel like a professional coaching app."
Result:
You can also use this link to try out the funnel.
Example 2: Form with tabs
Create a modern form with multiple tabs where users are guided step by step through different sections. The tab structure keeps even complex forms organized and easy to use.
Perfect for:
Travel bookings
Quote requests
Application processes
Product configurators
Customer onboarding
Extensive contact forms
What should be included?
Goal of the form: What should the user accomplish through the form? Which information needs to be collected? How many tabs or steps are required?
Tab structure: Which sections should have their own tabs? In what order should the user be guided through the form? Should users be able to switch between tabs at any time?
Design preferences: What look is desired? Colors, icons, animations, and spacing. Should the form feel modern, premium, or minimalist?
Features: Required and optional fields, progress indicator, automatic validation, saving inputs temporarily, summary before submission.
Completion / Result: What should happen after submission? Should a confirmation be displayed? Should the form be connected to the CRM?
Example prompt for a travel booking form:
"Create a modern travel booking form as an interactive funnel experience.
Goal: The user should be able to select and configure a trip and then receive a summary.
Design:
- Premium travel portal design
- Large immersive background images
- Modern cards
- Elegant animations
- High-end look like a luxury travel platform
- Glassmorphism elements
- Smooth transitions
- Responsive for mobile
Structure:
Start: Hero section: "Find your perfect trip"
Below, add tabs:
Spain
Greece
Italy
Tab behavior: When switching destinations:
Change the background image with a smooth fade animation
Update travel offers
Show a matching description
Spain:
Image: Mallorca beach
Title: "Mediterranean Escape in Spain"
Price: from €699
Greece:
Image: Santorini sunset
Title: "Greek Island Dream"
Price: from €899
Italy:
Image: Amalfi Coast
Title: "Discover Italy"
Price: from €799
Afterwards, add the following form steps:
Destination
Travel dates
Number of people
Accommodation selection
Summary
Include:
Progress indicator
Animated transitions
Hover effects
Interactive selection cards
Modern buttons
Real-time price updates
The form should be connected to the Onepage CRM. The entire experience should look like a premium booking platform."
Result:
You can also use this link to try out the funnel.
📌 Please note: You can also make further changes here using the controls or provide the AI with additional requests for changes.
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 saved accordingly. However, you must first tell the AI that the form should be linked to the CRM.
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! 🙂