Staring at a blank AI chat box, wondering how to ask for exactly the contact form you need? You’re not alone. The difference between getting a basic form that needs hours of tweaking and a polished form ready to deploy often comes down to how you phrase your request.

The key is being specific about what you want while giving the AI room to handle the technical details. Too vague, and you’ll get something generic. Too prescriptive, and you might overcomplicate things. Finding that sweet spot usually takes a lot of practice. And starting with the right examples can help.

Whether you need a simple inquiry form or something more sophisticated with conditional fields and multi-step workflows, the prompts below will help you communicate your vision clearly and get better results on the first try.

Here are several example prompts for generating website contact forms, ranging from basic to complex:

Basic Contact Form Prompts

Most of the time you’ll probably be creating a basic contact form. Basic contact forms will usually contain a field for the user’s name, another for their email address, and one more for their message.

Here are a few prompts that should get you started.

Simple Contact Form

Create a basic HTML contact form with CSS styling that includes fields for name, email, subject, and message. Use scoped CSS that won't affect the parent page. Make it clean and professional with proper form validation attributes.

Here’s a screenshot of the form ChatGPT generated when I entered this prompt:

Google AI Studio (Gemini Pro) generated a similar looking form, embedded inside an HTML page. ChatGPT only provided the form code and the associated styles. If you don’t want the outer page, you can stipulate this in your prompt.

Accessible Contact Form

Build an accessible HTML contact form with name, email, phone, and message fields. Include proper labels, ARIA attributes, and focus indicators. Style it with CSS using a neutral color scheme. Ensure all styles are self-contained and won't leak to the parent page.

This example explicitly states that the form should be accessible and specifies that it should include ARIA labels, etc. It also includes a phone field.

We should always strive to make our websites as accessible as possible, and so you might want to include such language in your prompts.

Responsive Contact Form

Create a mobile-responsive contact form in HTML/CSS with fields for first name, last name, email, company, and inquiry type (dropdown). Make it stack vertically on mobile and use a two-column layout on desktop. Include hover effects and smooth transitions. Use scoped CSS that won't affect the parent page.

We should also ensure that our forms are usable across all devices, and so if you find that AI doesn’t automatically cater for this, you’ll want to explicitly ask for it, like with this example. This will be more of an issue on more complex forms with lots of fields, but if it’s a simple form, you may not need to. At least it’s something to think about.

More Complex Forms

The above forms are relatively basic, and so our prompts reflect that. If you want a more complex form, you’ll need to provide more detail. You’ll also need to be quite explicit about how you want it designed.

Multi-Step Contact Form

Design a mobile-responsive multi-step HTML contact form that collects: 
Step 1 - Personal info (name, email, phone), 
Step 2 - Project details (budget range, timeline, project type), 
Step 3 - Additional requirements (message, file upload placeholder). 
Include a progress indicator and next/previous buttons. Use scoped CSS that won't affect the parent page.
Include proper form validation attributes. 
Make it accessible by including proper labels, ARIA attributes, and focus indicators.

ChatGPT produced the following form based on that prompt:

In this case ChatGPT embedded the form inside an HTML page. So again, if you don’t want that, you can either stipulate this, or you can simply remove the HTML tags from the resulting code.

Contact Form with Conditional Fields

Create a contact form that shows different fields based on user selection. Include a "Contact Reason" dropdown with options like "General Inquiry", "Support", "Sales". Show additional relevant fields based on selection (e.g., order number for support, company size for sales). 
Use scoped CSS that won't affect the parent page.
Include proper form validation attributes. 
Make it accessible by including proper labels, ARIA attributes, and focus indicators.

When I ran that, ChatGPT produced a working result that included JavaScript for the interactive part.

Taking Another Approach with a Context Based Prompt

In the above examples I was pretty explicit about the technical aspects of the desired form. This allowed me to steer the AI into a form that had certain aspects that I required.

Another approach is to broaden the prompt with more about the context, and less about the technical details. When we do this, we allow the AI to make more decisions.

For example:

I'm an owner of an Italian restaurant. Provide a contact form that I can use on my website. Customers should also be able to make booking reservations, but this is optional. Make it simple and aesthetically pleasing. Make sure disabled people can use it. And make sure it works and displays properly on mobile phones.

This prompt generated the following form in ChatGPT:

Tips for Better Prompts

When crafting prompts for contact forms, consider including:

• Specific field requirements (what information to collect)
• Styling preferences (color schemes, modern/classic, minimalist/detailed)
• Responsive behavior (mobile-first, breakpoint specifications)
• Accessibility needs (screen reader support, keyboard navigation)
• Validation requirements (client-side validation, error handling)
• Interaction details (hover effects, focus states, animations)
• Scope limitations (self-contained CSS, no external dependencies)

The key is being specific about functionality while leaving room for the AI to make good design decisions within your constraints.

That said, the last example shows that AI can be pretty good at generating a decent form based on a more general prompt. In this case, we provided a lot of context, so the AI was able to determine a suitable course of action for the context.

The Model Matters

All of the examples on this page were generated using the free LLMs that were current at the time of writing. When using a more advanced model, you might find that it preempts things like accessibility, responsiveness, etc, so that you don’t need to include these in your prompt.

Keep Iterating

We don’t always get the perfect result with our first prompt. Sometimes we need to refine our request with further prompts. We don’t have to start again. We can simply provide another prompt that refines the request provided in the previous prompt/s. For example, if the code that AI generates isn’t mobile-friendly, we can follow up with something like, “do it again, but make it mobile-responsive” or “I wanted it mobile friendly”.

Anyway, hopefully the above AI prompts have given you something to work with. And maybe you can refine them so that they work even better!