Web forms appear everywhere online: forms allow users to order books, sign up for websites, and post to Facebook. This project challenged me to build a responsive, mobile-first registration form using a variety of HTML form elements.
In this project, I built a responsive, mobile-friendly registration form using a wide variety of HTML form input types and attributes. Using the supplied mockup files, I built a mobile and desktop version of the form using media queries, and a "mobile-first" approach.
Built the layout using a mobile first design, making sure the HTML file includes the viewport meta tag in the head of the document.
Created the form structure using one form tag to contain all the form elements. Also add a fieldset and legend for the "Contact Information" and "Newsletter" section of the page.
Included the following form field types: text input, email input, telephone input, select menu, checkboxes, radio buttons, textarea, submit button.
Input form fields included 'id', 'type' and 'name' attributes, whilst select and textarea included 'id' and 'name' attributes.
Added labels to each form element using the HTML label tag. Making sure to properly pair each label element with its corresponding form control via the for attribute.
Used the input field's placeholder attribute to add the text "required" to the Full Name field and the Email address field.
Took a mobile-first approach by using the min-width media query to add a breakpoint to adjust the layout for wider tablet and desktop screens.
Breakpoints matched both the mockups, so that text sits above form fields on mobile but to the left on desktop.
Used the Google Font "Merriweather" font for the text.
Added :focus states to the form for when a user clicks or tabs into a text field.
Make sure to check your code is valid by running it through an HTML and CSS validator.
Added additional placeholder text for other text fields.
Used the required attribute to add HTML5 validation to make sure that required fields are filled out and input is formatted correctly.
Added the following additional styling enhancements to the form, including changing the background color for one of the main sections of the site, and using CSS transitions for focus states.
Used CSS transition effects for highlighting the look of the form fields, e.g. making a background color fade into view when the user clicks on a text field, and fade out when the user clicks or tabs out of the field.
I'm always open to hearing about freelance product design and development projects (or if you just want to say hi!)