Dear Developers, Forms and Avoiding Backend Mysteries

Posted 3 months ago by Naomi Francis

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/[email protected] replacing ‘[email protected]’ 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

Nowadays, more and more product teams are adopting Agile processes to manage projects and create more user-centric products. As a result, we’ve seen a bunch of new jargon pop up alongside the various design methodologies that emerged to help teams bring design to Agile development. “From Design Sprints to Agile UX, this is my attempt at breaking down industry jargon… Read More →

Between 2012 and 2017, we’ve seen the biggest tech companies in the world hire thousands of designers to push the value of design through their organisations. For example, IBM has gone from just 1 designer to every 72 engineers, to a ratio of 1 in 8. Intercom lead the way in terms of numbers, with 1 designer to every 5… Read More →

As individuals, and as designers, we are all looking for those special qualities in our jobs. It can sometimes be overwhelming stepping into the job market. We question: Will the role be challenging enough? What can I expect to work on? How do my own values match to that of the business? After a while the answers just become guess… Read More →