How To Create a Kickass Contact Page Fast with Thrive Architect
Have you ever walked into a hotel lobby that made you cringe?
Maybe the front desk was a hot mess...
...or the visible carpet stains and run-down lounge chairs filled your imagination with unsavory images of the rooms. Yuck!
At the very least, you knew the service was bad.
Now take a moment to consider whether or not your website's Contact page is giving a similar feeling about your business to new visitors and potential clients.
If so, then maybe it's time to replace that old carpet and upholstrey with some fresh conversion focused designs.
Ready to build a Contact page that impresses your online visitors enough to stick around and reach out? Read on...
The Anatomy of Great Contact Pages
The perfect conversion focused design for your website’s Contact page all depends on the type of business you’re running.
If you need some ideas about what sort of elements should be included on a Contact page, make sure to read this blog post about Contact page fundamentals first.
But assuming you already have the basics down and just need a little help turning theory into practice, this post is going to breakdown 3 kickass Contact page examples and then show you how to build them with Thrive Architect (using a few Theme Block templates you get with Thrive Theme Builder).
Let’s get to it...
Sleeknote: Software & Service Based Business Example
Do you run a business that sells software or even some kind of service?
Then you can create a Contact page like Sleeknote’s, designed around answering new client questions while providing useful links to address common concerns:
If you don’t count Sleeknote’s sitewide Header and Footer when analyzing this design, you can break their Contact page down into 3 parts, including a:
- Hero Area
- Contact Form + Useful Links Section
- Bottom Section
Let’s take a look at each section in a little more detail — and how to build them with Thrive Architect...
Simple Yet Clear Hero Area
Sleeknote’s Hero Area simply and clearly communicates the purpose of their Contact page:
Got a question? This Contact page exists so Sleeknote’s staff can answer it for you.
How To Build It with Thrive Architect
Replicating this strategy using the Thrive visual editor is as simple as dropping a Theme Block element onto your page (Theme Block templates are available in Thrive Architect when Thrive Theme Builder is active as your WordPress theme), filtering for the “Hero Area” templates, and customizing the design you select to suit your own Contact page needs.
In fact, here’s a Theme Block template that even uses the same slanted bottom border design style that Sleeknote’s Contact page deploys:
Just swap out the demo image with your own, update the text and you’re already well on your way to publishing a fantastic looking Contact page:
Contact Form + Useful Links Section
This next section has multiple parts and does the heavy lifting for Sleeknote by presenting both a Contact Form and a series of useful links:
First off, Sleeknote keeps their Contact Form simple by just asking for the following details:
- First Name
- Last Name
- Message (a required text area input)
- Additional Details (an optional text area input)
We think this minimal set of inputs is going to be appropriate for most businesses.
However, the form would work better if the text area labels were specific (like “Your Question” instead of “Message” and “Anything else you’d like to add?” instead of “Additional Details”).
The actual input boxes would benefit from response prompt placeholders too (Like “Type your question here…).
Below the Contact Form, Sleeknote includes some contact information, including their:
- “Book a Demo” (make an appointment to test drive Sleeknote)
- “Get Inspired” (read customer success stories)
- “Become a Partner” (join Sleeknote’s affiliate program)
These clever links may lead potential customers to the pre-sale product info they’re looking for without needing to complete the Contact Form. Not a bad idea for your own Contact page, right?
Finally, it’s always smart to include social proof where possible so Sleeknote displays a “Trusted by” company logo section. This works to establish trust and authority with warm leads who make it to the Contact page.
How To Build It with Thrive Architect
Setting up a conversion focused Contact Form like this using the Thrive visual editor is quick and easy.
Start by adding a Background Section element underneath your Hero Area. Drag & drop a [ ½ | ½ ] Columns element within that.
With the Background Section highlighted, change the “Content Maximum Width” value to your liking (we recommend 1000 pixels if you want to keep your Contact Form appearance narrow like Sleeknote's) within the Main Options tab of the left sidebar.
Now, highlight the left Column element and give it both a white background (#ffffff in the Background Style tab) and a pleasant grey drop shadow (say #50565f in the Shadow tab).
From there you can add a Contact Form element inside that same left Column. A template library will appear from which you can select a Contact Form design (this new template feature became available in this Thrive Themes feature release):
After you select a Contact Form template, it will load on your page (matching your set brand color if Thrive Theme Builder is active).
Next, customize the Contact Form design by adding a second Name and additional Text Area field (if you want to request similar details to Sleeknote’s form). From there, you can customize all the labels and placeholder text as you like.
We suggest making each field required except for the last “Additional Details” text area field:
Once your Contact Form design is finished, it’s time to make it functional. This means programming an automated email that will send any submitted details to the email address of your choice.
Do that by highlighting the Contact Form element and clicking on the blue “Add Connection” button under the Main Options tab of the left sidebar. From there, select the “Email” option in the dropdown menu that appears:
Then click the white “Compose Email” button to program your automated email. You can also program a confirmation email to be sent to the Contact Form submitter:
On top of that, you can also sync your Contact Form with your email marketing tool or autoresponder!
To do that, simply click the blue "Add Connection" button a second time to connect your email marketing tool, just like you would for any Lead Generation element inside Thrive visual editor:
That's right, the updated Contact Form element doubles as a Lead Generation element too! In fact, although both elements can still be found in the Thrive visual editor's right sidebar, they're actually one in the same now. Make sure you're in compliance with local, national and global privacy laws when you use this feature.
Important Note! Set up a Transactional Email Service
The above email and any that you send from our Contact Form element will be sent from your WordPress website.
Inboxes are very suspicious of emails that are sent from WordPress. Gmail almost always sends them to the spam folder and even removes the hyperlinks.
If you ever send emails from a WordPress site, it is necessary to set up a Transactional Email Service or SMTP plugin. This means that WordPress creates the content of the email but it will be sent by a respectable email server... and inboxes will happily welcome the email.
Check out our knowledge base article to learn how to set this up.
Now that your Contact Form setup is complete, it’s time to add any necessary Contact Information to the page.
Do this by adding a Styled List element underneath your Contact Form.
Customize and style your icons (you’ll need to ungroup each Icon element within the Styled List element to make it unique) and modify the Text elements to become Global Fields.
You can do this by clicking on the “Dynamic Text” icon (in the floating text styling bar), selecting “Global Fields” from the dropdown box, and then choosing the appropriate contact info item (like “Address” for a location icon or “Phone number” for a phone icon):
Let’s move on to setting up your empty right Column element.
Begin by adding an H2 and Paragraph Text element to the right Column. With the parent Columns element highlighted, you can also vertically center the content in the Main Options tab of the left sidebar:
The best way to add your useful links — in the style of Sleeknote’s Contact page — is with some fancy Content Box element craftsmanship.
Do that by adding a Content Box element underneath the right Column text you just deployed. Add an H3 to serve as your link title in the new Content Box as well as some Paragraph text for context. Style your H3 and Paragraph text.
Then drag & drop an Icon element next to the Paragraph text to create a Columns element within the Content Box. Select a right facing chevron or arrow icon for this. Style the icon and its positioning while also vertically centering the new child Columns element.
Now add a bottom border to the Content Box element.
With the Content Box element still selected, enter the Hover state and add a CSS Animation to the Animations & Action tab in the left sidebar (I recommend using the “Forward” animation option).
Finally, return to the Content Box’s Normal state and add a Hyperlink within the same Animations & Action tab (set to your desired URL).
Now clone and customize this Content Box link as many times as needed to complete your Useful Links section:
The final detail needed to complete this Content Form section is entirely optional, but featuring a few companies that use your products or services (or even a simple customer testimonial or two) can go a long way to help position yourself as a trusted business in your niche.
To replicate this, just style some text followed by a few logo images (in a [ ⅓ | ⅓ | ⅓ ] Columns element for this example) beneath your useful links area:
And once that’s done, it’s time to finalize this Contact page design with a Call to Action bottom section.
Sleeknote uses a Bottom Section design to promote their 2 free offers:
- A 7 day free trial
- A free demo session
This Bottom Section strategy is optional for your own Contact page, but if you do have a compelling free offer that would help your potential customers purchase, consider placing it here.
How To Build It with Thrive Architect
Again, the Thrive visual editor Block element is your friend as it gives you several “Call to Action” or “Lead Generation” Content Block templates you can customize — like this one:
After a making a few customizations to the “Call to Action” template and adding a footer to the landing page, we have our final Contact page design modeled after Sleeknote’s:
Now that this Contact Page design has been completed on Desktop, you just need to check how everything looks on smaller screen sizes...
Tablet and Mobile Design Optimizations
After completing any landing page on Desktop, the final task is to run through the Tablet and Mobile versions of the design to make any necessary adjustments.
In the case of this example, just a few Background Section and Block element margin & padding settings needed to be changed (found within the Layout & Position tab of the left sidebar) to achieve the following mobile optimized result:
And that’s it! Your Contact page is ready to go!
Move with Lara-Lyn: Online Coaching and Consulting Business Example
If you’re an online coach who wants more clients, then you need a Contact page that makes it stupid simple for potential clients to inquire about how to work with you.
And by using one of the “Contact” category Theme Block templates (available inside Thrive Architect when Thrive Theme Builder is active as the WordPress theme), you can create a new client focused Contact page in just a few minutes — just like Move with Lara-Lyn did:
Condensed Coaching Contact Page
Notice this Contact page design is just a streamlined version of the Sleeknote example discussed above. The “Hero Area” top section and “Call to Action” bottom section have been stripped away.
The condensed Contact Form section keeps it simple by displaying:
However, the one feature that would really make this Contact page NEXT LEVEL is the integration of an automatic scheduling tool (like Calendly or Acuity Scheduling).
By deploying that, potential clients could book their initial consult calls without any back-and-forth communication. If you’re interested in learning how add automatic client scheduling to your online coaching Contact page, check this post out:
How To Boost Your New Coaching Client Conversions & Automate Your Bookings with Thrive Architect
How To Build It with Thrive Architect
You can get this type of Contact page design up and running fast with the Thrive visual editor if you've got Thrive Theme Builder active on your WordPress site. It’s just a Theme Block “Contact” category template.
So on your blank landing page, get started by simply add a Block element to the page and select the following template:
From there, you can customize the left Column template elements such as changing the Heading and Paragraph text, adding a friendly picture of yourself, and modifying the Global Fields contact information to suit your business needs:
Now, you just need to customize your Contact Form element.
Do this by either modifying the template’s default Contact Form…
...or deleting it to use a new Contact Form element in its place.
To match the Move with Lara-Lyn example (that uses Radio Buttons), we suggest using this template instead:
Always customize the Contact Form template to your own specific business needs. Refer to the Sleeknote example above for details on how to add, remove and customize your input fields.
Keep the information you request to what’s absolutely necessary (so you don’t discourage potential clients from reaching out). And don’t forget to program the Contact Form’s automated emails while you’re at it.
Because Move with Lara-Lyn offers both in-person and online services, she actually uses Radio Buttons on her Contact Form to communicate both options are available. Think about your coaching services to see if there’s specific info you want to learn about clients or info you want to communicate to potential clients with your contact from — like this:
As you can see, we swapped out the Radio Buttons in this example with Checkboxes. Feel free to make this Contact page design your own!
Tablet and Mobile Design Optimizations
Again, you’ll need to run briefly through the Tablet and Mobile versions of this Contact page design to make any necessary modifications.
After a few adjustments to the Columns element settings as well as a few margin & padding changes, here's the final mobile optimized result:
But if you’re hoping to create a Contact page with just a little more sophistication, let’s look at one final example...
Zendesk: Simple yet Impressive Contact Form Lightbox Example
So you want to build a “high-tech” Contact page?
Well, we’ve got just the example for you…
High-Tech Hero Area
Check out how Zendesk’s Contact page utilizes a 2-Step popup lightbox strategy:
As you can see, Zendesk proudly displays a “Contact Sales” button within the Hero Area that opens a lightbox with a Contact Form inside.
Here’s how to do the same on your own Contact page...
How To Build It with Thrive Architect
Get started by selecting either a "Call to Action category Content Block template (Thrive Architect only) or a “Hero Area” category Theme Block template (Thrive Architect + Thrive Theme Builder) — ideally one that uses a Button element like this:
Next, modify the text to match your particular business needs. For the sake of the example, let’s pretend Esther Phillips has a sales team too:
Now, move over to your WordPress dashboard so you can create a Thrive Lightbox with a Contact Form inside.
To create a simple Contact Form lightbox like Zendesk uses for your high-tech Contact page:
- Click on the Thrive Lightbox tab of your WordPress dashboard (a Thrive Architect plugin feature)
- Press the “Add New” Thrive Lightbox button
- Title the new Thrive Lightbox
- Publish (or update) it
- Click the “Launch Thrive Architect” button
Now you’re ready to build your Contact Form lightbox.
In the Thrive visual editor that opens, drag & drop some Text and Contact Form elements into the lightbox (select the Contact Form design you like best from the template library that appears):
After that, it’s just a simple matter of customizing your Thrive Lightbox and Contact Form element (just the same as in the first Contact page example) to complete the design.
You’ll also need to change Background Style as well as Layout & Position tab settings of both the Contact Form and Thrive Lightbox elements to achieve the following result:
Here, we’ve even included a Dropdown custom field box within the Contact Form to mimic a question that has several possible answers (like the “Number of employees” question Zendesk includes on their Contact Form).
As always, make sure to check if any Tablet and Mobile version modifications are required on the Thrive Lightbox design before heading back to your Contact page to finish up.
After you move back to the Thrive visual editor of your Contact page, just connect the “Contact Sales” button to your new Thrive Lightbox Contact Form you just created.
You can do this by:
- Highlighting the Button element
- Clicking on its Animation & Action tab of the left sidebar followed by clicking the Popups icon
- Selecting the “Open Thrive Lightbox” option and typing your Thrive Lightbox name into the “Lightbox” search bar
Once your Animation & Action tab setting is saved, your high-tech Contact page should function like this:
Feel free to customize the rest of your Contact page as needed.
Consider setting up an automatic scheduling lightbox in the following section — like we explain how to do in this blog post:
Automate Your Online Scheduling Using a 2-Step Lightbox
Make Your Lightboxes More Powerful with Thrive Leads
If you have Thrive Leads, you can set up a Contact From lightbox using the opt-in form plugin’s ThriveBox feature as well.
Thrive Leads makes creating your high-tech Contact page even easier as it gives you access to dozens of professionally designed 2-step lightbox templates and several more advanced features not available when using Thrive Lightboxes.
Your Turn to Make Contact
So now that we’ve walked you through how to build a few different conversion focused Contact page designs using Thrive Architect — paired with Thrive Theme Builder for added Block template design power — are you ready to take what you’ve learned to craft your own?
There’s no need to lose business anymore because a poorly designed Contact page isn’t capturing new clients for your coaching, consulting or online services.
Use the designs, techniques and recently upgraded Contact Form element now available inside the Thrive visual editor to finally create a Contact page that converts.
And of course, if you have any questions about the Contact page designs, strategies or techniques we showcased in this post, make sure to leave us a comment below!