Dear Developers, Forms and Avoiding Backend Mysteries

Posted 1 month 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:[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

Designing for social good through volunteering opportunities and pro-bono work can be really rewarding. However, it isn’t always straight forward – before jumping in, it’s a good idea to get an understanding of the challenges involved with doing design work to help charities and non-profits. To help out, we spoke to a few people who have first-hand experience in the… Read More →

Designing for a cause is celebrated at Marvel and recently we’ve been seeing inspiring stories emerge one after the other about sharing knowledge and empowering others. Last week on Twitter, Pablo Stanley’s design workshop for children was circulating the masses and we were overwhelmed to see that Marvel was playing a part in the lesson! Happy as Larry, we grabbed… Read More →

Since we launched Marvel in 2013, there have been so many amazing stories of how it’s being used out there in the ether. Marvel was created with the vision of democratising design, enabling creatives who perhaps hadn’t given themselves a chance and the professionals alike to create high fidelity, interactive digital mockups. But the impact it’s had with the younger… Read More →