Top 5 Web Form Design Best Practices

You probably know by now that the powerful new GetResponse Form Builder can work wonders for your business. This robust solution is not only a cutting-edge web form generator, but also can help with your list segmentation and subscription metrics.




One of the most frequently asked questions you sent in before the launch of Form Builder was: will I be able to design customized, eye-candy forms to grab the attention of my audience?


Our answer is: yes, that’s not only possible now, but easy to do. And today, I’d like to give you a BIG head start. With the assistance of my talented graphic design colleagues, we’ve put together the Top 5 Web Form Design best practices.


Are you concerned that your web form might be a little passé? Check out our recommendations and your sign up forms will be up to date with all the modern design trends!


Clean and simple rule

  • Avoid any extra and unnecessary sections in the web form layout. Focus on the essentials only.
  • Eliminate chaos. All elements must be symmetrical and spaced in perfect harmony.
  • Let your web form breathe. It’s the white space that’s responsible for the ”light” look and the clarity of content.


 

 

Fonts – sturdy and legible

  • The minimum font size should be no less than 11 pixels;
  • Put the most essential information in bold type;
  • Font color must stand out in contrast to its background.


 

 

Use large buttons for clear and colorful calls to action

  • 2-3 words per button should be the absolute maximum;
  • Choose the CTA button colors wisely (remember that red color warns users, green – encourages)
  • Utilize large fonts on buttons only. They should always outsize the fonts of input labels.


 

 

Color scheme – lively and eye-catching, yet warm and friendly

  • Align your colors with your brand logo and color scheme;
  • Avoid extremely loud and vivid colours;
  • Balance the total number of color tones. 5 is plenty, 10 is too much for one sign up form.


 

 

Employ pictures and graphics corresponding to your industry

  • One picture can speak a thousand words, so be thoughtful;
  • Choose only high-quality, neat-looking graphics;
  • Ensure that you are not violating copyrights by pasting the graphic to your sign up form.




These quick and easy recommendations from our design experts are just the tip of the iceberg when it comes to web form design.

However, you can rest assured they are all up-to-date and should be a great starter for those of you determined to beautify their web forms.


Finally, we’d like to offer a free critique of any forms you’ve created using the new GetResponse Form Generator. Please just post the links to your sign up forms in the blog Comments and we’ll send you your critique in a timely fashion.


As always, if you have any questions, I’m here with the Design Team to help you out!


Maciej is an Email Solutions Specialist for GetResponse, focused on optimizing email deliverability, improving conversion rates, and increasing email marketing ROI for our customers.

  • http://www.cascadecrestcabinets.info/ Fred Thompson
  • Maciej Ossowski

    @Fred: Thanks for sharing your sign up for with us.

    The first thing that I would optimize in your web form is its width. Since the “name” and “email” labels are short, I think that you can easily make the whole sign up form narrower. That should improve its overall layout and add more proportion.

    Speaking of sizes, I would also recommend enlarging the “Inquire Now!” button and font sizes in order to make them more visible and encouraging to sign up.

    I really like the color scheme you have chosen, yet I would reconsider the selection of the picture in the top section of the form. IMHO, we could pick up an image that would be more enticing to subscribe and related to the call to action.

    I hope you find this piece of advice helpful.

  • http://gvohotconference.com Octa Rendra

    I try to create one, but keeps loading in this steps: http://www.getresponse.com/webform_generator.html?wid=new&step=wyswig#wyswig

    any idea?

  • Razvan

    First..

    if you want that you’re visitors put it white on a black background and there you get it. Nobody will read.

    Second…

    The text on the buttons can be more then 3 words. You’d better write on the damn button: Click here to download for free this 197$ report. IT CONVERTS BETTER.

    Third…

    Do not use pictures because they look better or if they are related to your industry. It does not convert. But use pictures with what are you offering for free. It also converts better.

    Forth…

    Please do not ask for the name at first. Youre only objective with a visitor is to have a channel of comunication with him. And tha’s his email. Not his name. You can find out his name later… but first … please do not ask for his name. IT CONVERTS BETTER

  • http://www,jeanchai.com jean Chai

    Hi!

    I just signed up your getresponse account and was trying to test the newsletter feature by merely added my own email address as the recipient. However, there was this message popped up saying not enough recipients to send an newsletter. What does that mean? How many recipients we need to have to consider “enough” for an newsletter to be sent?

  • Karolina Stefanowicz

    @ Jean, you need one subscriber to send a newsletter. Have you confirmed your subscription though? If not, this might be the cause.

  • Karolina Stefanowicz

    @Octa – we can’t see the web form as you’ve inserted the wrong link – it links to the editor and not to the actual web form. Can you pls try again? Thanks.

  • http://www.FastActionTraining.com John

    The form is already located on my website and is functioning pretty well but any insight is appreciated. http://www.FastActionTraining.com

    Thanks!

  • http://www.getresponse.com Simon Grabowski

    @John, nice looking web form! Fits your website design perfectly. You may want to use some of the empty black space towards the bottom of the form (below the “Subscribe” button) to reassure your subscribers about your privacy policy. Many of our customers have found that having a text saying i.e. “We respect your privacy policy” increases sign-up rates, because it reassures your subscribers that their email is not going to be sold, rented or shared. You can enable the privacy policy link easily in the Form Builder.

  • Dynamata

    Why are there no options for check boxes or radio buttons?

  • Karolina Stefanowicz

    @Dynamata, do you mean you can’t change their design? Have you got any suggestions?

  • http://www.FastActionTraining.com John

    @Simon, thanks a lot, will do!

  • Dynamata

    I need fields to collect name & email address plus a check box, to be ticked by the user if they want to opt in to a newsletter.

  • Karolina Stefanowicz

    @Dynamata,
    You can use checkboxes or radio buttons to collect data, but the web form is itself a newsletter opt-in, which can be followed by a confirmation email (we always recommend double opt-in). You can find some more info here:
    http://blog.getresponse.com/increase-confirmation-rates-with-the-new-form-builder.html

  • RJ

    Thanks for the recommendations Maciej. Being new to email marketing it can be over whelming sometimes.

    ~ RJ