HTML form builder: create accessible markup

<form method="post" aria-labelledby="inquiry-title">
  <h2 id="inquiry-title">Example inquiry</h2>
  <p><label for="inquiry-name">Name (required)</label>
    <input id="inquiry-name" name="name" type="text" required></p>
  <p><label for="inquiry-email">Email (required)</label>
    <input id="inquiry-email" name="email" type="email" required></p>
  <p>Delivery is not connected. Add your HTTPS submission endpoint.</p>
  <button type="submit" disabled>Send inquiry</button>
</form>

What the HTML form builder exports

The output uses a form with the POST method, visible labels and stable field identifiers. Each field has a machine-safe name. Radio choices use a fieldset and legend so the related options have a shared description.

Use the field label to explain what the user should enter. The name names the value to the receiving system. A label such as “Email” can use the name email; two distinct fields should not silently share the same name.

The builder reports a collision rather than changing a duplicate name behind your back. Correct the name and apply the field again. Optional help text is linked to its field with aria-describedby, following the association described in the W3C forms tutorial.

Connect a submission endpoint

With no endpoint, the exported submit button stays disabled and the template explains that delivery is not connected. An HTML file is not a mail service. It needs a receiving system that accepts the submitted field names and handles the response.

You can enter an explicit HTTPS endpoint for your own receiving service. The builder rejects other schemes. This checks the URL format. It does not prove that the endpoint works or belongs to you. Check its privacy and data rules separately.

The preview remains unable to submit even when the exported form contains an endpoint. Use your receiving service's supported test process after installing the output. See MDN's form reference for the distinction between form structure, method and action.

Accessible fields and validation

Choose the field type for the details needed. An email input gives browser-level email syntax checking. A telephone input does not prove that a number is real. A required checkbox asks for that individual choice; it is not a general multi-choice group rule.

For select and radio fields, supply distinct choices. For a number field, leave unknown limits blank. A blank minimum is distinct from a minimum of zero. The builder checks that a supplied minimum does not exceed the maximum and that a numeric step is positive.

Keep required fields short. A small inquiry form may need just a reply address and question. A name or category can be optional if staff do not need it. Clear error text and a visible label remain useful even when the receiving service also validates the submission.

Save, clear, copy and download in the HTML form builder

“Save definition on this browser” saves the field definition locally. It does not save answers entered into the preview. Use “Clear saved data” to remove that saved definition while keeping the current work open. Reset replaces the current work with the labelled example after confirmation.

The HTML source can be edited directly. Those edits are copied or downloaded as text and are not executed in the preview. Applying a field change regenerates the source from the definition, replacing direct source edits. Keep a copy first if you need those changes.

If clipboard access is unavailable, the builder selects the source for manual copying. A download request produces a UTF-8 HTML file through your browser. The status reports that a download was requested, without pretending to verify where your browser saved it.

Privacy, spam and hosting limits

Do not put passwords, API keys or payment card fields in this tool. The saved definition and generated source are readable data. They are not a secret store. The privacy policy explains the local storage and clearing behavior.

The receiving server still needs validation, spam controls and a suitable retention process. A visible required field can be bypassed by a direct request. Browser checks improve the user's experience; they do not secure a backend.

When to use a hosted form builder

Choose a managed service if you need stored replies, uploads or payments. It can also suit complex rules when you do not want to build the receiving system. Compare those responsibilities in the form builder guide. Export stays available here without an account or an email signup.

Continue with the right task

• is jotform free
• website widgets