how-to-build-a-killer-web-form
Design - CSS

How To Design A Killer Web Form And Win $7,500 While Doing It!

Today I’m going to show you the easiest way to design a killer web form, and while we’re at it, maybe win $7,500 or a host of other prizes.

In the past you were stuck with basic web forms provided by online template repositories or the templates that come with your web form service provider. To get anything custom done, you needed a decent amount of technical knowledge, specifically CSS.

Now, thanks to JotForm’s new Form Designer, you can build a highly customized, beautiful web form in minutes (literally).

Check out this simple, yet clean web form I made in less than 2 minutes (It took longer to take the screenshot and crop it, than it did to design the form):

Jot Form Form Designer Example 1

This is a very basic design compared to what the Form Designer can do. You start out with a basic black on white form and you just click through a list of options, styling each part of the form to your liking. You can see the changes take place in real time on your web form, all in your browser.

To me the best part is the one-click option to make your form responsive. You can even preview how your form will look on a smartphone in both landscape and portrait, a tablet in landscape and portrait, and a desktop. This is really cool and a great time saver.

Once you’re done styling your form using the preset options, you can easily make custom CSS changes. This feature is pretty powerful, since you simply click on your form in the browser on the element you would like to select for CSS customization, and Form Designer provides the correct CSS selector. You simply add the declarations you would like. Very easy.

My design above was very simple, just to show you how quickly you can make a decent looking form. Check out some of these examples of awesome forms that show the real power of Form Designer:

Jot Form Sample Form Design 2

Jot Form Sample Form Design 3

Jot Form Sample Form Design 4

Now, what about that $7,500?

Here’s the part you’re looking for. Today (Nov 4) marks the beginning of JotForm’s Web Form Design Awards Competition. From Nov. 4th, 2014 to December 4th, 2014, JotForm is holding a Web Form Design Competition that is open to all contestants from anywhere in the world.

The Grand Prize: $7,500!

There will also be six $500 prizes for:

  • Best Mobile Form Design Award
  • Best Survey Design Award
  • Best Contact Form Design Award
  • Best E-Commerce Form Design Award
  • Worst Form Design Award
  • User’s Choice Award

Also, the first 100 complete submissions will receive a free t-shirt. To enter the competition, just visit the JotForm Web Design Awards Competition page and click the Sign Up link.

If you do enter, post a link to your entry below in the comments so we can check it out!

About the author

Chris Alexander is the founder of Syntaxxx.com. He is an entreprenuer, web developer, father and husband. Follow Chris on Twitter @SyntaxxxBlog

Share this post

Leave a Comment

Subscribe To Our Newsletter