With 10Web's AI Website Builder, you don't build a form field by field in a drag-and-drop editor. You describe the form you want in the AI chat - what it's for, what information to collect, what should happen when someone submits it - and the AI creates the fields, layout, styling and logic for you. This article walks through creating a form, the types of forms the AI can build, and how to customize and connect them.
Create a form with 10Web AI
Option 1: Create a form while generating a new website
If you're generating a new website, you can ask for a form as part of your initial prompt, or add one once the site is built.
- Describe your website and mention the form you need, including its purpose and what fields it should collect.
- Let the builder generate the website, and review the page where the form appears.
- Open the AI chat and refine the form with follow-up requests if it isn't exactly what you need.
Example prompt: Create a professional website for a marketing agency with Home, Services, About, and Contact pages. On the Contact page, add an inquiry form with name, email, company name, service of interest, and message fields. Make name, email, and message required. Add a Send Inquiry button and display a thank-you message after submission.
You can also request more advanced forms.
Example prompt: Create a website for a business conference. Include an event registration form that collects attendee information, company name, ticket type, and dietary preferences. If the visitor selects a business ticket, ask for the company's billing information.
Quick tip:
The more specific you are about the fields and their purpose, the closer the first result will be to what you need — name the exact fields rather than saying "a contact form with the usual fields."
Option 2: Add a form to an existing website
It is important to note that these forms can be added only to the websites that have been created with 10web AI Website Builder.
- Open your website in the AI Website Builder and go to the page where you want the form.
- Open the AI chat and describe the form you want, including its fields and where on the page it should go.
- Review the result and ask for adjustments in the same chat.
Example prompt: Add a contact form below the Services section. Include name, email, phone number, and message fields. Make name, email, and message required. Use a blue Submit button and match the form styling to the rest of my website.
You can also ask AI to create a new page containing a form.
Example prompt: Create a Request a Quote page and add a form asking for the customer's name, email, service type, budget, and project details.
Or add an existing form to another location:
Example prompt: Add the existing Contact form to the bottom of the Services page.
Every form you create is listed under Forms in WordPress admin, alongside the forms the AI generated automatically with your site.
Important:
A form added or changed while editing stays in preview until you publish the site. It will not appear under Forms in your WordPress admin, and it will not receive real submissions, until the site is published.
Types of forms you can create
The AI chat isn't limited to simple contact forms. Describe the behavior you need, and it builds the fields and logic for it.
| Form type | What you can create |
|---|---|
| Contact / inquiry | A simple form collecting name, email, and a message or question. |
| Registration / signup | Event, webinar or membership signup forms with attendee details. |
| Surveys / polls | Multiple-choice, rating-scale or open-text questions for feedback. |
| Multi-step | A long form split across several pages or screens, with a progress indicator. |
| Conditional | A form that shows or hides fields based on earlier answers. |
| Quizzes / assessments | Scored questions with a result shown at the end. |
| Payment / order | A form that collects payment alongside the submitted information. |
| Conversational forms | A chat-style form that asks one question at a time instead of showing a full list of fields. |
Example prompt (multi-step form): Turn my job application form into a 3-step form: step 1 personal details, step 2 experience, step 3 upload resume.
Example prompt (customer survey): Create a customer satisfaction survey with a 1–5 rating question, a multiple-choice question about which product they bought, and an open comment field.
Example prompt (quiz): Create a 5-question quiz about skincare routines that gives the visitor a 'skin type' result at the end.
Example prompt (conversational form): Make my contact form conversational — ask one question at a time instead of showing all the fields at once.
Customize form fields and design with AI
Once a form exists, keep refining it in the same chat.
- Add, remove or reorder fields.
Example prompt: Remove the 'company' field from the contact form and add a 'phone number' field after email.
- Change the layout or styling.
Example prompt: Make the form two columns on desktop and match the button color to the site's accent color.
- Customize field validation messages.
Example prompt: Change the error message on the email field to say 'Please enter a valid email so we can get back to you.
A form's fields, layout and styling are set through the AI chat only — the Fields tab in WordPress admin shows the current setup for reference but isn't where you make these changes.
Add conditional logic to forms
Ask the AI to show or hide fields based on an earlier answer.
Example prompt: If someone selects 'Other' for how they heard about us, show an additional text field asking them to specify.
You can also combine several conditions.
Example prompt: Only show the 'company size' field when the visitor selects 'Business' as account type AND their country is not in our unsupported list.
Configure what happens after form submission
Describe the behavior you want after someone submits the form, and the AI sets it up.
- Confirmation messages.
Example prompt: After the booking form is submitted, show a thank-you message that confirms we'll reply within 24 hours.
- Email notifications.
Example prompt: Email me a copy of every submission, and send the visitor a confirmation email with their answers." You can also route notifications conditionally — example prompt: "If the inquiry is marked 'Urgent', also send a copy to support@mysite.com.
- Save and resume.
Example prompt: Let visitors save a long application form and come back to finish it later.
- Generate PDF documents.
Example prompt: Generate a PDF summary of each submitted order form and attach it to the confirmation email.
- Create WordPress user accounts.
Example prompt: When someone submits the membership signup form, create a WordPress user account for them.
- Privacy and spam protection.
Example prompt: Add a checkbox requiring visitors to agree to the privacy policy before submitting, and turn on spam protection.
Submitted entries, notification rules and spam settings can be reviewed afterwards in WordPress admin — see the separate article on managing forms and submissions from WordPress admin for that side of things.
Create payment forms with AI
Ask the AI to turn any form into a payment form, collecting money alongside the submitted information.
Example prompt: Turn my event registration form into a payment form: $25 general admission, $40 VIP, and show the total based on the ticket type selected.
You can also add payment to a form that already exists.
Example prompt: Add a $15 processing fee to the application form and collect payment with the submission.
Important:
A payment provider — Stripe, PayPal or another supported option — still needs to be connected once in WordPress admin before a payment form can take real payments, and you choose there whether it runs in test or live mode.
Payment forms currently support one-time charges only; recurring charges or subscriptions aren't supported yet.
Connect forms to external services with AI
Ask the AI to send submissions on to another tool you use.
Example prompts: Send every submission to a Google Sheet.
Post new inquiries to our #leads Slack channel.
Add anyone who submits the newsletter form to our Mailchimp audience.
For tools without a direct integration, ask the AI to send submissions through Zapier or a webhook instead.
For each integration AI chat will prompt you steps how to get the connector key, which you'll need to add in WordPress admin > Forms > Connections section
Important:
Each external service needs to be authorized once in WordPress admin, under Forms → Connections, before the AI chat can attach it to a form.
Edit forms after publishing
A published form isn't final — keep editing it the same way you created it.
- Open the website in the Agentic Website Builder.
- Open the AI chat and describe the change you want.
- Review the update on the page.
Example prompt: Add a 'referral source' dropdown to the contact form with options Google, Social Media, Friend and Other.
Important:
Fields, layout and styling stay in the AI chat even after a form is published — WordPress admin is for reviewing entries and configuring notifications, spam protection and connections, not for editing what the form looks like or asks.
Editing a form with Visual Editor
You can customize the appearance and layout of your forms directly in the 10Web Visual Editor manually.
Click on the form or the specific form element you want to customize. When you select a form or an individual element in the 10Web Visual Editor, a floating toolbar appears above it with additional editing options.
- Ask for quick changes: Describe how you want to modify the selected element using AI. For example, "Make the form background white, round the input fields, and increase the spacing between them."
- Add image: Add or replace the background image of your form.
- Link: Add or edit a link associated with the selected element.
- Code (</>): Access the selected element's code for more advanced customization.
- Delete (trash icon): Remove the selected element from the page.
At the same time you'll see left sidebar to adjust the selected element's appearance and layout. Depending on the selected element, you can modify the following settings:
- Link: Add or change a link associated with the selected element.
- Default and Hover: Switch between the element's normal and hover states to customize its appearance.
- Appearance: Adjust the selected section's opacity.
- Colors: Change the background color and its opacity.
- Spacing: Adjust margins and padding to control the space around and inside the selected element.
- Size: Set the element's width and height.
- Border radius: Change how rounded the element's corners appear.
- Stroke: Customize the border style, width, and color.
- Effects: Add or modify visual effects, such as shadows.
You can select individual form elements to adjust their styling separately, or select the parent form container to change the overall layout.
Editing a form with Code Editor
Code mode gives you direct access to the page's source file, for changes the Visual Editor's panel doesn't cover, such as an input's type, its validation, or a CSS class.
- Select the field on the page, as above.
- Click the
</>icon in the floating toolbar.
Code mode opens with the page's component file open in a tab, scrolled and highlighted to the exact block for the element you selected: the label, the input with its id, type, value, onChange handler and placeholder, and the markup that displays a validation error. You can edit this code directly, the same way you would in any code editor.
Important:
Code mode is intended for users who are comfortable editing code. Code changes can affect your website's layout, design or functionality, including the form's validation and submission logic.
Save and publish your changes
After a manual edit in either the Visual Editor or Code mode, click Save to store it in the editor, or Discard to cancel it. Saving is not the same as publishing: Save keeps the change inside the editor, while Publish pushes every saved, unpublished change on the website live, not just the page you were editing.
Changes made using the visual or code editor do not consume AI credits.
Manage your forms in WordPress Admin
Once a form exists, WordPress admin is where you review submitted entries, notification and confirmation settings, spam protection, payments and connected services for it. See the separate Help Center article on managing forms and submissions in WordPress admin for a full walkthrough of that screen.