📹 New! Remote User Testing - Get video + voice feedback on designs and prototypes
Read more
Web Design

Dear Developers, Forms and Avoiding Backend Mysteries

Posted 6 years ago by Naomi Francis
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?

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:

For example:

Will appear:

screen-shot-2017-06-13-at-11-41-55



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.

screen-shot-2017-06-06-at-12-58-48



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.

Writing for Marvel. Writing for fun. Eating everywhere, all the time.

Related Posts

My head has been wrapping itself around boxes. Organising them, resizing them and generally just being made aware that they exist. If you haven’t already guessed it, this next post in my Dear Developer series of learning HTML and CSS is of course about the Box Model. Not, in fact, figurative boxes. After a long holiday in the Caribbean and… Read More →

I was born in the age where people still wrote on paper for their school homework and back then I was obsessed with handwriting. Honestly, it was kind of a problem and I might have looked fairly psycho to anyone who flicked through a notebook of mine as I’d test a new one out every two weeks. Computers stole this… Read More →

Here we are, entry three of the ‘Dear Developers’ series and so far I’ve explained why I’m learning to code, asked my stupid questions and have done the first basic few lines of code which are building the first page of my website. I’ve been excited this week – not just because my website is currently looking as bland as… Read More →

Categories