Making contact

The contact page redesign

The redesign journey continues. Today I tackled the contact page. To many people a contact form seems simple but not only is there more happening behind the scenes than people realise but designing a form with good usability is not easy.

Sure, a simple form is easy. Name, email and/or number, message send. But what if you need a more complex form or a long form?

No one likes completing forms but sometimes we need them. How do you make a long form easier to use? Well keep reading and you’ll find out.

This is also a great place to add basic contact information like phone number, email address and social pages.

The contact page redesign with conditional logic form.
The contact page redesign with conditional logic form.

It’s All About The Details

Looking on the right first, basic contact details. I added icons that when clicked or tapped perform an action. The phone icon will start a call when on a mobile phone or other device that can make calls. The email icon will try to open your mail app or service. The WhatsApp icon opens a chat in the mobile app or on desktop, starts the WhatsApp Web interface.

Even though I provide the details on the screen I still want to make it as easy as possible for people to contact me. So no need for copy/paste. Magic.

Then we have the social media icons to follow on the various platforms.

Then we come to our form. At first it’s a basic form right? Wrong. I used a magical thing called conditional logic. Basically if this happens then this should happen. It’s how I set the form to only show certain things based on choices.

So if someone just has a simple query then this is it for them.

redesigned form page 1 general
redesign contact page project

Choose “General” and a send button appears, click it and away goes the form. But choose “Project” and you get a button that takes you to the first page of the creative brief. What’s great about this is that I’m not forcing extra stuff on someone who doesn’t need fill in the extra fields. And because the buttons only appear on the choice I’ve eliminated the confusion.

The Creative Brief

Redesigned form design brief

The creative brief is the best way for us to get all the information we need to figure out more about what you need. This allows us to work out a quote and tells us most of what we need to know. It can take some time to fill in but it saves time and miscommunication.
To make it a bit easier I’ve broken it up into pages. Smaller bite sized chunks and as long as you come back to the same browser and you haven’t cleared the cache or cookies your information will be where you left it.

design brief options

It’s Only Logical

Here’s a smaller example of conditional logic. If you don’t have a logo then there’s no need to give you the extra field. The link field only appears when you choose the option that you do have a logo or brand. All of this is an effort to make the process of form filling less tedious.

Skipping the 3rd page because it’s just a boring form page, page 4 ends with another choice. If it’s a new site you need you get the send button and away she goes. You’re done.

But site redesigns have a few extra questions. To get those on a new build will only confuse the issue. Instead we put that on another page.

And there you have the new form experience at LiveFuse. I tried to make the basic form as simple as possible and allowing the option for a more in depth form if it’s needed. I also realised that creative briefs can be long and tedious so I’ve worked on making that an easier experience too. I hope I’ve succeeded.

Follow Us

Leave a Comment

Check This Out

DIY I'll do it myself

I’ll Do It Myself

You need a website so you go online and look at your options. You find a bunch of site builders that allow you to quickly build a site. You ask yourself why you need to pay a professional to do it if you can just do it yourself. While they seem like the perfect solution,

Read More »

Say No To Sliders

When it comes to web design the most important consideration is the user. It doesn’t matter how cool you or the designer thinks something is if the user doesn’t like it. Huge companies sometimes spend millions developing products that people ultimately hate. One such thing is sliders. Something you see on the majority of sites

Read More »

Talk to us! We'd love to hear from you

We work remotely from Johannesburg. Drop us a message using the form.

You can reach us using:
Call | WhatsApp | Telegram | Email

Leaving so soon...

but we're just getting to know you.

Still deciding if LiveFuse is right for you?

We’d love to work with you on your next website or help you with an existing one.

Send us a message and we’ll get back to you to discuss your needs.

We use cookies to ensure the best user experience. Our privacy policy can be viewed here.