Last week we pasted the code from 7 online HTML form generators into a blank page, and none of the forms delivered a message. So we wrote a small generator of our own to see what it takes to get the output right. It's one HTML file, about 205 lines with the CSS, and no framework or build step. The full file is at the end of this post.

You edit a list of fields on the left, and the preview and the code on the right change as you type. The code it gives you posts to a real endpoint, gives every field a label and a name , has a honeypot for bots, and only says thank you when the server confirms it stored the message.

Start from a list of fields

Everything comes from one array. The UI edits it, and the generator reads it.

let fields = [ { label : " Name " , type : " text " , required : true }, { label : " Email " , type : " email " , required : true }, { label : " Message " , type : " textarea " , required : true }, ];

Enter fullscreen mode

Exit fullscreen mode

We kept name out of this object on purpose.…