HTML with JavaScript contact form

July 08, 2023

Link to the form:

This is created to be basic test for an AWS contact form test. The full form when filled out will send an email through AWS to the site owner. Instead of creating the normal test form I try to create something that would look like it would be used for a real site. I’ve found this helps those that are not technical to better relate to the project.

For this contact form I went with the idea of a new and used toy and record store. Added the basic contact form questions that are needed, name, email, phone, message area; then added a few more that would be specific to a toy/vinyl store. These are help add extra items like date pickers and check boxes.

I created it with the normal 3 files: HTML, JavaScript and CSS, I’ve merged them into the one HTML file for the sample to keep it all in one. Using the normal 3 parts in the explanation.

The HTML:   

Created it to be fully responsive, so it would show in Desktop down to mobile without side to side scrolling.

For the menu I’ve created a ‘nav’ are and passed in the menu items and link areas.

Then the form, added the form elements and giving them back end info such as: ‘id’, ‘name’

Used an autofocus for the name to have it ready for when somebody lands on the page they can start typing; so many forms you click the link then you must click in the first text box to start filling it out, I set it up to save the visitor just that little bit of time. I didn’t add tab order since the browsers where able to read in the right order. Left to right; top to bottom.

I added some pattern verifications, where possible and with the HTML 5 form validations this saves on JavaScript calls.

At bottom of the form created a spot to display results back from server, may not get used for final version.


There’s a lot going on I’ll just go over the basics, they are broken down by section in the CSS itself. Such as the whole HTML with font (size, color, etc)

The menu to display the items from ‘nav’ into a horizontal strip and add the background color and animation of the hover.

Form:  background boxes and sizes.

Logo: Size centering


Not much JavaScript needed for this, with the validation of forms in HTML 5 most of that is taken care of for me. I didn’t care for how it did the email and phone and wanted to make it a bit more precise. Used Regular expressions to check against these and return an error and send for that area with a note on how to fill it out.

Related Articles

Website Contact form using AWS

Website Contact form using AWS

For the next iteration of the HTML form was to set it up to send an email to the web owner using AWS. The purpose behind this is, if you have a HTML site and don’t want to purchase a monthly plan or build and maintain server software. Using AWS for this functionality...

read more
Save Illustrator for SVG to use in HTML page

Save Illustrator for SVG to use in HTML page

When working with the AWS contact form, I had created a graphic in Illustrator. You can see the post here. With this test form I wanted to have everything in one HTML file this way it’s just one file to upload and update when needed without making sure the other files...

read more
To create a child theme in WordPress

To create a child theme in WordPress

This write-up is to cover the very basics needed to have a child theme for testing, not instructions to create a full child theme for selling or white labeling for a client.You can get more in-depth information...

read more

Pin It on Pinterest

Share This