AI Form Builder – Advanced Customization & Integration Guide

FormSubmit's AI Form Builder lets you generate complex HTML forms from natural language descriptions. But what if you need to go beyond the generated output? This guide covers advanced techniques: custom CSS styling, adding JavaScript validation, implementing conditional fields, and integrating the generated form into complex web applications.

Quick recap: generating a form with AI
On the FormSubmit homepage, enter your domain and email, then describe the form you need. For example:

Create a project request form with name, email, company, budget range (dropdown), timeline (radio: urgent, normal, flexible), and project description textarea.
Select a style, click “Generate”, and you'll receive a complete HTML code. Copy it and paste into your site. But that's just the start.

Customizing the generated CSS
The AI output includes inline styles or Tailwind classes. You can replace the entire block with your own CSS. For example, if you want your form to match your brand exactly, extract the field structure and apply your own stylesheet.</p> <!-- Keep the HTML structure, replace the style --> <style> .custom-form { max-width: 600px; margin: 0 auto; } .custom-form input, .custom-form textarea, .custom-form select { width: 100%; padding: 10px; margin: 8px 0; border: 1px solid #ccc; border-radius: 4px; } .custom-form button { background: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 4px; }

... form fields ...

Adding JavaScript validation
The generated HTML already includes required attributes for basic validation. For more complex rules (e.g., password confirmation, custom email domain, minimum/maximum values), you can attach a JavaScript event listener.

document.querySelector('form').addEventListener('submit', function(e) { let email = document.querySelector('input[name="email"]').value; if (!email.endsWith('@mycompany.com')) { alert('Please use your company email address.'); e.preventDefault(); } });

Implementing conditional fields (show/hide based on previous answers)
The AI doesn't generate conditional logic out of the box, but you can add it manually. For example, show a textarea only when a specific option is selected.

General
Technical support

document.getElementById('topic').addEventListener('change', function() {
const div = document.getElementById('technicalDetails');
div.style.display = this.value === 'technical' ? 'block' : 'none';
});

Integrating with external services using webhooks
Add a hidden _webhook field to send form data to your CRM, Slack, or custom endpoint. For example, to post to Slack:

When the form is submitted, FormSubmit will send a JSON payload to that URL in addition to email. This enables real‑time notifications and data integration.

Modifying the email subject and template
Use hidden fields to control the email you receive:

_subject – Custom subject line.
_replyto – Sets the “Reply-To” header (useful if you collect the user's email).
_template – Set to table for a nicer HTML email layout.


Redirect after submit – keeping users on your site
By default, the form shows a success page. To redirect to your own thank‑you page, add:

Using the AI builder with multi‑step forms
The AI generates single‑page forms. For multi‑step (wizard) forms, generate a single‑page form first, then split it into multiple steps using JavaScript. Many jQuery and vanilla JS libraries can help (e.g., step‑by‑step wizards). Ensure all fields eventually submit to the same FormSubmit endpoint.

Customizing the success message
If you don't redirect, the default success page is minimal. You can replace it by using the _next redirect to a custom page. That page can display any message you like and include a button to return to your site.

Handling file uploads (workaround)
FormSubmit doesn't support file uploads directly. Workaround: let users paste a link to their file (Google Drive, Dropbox) in a text field, or use a third‑party upload service that returns a URL, then include that URL as a hidden field.

Integrating with React/Vue/Angular
The generated HTML is plain, so you can use it directly inside a React component with dangerouslySetInnerHTML. Or, better, rebuild the form using your framework's components but keep the same field names and the same action URL. FormSubmit accepts standard form POSTs from any origin.

// React example

...

Testing your customized form
Always test thoroughly after modifications. Submit test entries and verify:

You receive the email (check spam).
Custom validation works.
Conditional fields show/hide correctly.
Redirects and webhooks fire.
Frequently asked questions about customization
❓ Can I change the form method to GET?
No, FormSubmit only accepts POST requests.

❓ How do I add a CAPTCHA?
You can manually add Google reCAPTCHA v2 or v3 to your form. The user's response token can be verified on your own server, or you can use a webhook to validate it (FormSubmit doesn't verify CAPTCHAs directly).

❓ Will my custom CSS be lost if I regenerate the form?
Yes. If you use the AI builder again, it will overwrite your changes. Always save a copy of your customized code outside the AI tool.

Ready to build advanced forms with FormSubmit?
The AI Form Builder gives you a powerful starting point, and with these customization techniques, you can build virtually any type of form – from simple contact forms to complex, interactive applications. Best of all, you still get zero‑data‑storage and instant email forwarding.