Forms on an HTML website. Connect a ready-made form to a message service and receive enquiries from your website.
An HTML template supplies a frontend. To receive enquiries, take bookings or handle accounts, choose and connect the required service. Then test the complete action, not only the button’s response.
Sample designs · replace the fictional content with your own.
AI ChatWorkflow example
Inspect what the form actually does
You
Does this form send an enquiry or only show a local message? Inspect its submission code before connecting a service.
AI · example response
I will inspect the handler and look for an actual receiving endpoint or provider. The inspected Clearstead example validates an email and resets the field locally; that is not message delivery.
You
Connect my chosen form service next. Keep the existing design and tell me what account setup is needed.
Steps to take
Choose the receiver
Use your email and a form service or a configured server endpoint.
Ask AI to connect it
Provide service documentation and approve any account configuration.
Verify receipt
Send a test from the published page and check the receiving destination.
Result to aim for: an enquiry reaches your chosen destination.
Illustrative workflow. No live AI connection.
01 / Follow the action
Does the form send, save or only show feedback?
A form in a template can be a local demonstration. In this Clearstead source, submitting only validates the email and resets the field; it sends nothing. To receive enquiries, ask your AI agent to connect a real form service or server endpoint, then verify receipt from the published page.
Visible interface
The layout can show how an enquiry might look.
Operational result
Receipt or stored data needs a configured destination and verification.
See the source files and technical details
The actual project files
14-clearstead · Current inspected ZIP
Current product download inspected on 2 October 2026. Files and remote resources belong to this named project; other templates differ.
The guide describes the original fictional page. Keep its role separate from the changes you want for your own business.
Produce one `index.html`, containing all page markup, an inline stylesheet and one inline vanilla-JavaScript IIFE placed after the dialog. Use English. No framework, package manager, build step, bundler, external JavaScript, backend or persisted state. The runtime is **network**: four external SVG images and the Google Fonts stylesheet/font files are required. Opening the HTML directly or serving it over a local HTTP server must support the same local interactions. Target current desktop and mobile Chromium with native `<dialog>`, `<details>`, CSS Grid, `min()`, `100svh` and `matchMedia().addEventListener()` support. Preserve every text, image URL, selector, dimension and behavior below. Keep the literal curly punctuation, en dashes and arrow glyphs.
What the submit handler actually does
14-clearstead/index.html · L147
It stops the default submit, checks the email, shows a local status and resets the form. This handler contains no delivery request. A received message still needs a configured service and a matching receipt check.
const form=document.getElementById('demo-form'),email=document.getElementById('demo-email'),status=document.getElementById('email-status');
form.addEventListener('submit',event=>{event.preventDefault();if(!email.validity.valid){status.textContent='Enter a valid email address to test this form.';email.setAttribute('aria-invalid','true');email.focus();return}email.removeAttribute('aria-invalid');status.textContent='Demo complete. Your address was not sent or saved.';form.reset()});email.addEventListener('input',()=>{email.removeAttribute('aria-invalid');status.textContent=''})
02 / Map requirements
Which functions need a separate service?
A contact form needs a receiving service; booking needs your calendar or booking provider; payments need a payment service; accounts and stored data need an application backend. For a first business website, linking to an existing booking or payment page can be simpler than building those systems.
Contact and booking
Choose the real recipient, calendar or booking destination and how errors are handled.
Payments and accounts
Arrange the application, data and payment service; the marketing frontend does not supply them.
Editable publishing
Choose a CMS when ongoing content needs structured editing or roles.
AI ChatWorkflow example
Connect the contact form
You
Make this contact form deliver enquiries to me. Use my chosen form service, add the required fields and keep credentials out of public HTML.
AI · example response
I will check whether the current form sends a request or only displays a local message. Then I will implement the selected service’s documented submission flow.
You
After publishing, send a clearly labelled test enquiry. I will confirm whether it arrived.
AI · example response
I will test submission and error states on the public URL. We will treat delivery as confirmed only after checking the receiving inbox or service.
Steps to take
Choose the receiver
Use your email and a form service or a configured server endpoint.
Ask AI to connect it
Provide service documentation and approve any account configuration.
Verify receipt
Send a test from the published page and check the receiving destination.
Result to aim for: an enquiry reaches your chosen destination.
Illustrative workflow. No live AI connection.
03 / Choose a destination
Where should the enquiry go?
Choose where enquiries should arrive: your inbox through a form service, a CRM or your own configured server. Give the agent the selected service’s documentation and required fields. Approve any account setup; private API credentials belong in the supported secure configuration, never in public HTML.
Checked locally on this device; nothing is submitted.
See the source files and technical details
If you choose Netlify Forms
https://docs.netlify.com/manage/forms/setup/
Its current guide requires enabled form detection, supported form markup and a deploy. The Clearstead handler stops normal submission, so the integration must deliberately replace that local-only behavior. Then verify receipt and failure handling.
Service setup → pending
Submission transport → pending
Matched receipt → pending
Invalid input / service failure / retry → pending
Show a sending state while the request runs. Show success only when the service confirms it accepted the enquiry, and keep the text if sending fails.
AI · example response
I will connect those states to the real service response, validate required fields and prevent accidental duplicate submission. A rejected request will show how to retry or contact you another way.
You
Test an empty required field and a failed request as well as a successful submission.
Steps to take
Validate the fields
Explain missing or invalid inputs without deleting the message.
Follow the service response
Connect sending, accepted and error states to the actual request.
Test the alternatives
Try success, invalid input and unavailable-service cases.
Result to aim for: the form tells the visitor what actually happened.
Illustrative workflow. No live AI connection.
04 / Submission behavior
What should change in the visitor experience?
The form needs a real request, useful validation and truthful loading, success and failure states. Show success only when the configured service confirms the relevant outcome.
01
Validate the input
Explain missing or invalid fields without losing the visitor’s entered text.
02
Handle failure
Show what happened and how to retry or use another contact route.
Try the isolated local form
Original English form and handler, isolated in a teaching wrapper. Nothing is sent or saved; this is not a configured enquiry service.Open full preview ↗
AI ChatWorkflow example
Verify a received enquiry
You
Send a clearly labelled test enquiry from the published website. I will check the receiving inbox or form service.
AI · example response
I will use the public form and check its response. We will confirm delivery separately in the receiving destination, not from the success message alone.
You
If it does not arrive, check the request, service notifications and spam folder before calling it ready.
Steps to take
Send from the public page
Use the actual visitor form with labelled test content.
Check the receiving destination
Verify the message in the inbox or service account.
Resolve any failure
Ask the agent to fix the connection and repeat the same test.
Result to aim for: an enquiry reaches your chosen destination.
Illustrative workflow. No live AI connection.
05 / Verify receipt
What counts as a working enquiry form?
Send a labelled test enquiry from the public website and confirm it reached the intended inbox or service. Also try an invalid email and a submission error. If the page shows success but no enquiry arrives, ask the agent to check the request and receiving service before launching.
Checked locally on this device; nothing is submitted.
06 / Choose the frontend
When is a template still a suitable starting point?
When its presentation fits and you can arrange the required live services. Compare these frontend structures; their fictional forms, booking and app stories do not provide those services.
Clearstead
A fictional cash-flow workspace frontend with a local email-form specimen; no finance account or enquiry service is connected.
Current download inspected on 2 October 2026. Confirm the selected files on the product page.
index.html
RECREATE.md
assets/index.webp
assets/terra.webp
assets/vesper.webp
Some resources may load from external URLs. Review the selected project before publishing.
Sample designs · replace the fictional content with your own.
07 / Plan the whole site
What should I decide next?
Choose the system for your visitor action before finalizing the design. Use technical help when the integration and verification are outside what you can confidently handle.
OneDollarStock is implementing a project to prepare the platform for entry into the German market under the “Go Global” acceleration track of the “Unicorn Hub Startup Booster” programme, project no. FENG.02.28-IP.02-0013/23. The project is co-financed by the European Funds for Smart Economy 2021–2027 under the priority “Innovation-friendly environment”, Measure FENG.2.28 Startup Booster Poland.
Learn more about the project →
