Dear Developers, Forms and Avoiding Backend Mysteries

Welcome to Dear Developer’s entry seven. It’s the dawn of summer in London, providing bundles of vitamin D and some once in a blue moon smiling faces. Including my own. And what better to whack a smile on your face on top of the sunny weather than a little HTML hack? That's what I thought.

If you've been following this series, you'll know I’ve been working towards building my first website. Last time, you saw a preview of my homepage and all the code behind it. It was all about getting accustomed to HTML layout and growing more comfortable with divs, classes and unique IDs. There were a couple of bits and bobs I diverged from, so this time I'm revisiting an element which is slightly more technical. Forms.

Forms generally act as an interactive dialogue which retrieves information from the user. That information can be anything from an email address to credit card details. It’s something we’re all familiar with seeing on the day to day, I’m talking sign up forms, login forms and payment forms. Which all factor in a range of different elements as well such as text fields, drop down menus, check boxes etc.

For my own website, I’d like to add one form to my homepage which acts as a way for visitors to get in touch with me, should they want to. The second will sit on my blog, which will act as a way for users to sign up to my newsletter. Again, should they want to. In this post I'll be establishing the components you need to write form syntax and also how to code forms without a need for backend management.

Form syntax is made up of two main elements, <form> and <input>. The <form> element opens the syntax and closes it, wrapping the <input> tags within it.

Like so:

However, this is a little bare. Both the <form> element and the <input> element are then paired with a range of attributes.

For the <form> element, these include action, method, enctype and target. The two essentials to know are action and method, before I go any further here’s the low-down on what each of them controls.

Form element attributes

Action

This attribute defines the action which will be performed when the form is submitted. Normally, when the user hits submit this is sent to a web page on the server. If the action button is omitted, the action carried out is set to the current page.

Beginning to understand servers is backend territory that frankly makes my brain want to melt and wither away like maths did in secondary school. However, thanks to the wonderful number of incredibly useful services that are around today, it’s not something you and I need to grasp just yet. Thanks to a little site known as Formspree.

Formspree gives us an easy way out with forms and has created a way to create functional HTML forms for static sites (sites made up of HTML and CSS). Whatever your form might be for, you can simply send the data to their URL and they'll forward it to your email. No Javascript, no PHP, no nothing!

To set it up simply follow these steps:

1. Setup the HTML form
   Change your form's action attribute to this link https://formspree.io/your@email.com replacing ‘your@email.com’ with your own email.
2. Add a name attribute to every field
   Ensure all <input>, <select> and <text> elements inside your form have a name attribute, otherwise you will not receive the data filled in these fields.
3. Submit the form and confirm your email address
   Go to your website and submit the form once. Formspree will then send you an email asking to confirm your email address. (If you display the same form in multiple URLs of your site you'll have to confirm it multiple times.)
4. All set, receive emails
   From now on, when someone submits that form, Formspree will forward you the data as email.

Method

This attribute determines which method should be used to upload the data and most commonly has the values of GET and POST. How do you determine between GET and POST?

• GET is a forms default setting and means that all the data submitted will be accessible in the page address field where you actioned your data. Only to be used for non-sensitive information.
• POST is to be used for all sensitive data, it’s a more secure way to receive personal information from users. The <POST> method does not display the submitted form data in the page address field.

Input element attributes

The second component needed to complete form syntax is the <input> element, using this allows you to add multiple input fields. There's no limit, just add a new input element underneath an other. Go crazy. These fields can be displayed in several ways due to its varied attributes: type, name, value, size, and of course, max length.

Here’s how they function:

• Type: Indicates what kind of data this field will hold for input control. So for example, ‘text’ would represent free text. For example for password input control the password.
• Name: This gives your input tags individual titles which will then be sent to the server to be recognized and get the value. (The value can be anything you like.)
• Value: With this attribute you can add some text which will appear in the text field for users to see.
• Size: Allows you to specify the width of the input box in terms of characters
• Max-length: Restrict the number of characters users can input into the text field

For example:

Will appear:

Which doesn't look all too appealing, so with some of the basic formatting we've learned over the last few weeks we can change all of that. Using the below CSS, I've transformed the above unhealthy looking form, into one that is on brand with the rest of my website. It's the small things you have to change to make sure they belong there. Here are the links if you need to refresh on making changes to fonts and colours or padding and margins.

With the above code, my form has now morphed into the much more visually aesthetic form below. Voila.

For those of you on this journey with me, I hope this article was helpful! Follow me on Twitter for updates on the next post, or just to ask me a question.