DEV Community

loading...

Survey Form for Free Code Camp Responsive Web Design Certificate

mariel
Dev. I love dogs, cookies, and learning new things.
Originally published at marieldotcode.com ・4 min read

Survey Form for Free Code Camp Responsive Web Design Certificate

The survey form project had 16 user stories and required that we utilize pretty much everything we’d learned about forms:

  • Creating fields for name, email, and a number

  • Utilizing HTML5 validation errors

  • Placeholder text

  • A dropdown menu

  • Textarea for additional comments

  • Submit button

I think this project is one of the ones I’m most proud of so far. It sizes properly on mobile, it utilizes my favorite colors, and I tried things I hadn’t before with results I’m happy with.

I often use dogs in my projects, either as part of the design, or as dummy users when I’m testing databases and log-in functionality (my dog’s username is Waffles, his email is Waffles@dogmail.com and obviously I can’t tell you his password). Dogs are fun, bring people joy, and are excellent inspiration.

This is my dog, Waffles. The little gray box on his collar is actually a GPS via a company called Whistle, because if he ever got lost I would be DEVASTATED.

For comparison, this is my first attempt, about a year before the one above.

The title gets closer to actually being on the form if you narrow the window. Alas, this is what happens full screen.

Background

In my final attempt, I started by deciding what I wanted to do with the background. In my first attempt, the background was actually cute wallpaper with brightly colored paw prints, but then I learned the hard way about hotlinking. Oops. So, I changed the color to pink (my favorite color, though not this shade).

I love vibrant colors, so I wanted something bright, but I really wanted to try using a photo the right way. In a tutorial I’d done recently, I learned about Unsplash, which is a library of photos that are free to use. I searched for photos of dogs, thinking maybe I’d find a large one that I could put a form on top of, or another photo I could use in the form somehow. This result popped up and I fell in love.

First, the pink color is LOVELY. Bold and bright and fun. The use and love of vibrant colors is part of my heritage as a Mexican-American, and I have started trying to incorporate them in my work.

analuisa-gamboa-lNZ5gcIIZxo-unsplash.jpg

christy-ash-evHJRn7UZyw-unsplash.jpg

roberto-carlos-roman-76S5ARKc93c-unsplash.jpg

Aside from the color, I liked that the photo was long and narrow, much like a form. I thought maybe the pink space would be enough for me to put my entire form, with the dogs at the bottom.

Because the photo came from Unsplash (rather than a site that definitely did not intend for its photos to be shared or used this way), I simply used CSS to set the background image for the form.

Fonts

Part of the fun of learning how to build things is learning how to make them pretty. One of the most basic changes is font. Instead of being limited to Times New Roman (or whatever the default is if you’re using a ui-library), utilizing something like Google Fonts is an easy way to make your text more visually appealing and have it better reflect the intent of your design.

I used a sans serif font for the form itself, but kept a serif font for the title and subtitle. All it took was a couple of lines in the head tag and specifying the font name in the CSS file.

Using Google Fonts in the HTML File:

Specifying the font name in CSS:

The Form Itself

I had two main issues with this form. First, when I resized for mobile the text would bleed well past the photo I wanted to use for the background. Then, when I tried to fix that, I couldn’t get the form to be legible because the end of it sat on top of the dogs, instead of it all being on the plan pink background.

The solution ended up being creating a form container, setting the background color to the exact shade in the photo, and setting the transparency so the dogs were still visible instead of being strangely cut off at the top.

You can still see the beautiful doggos under the form, instead of only seeing doggo legs.

To get the proper shade of pink, I ended up adding a Chrome extension called Eye Dropper. With that, all I needed to do was click on the color I wanted and set that color to the background of the form container.

The End

It’s “just” a survey form, but I am still really proud of it. Getting this right required a lot of googling, a lot of trial and error, and a lot of things being where they shouldn’t. Every one of us starts with “just” something, and this is mine.

Discussion (1)

Collapse
djpandab profile image
Stephen Smith

Inspiring read. Thanks!