Above the Fold vs.Below the Fold: Web Page Design 101

I can only imagine the chats the guys had over the first newspaper ever published and how they must have argued on what to put under the fold and what to put above the fold. It must have been one of those long brainstorming sessions – you know them, the endless, we-will-never-reach-an-agreement kind of brainstorming. 

Somehow, they reached the best conclusion they could ever reach, though: everything above the fold draws attention. The same concept propagated through the decades and various geographical locations and when it came to asking what to put on a website, modern-day fellow graphic designers already knew: above the fold of a website is where the good stuff should lay. 

That is the short version. 

The extended version on what above the fold web design and above the fold marketing? 

We’ll tackle it in the article ahead – so keep reading if you want to find out more. 

The Premises of a Brilliant Contact Page 

Don’t look at your website contact page as yet another one of those pages you have to include on your website. 

Look at it as one of the main gates through which customers step into your Sales Funnel. Alternatively, look at it as the gate through which you can build steady, long-lasting relationships with them by providing them with the help they need when they need it. 

It would be best if you created your contact us form and page in a way that makes your business feel inviting and welcoming for the user. 

Regardless of whether you want to build a Shopify contact form or a Wix contact form, your contact form design and wording should be spotless. As mentioned above, this is not just another must-have page on your site – it’s how you draw people in and start a conversation. 

Some of the essential tips to keep in mind when creating the Contact Us website form include the following: 

  1. Show personality. Really, you wouldn’t welcome a new friend into your house with a bland “welcome.” Do the same with your contact page too. Your business has a voice of its own, and your users/ customers deserve to come in contact with that, instead of an annoying page that doesn’t actually say much about who you are. 
  2. Be personable. Your customers have to feel like you’re approachable as a business – so be warm in the way you invite them to contact you. This personable approach can be reflected in both the design of the page and the actual copy. 
  3. Don’t be afraid to point them to your FAQ or even further down the Funnel. In some situations, you might be able to link your visitors to commonly asked questions – or even presentation pages for your product or your product’s features (which can help to push them down the sales funnel). 
  4. Keep it simple. Don’t overcomplicate it. The simpler your form is, the easier it will be for users to get in touch with you. Don’t ask too many questions – but allow yourself to be asked as many questions as one might need. 
  5. Be straightforward. Don’t beat around the bush – try to lead your visitors to what they need as soon as they land on the page. The way you organize the copy and the design itself will play a crucial role in this!
  6. Be conversational. Regardless of what you might sell and who your customers are, you can allow yourself to be a little conversational. The extent to which you can be conversational varies a lot on what your business stands for and whom your target audience is – but making your contact form too official and formal might put your visitors off. 
  7. Give them options. Make your contact form easy to interact with – offer your users drop-down options and link options to make sure this is extremely easy for them. Don’t let them fumble in the dark – clear out their way and make it genuinely facile for them to find what they need or the contact form they need. 

With 123FormBuilder, you can choose from a variety of Contact Us page templates and easily personalize them to fit your desired tone of voice, style, brand, and target audience. We’ll give you the basic model, and you can play with it as you deem necessary. Alternatively, you can use the free contact form builder and create one from scratch. 

How to Add a Contact Form to a Website: Above or Below the Fold? 

This is where we started, and this is where we circle back. 

You can build the best contact form in the world. 

You can make it engaging and fun, and you can create the most intriguing and attractive design for it. 

But it won’t mean much if people ignore it. 

So, where should you add the contact form to a website? Where on the contact form page should you add your form? Should you settle for an above the fold design or keep your form under the fold? 

Well, the answer is a bit more complicated. 

Best practices in contact page design (and web design in general) say that whatever is most attractive on your site should go above the fold.  

However, just because this is the commonly-accepted status-quo of the web design world, it doesn’t mean things should always stay the same. Your website contact form might not pose the same challenges, and it may not target people with the same purpose as your neighbor’s – and vice-versa. 

There are at least a couple of arguments to have against the traditional above the fold marketing paradigm: 

  1. Everyone does it, which tends to make all websites look like variations of the same template. It’s hard to stand out from the crowd when you’re wearing the same pair of blue jeans and white T-shirts as everyone else. 
  2. Most of the above the fold website examples feel disrupting. Just imagine a salesman showing up at your door. Moreover, just imagine the unimaginable: you actually listen to him. And right in the middle of this fantastic story he’s built around his product, he drops the bomb: he wants your contact details. His story isn’t over, but he needs to stop at around 2 minutes and 32 seconds because that’s what studies told him works best. Feels familiar? 
  3. Not all website forms are created equal. For some, you need a massive call to action that pops right from the very beginning, above the website fold. For others, you need to be a little more subtle and drop it at the end of your story, rather than wave it like a flag right at the beginning of it. 
  4. Not all websites are created equal. The most modern site structures forgo the fold altogether. And when there is no actual fold, there’s no above and below it either. 

So, how do you answer the question in our title? 

Simply put, it depends

It is probably safer to include your contact form above the fold. But don’t do this blindly, just because. Think it through. Think of your brand, your users, your customers, and where do you want them to be once you’re “done”  with your page? 

You think, therefore you are. Challenge the paradigm, test things out, and see how it goes – no two businesses are 100% alike, even when they sell the same product and target the same audience. And yours needs to be the one standing out above the fold in your customers’ memory!

Leave a comment

Your email address will not be published. Required fields are marked *

You love forms as much as we do?

Then share your form story with us! We will read all the submitted cases and reach out the selected ones for further details. The chosen ones will have a case study created and will be featured in our blog, newsletter and social media channels.