---
name: html-form-builder-with-validation
description: "Generate an HTML form with built-in JavaScript validation. Use when the user wants help with HTML Form Builder with Validation. Related topics: html, javascript, coding."
---

# HTML Form Builder with Validation

Generate an HTML form with built-in JavaScript validation.

## How to use this skill

1. Ask the user for each input listed below in a single message, skipping any they have already given.
2. Where options are listed, offer them, but accept other answers too.
3. Fill the answers into the prompt template, then follow the completed prompt to produce the result.

## Inputs

- **Form Purpose** (choose one: Contact Us, User Registration, Checkout, Survey)
- **List the fields needed** (longer free text)
- **Framework for styling** (choose one: Plain CSS, Tailwind CSS, Bootstrap)
- **Validation required** (choose any: Required fields, Email format, Password strength, Phone regex)
- **How should errors be displayed?** (choose one: Native browser tooltips, Custom inline error text, Alert box)

## Prompt template

## Introduction
Create a semantic HTML form with client-side validation logic.

## Form Details
- Form Purpose: {{Form Purpose}}
- List the fields needed: {{List the fields needed}}

## Validation & Styling
- Framework for styling: {{Framework for styling}}
- Validation required: {{Validation required}}
- How should errors be displayed?: {{How should errors be displayed?}}

---
**Goal**: Output the HTML structure and the accompanying JavaScript for validation.

---

Source: [HTML Form Builder with Validation on PromptBuild](https://promptbuild.io/prompt/BKVGw8AKjotrbHMBvFhc/html-form-builder-with-validation)