Hey there, WordPress user! If you‘re looking to add a quick and easy way for visitors to get in touch with you through your website, you‘ll want to learn how to add a contact info widget.
In this in-depth tutorial, we‘ll walk you through the process of creating and customizing a contact widget step-by-step. By the end, you‘ll have a professional-looking contact section on your site that encourages visitors to connect with you. Let‘s get started!
Why Your Website Needs Easily Accessible Contact Info
First off, why is having a contact info widget so important? For starters, 88% of consumers say they trust a business more if it has contact information available on its website. And 51% of people think "thorough contact information" is the most important element missing from many company websites.
Beyond building trust, displaying contact info prominently on your site makes it incredibly convenient for potential customers to reach you. 44% of website visitors will leave a company‘s site if there‘s no contact information or phone number. You definitely don‘t want to lose out on leads and sales because you made it too difficult to get in touch!
Step 1: Choose a Contact Widget Plugin
WordPress makes it simple to add a customizable contact info widget to your site using either the built-in Contact Info block or a dedicated plugin. If you just need to display basic info like an email address and phone number, the default Contact Info widget will work fine. But if you want more advanced features and customization options, you‘re better off using a plugin.
Some of the best WordPress contact widget plugins include:
- WP Contact Widgets – Adds a simple contact widget with social media icons, a map, and more
- Contact Widget by vCita – Lets you add a contact form, click-to-call buttons, and other interactive elements
- HubSpot All-In-One Marketing – Includes a feature-rich contact widget as part of its complete marketing toolkit
For this tutorial, we‘ll use the free version of the WP Contact Widgets plugin. To install it on your site:
- From your WordPress dashboard, go to Plugins → Add New
- Search for "WP Contact Widgets"
- Click "Install Now" and then "Activate"
Step 2: Configure Your Contact Widget Content
With the plugin installed, you‘re ready to start setting up your new contact widget.
- In your WordPress dashboard, navigate to Appearance → Widgets
- Locate the widget area where you want to add your contact info (e.g. Sidebar or Footer)
- Click the "+" button and search for "WP Contact"
- Select the "WP Contact Widget" and click to add it to the widget area
Now you‘ll see a bunch of options for configuring the content and styling of your widget. The main settings to pay attention to are:
- Title – Enter a descriptive title for your widget, like "Contact Us" or "Get In Touch"
- Intro Text – Add an optional introduction message to display above your contact info
- Address, Phone, Email, etc. – Fill in the contact details you want to display
- Social Profiles – Connect your social media profiles to display icon links
- Map – Enter your address to display a Google Map of your location
- Hours – List your business hours or customer service availability
Once you‘ve entered all your info, click "Save". You can then preview how the contact widget looks on your site and make any other tweaks before moving on.
Step 3: Style Your Contact Widget to Match Your Brand
The default contact widget styles are fairly plain and generic. To really make your contact info stand out, you‘ll want to customize the fonts, colors, and overall design to align with your visual branding.
WP Contact Widgets comes with a "Style" tab that lets you modify the appearance without having to touch any code. You can easily change things like:
- Background and text colors
- Font sizes
- Label positioning
- Icon styles
- Spacing and padding
If you want to go even further with customizing the look and feel of the widget, you can add your own custom CSS styles. For example, to change the color of social icons when hovered over, you could add this CSS snippet to your theme‘s stylesheet or the "Custom CSS" section under Appearance → Customize:
.wp-contact-widget-social-icon a:hover {
color: #ff6600;
}Feel free to experiment and tinker until you get the widget looking just right! Just remember to keep the design simple and on-brand so it fits in seamlessly with the rest of your site.
Step 4: Place Your Contact Widget Strategically
You‘ve created a beautiful contact info widget—now where should you put it for maximum visibility and impact? Generally speaking, the most common and effective locations are:
- Sidebar – Highly visible placement, especially near the top of the page
- Footer – A typical location people are used to looking for contact info
- Header – Good for featuring just the essentials like phone and email
- Contact Page – A dedicated contact page is great for providing more detailed info and forms
There‘s no one "right" place to put a contact widget. In most cases, including it in multiple locations, like a condensed version in the header and a more robust widget in the footer, is the way to go.
When deciding the best placement(s), consider:
- The specific contact info you‘re featuring and if it should be visible on all pages
- The overall layout and design of your site
- What visitors typically expect to find in each area of a website
- How you want people to contact you (e.g. push them to call vs. email)
Need some layout inspiration? Check out how these brands creatively use contact info widgets on their sites:
- Basecamp – Simple 2-column footer widget with clear icons
- Zendesk – Footer widget with mini contact form
- Shopify – Sticky sidebar widget with help options
- PayPal – Well-organized footer optimized for scanning
Advanced Contact Widget Tips and Best Practices
By now you should have a functional contact widget displaying beautifully on your WordPress site. But to really take it to the next level, keep these extra tips and best practices in mind:
Include a Strong Call-to-Action
It‘s not enough to just display your contact info—you need to actively encourage people to reach out with a prominent call-to-action (CTA). A few examples of effective CTAs:
- "Call now for a free consultation"
- "Email us 24/7 for support"
- "Speak to a live representative"
- "Follow us for exclusive offers"
Your CTA should be specific, compelling, and tailored to the action you want visitors to take. Try using an attention-grabbing button so it really stands out!
Don‘t Forget About Mobile Users
In 2021, 54.8% of global web traffic came from mobile devices. So it‘s absolutely essential that your contact info widget looks and functions flawlessly on smartphones and tablets.
Most WordPress widgets are responsive by default these days, but it‘s still a good idea to double check. Pull up your site on a few different devices to confirm that:
- Text is large enough to read easily
- Links and buttons have plenty of padding for easy tapping
- Phone numbers are clickable for one-touch calling
- Email addresses open in the default mail app when tapped
- There‘s no awkward side-scrolling or cut off content
You may need to make some mobile-specific styling tweaks like increasing font sizes or changing the widget layout for smaller screens. When in doubt, simplify!
Keep Contact Info Updated and Accessible
There‘s nothing more frustrating than trying to contact a business only to discover that their listed email address or phone number is outdated or incorrect.
To avoid losing leads to this common mistake:
- Periodically check that all contact info on your site is accurate
- If you change your email, address, hours, etc. update your contact widgets ASAP
- Consider adding a "Last Updated" date so visitors know the info is current
- Provide contact info in text format so it can be easily copied or clicked
Use Consistent Contact Info Across All Channels
Chances are your website isn‘t the only place you list contact details for your business. You likely also have social media profiles, directory listings, review site pages, and printed materials like business cards.
It‘s important to use the exact same contact information everywhere to avoid confusion and present a united brand front. Some tips:
- Use the same formatting and spelling for your business name, address, numbers, etc.
- Try to secure the same handle or username on as many platforms as possible
- Ditch the generic Gmail or Yahoo email for a custom domain
- Create a master document with all your official contact info for quick reference
Add Schema Markup for Better SEO
Finally, if you really want to give your contact info widget an SEO boost, consider adding schema markup. Schema is a type of structured data that helps search engines better understand and display information about your business.
By adding LocalBusiness schema markup to your contact widget, you increase the chances of your business name, address, and phone number (NAP) appearing in local search results and Google Maps.
We won‘t get into the nitty gritty of how to implement schema in this guide, but you can use Google‘s Structured Data Markup Helper to generate the code. Then just add it to your contact widget or site‘s header.
Contact Widget FAQs
Before we wrap up, let‘s address a few frequently asked questions about contact info widgets in WordPress.
How do I create a contact form widget in WordPress?
We focused mainly on adding static contact info to a widget in this post. But what if you want to take things a step further and create an actual submission form that visitors can use to send you a message directly through your site?
In that case, you‘ll need to use a contact form plugin rather than just a simple contact info widget. We recommend WPForms, which lets you quickly build a custom contact form and then embed it anywhere on your site via shortcode or widget.
Can I display different contact info on different pages?
By default, the contact widget you create will display the same information sitewide in whatever location(s) you place it in. If you want to show different contact details depending on the page, you‘ll need a slightly more advanced setup.
One option is to use the Widget Logic plugin to control widget visibility based on conditions like page ID, URL, or category. For example, you could have an office location contact widget that only appears on the "About Us" page, while keeping the main contact widget in the footer of every page.
How do I hide my email address to prevent spam?
Unfortunately, publicly displaying an email address on your site is an open invitation to spammers and bots. You‘ll likely start receiving a lot more junk mail. Not fun!
If you want to include an email address on your website for people to contact you but don‘t want it to get scraped and spammed, you‘ll need to use some sort of email encryption or obfuscation technique.
We like the free WP Hide Emails plugin, which automatically converts plain text emails into a jumbled format using JavaScript, so bots can‘t read it but humans can.
Wrapping Up
Phew, that was a lot to cover! Let‘s quickly recap the key points:
- A contact info widget is a must-have for building trust, facilitating communication, and driving leads through your website
- WordPress makes it easy to add a contact widget using built-in blocks or dedicated plugins
- Be strategic about what contact details you include and where you place widgets
- Use styling, clear CTAs, and mobile-friendly design to make your contact info stand out
- Keep contact info consistent and up to date across your site and other web profiles
- Consider "extra credit" optimizations like schema markup for better SEO
By following this comprehensive guide, you‘re well on your way to adding a professional and conversion-focused contact section to your WordPress site. Your visitors (and your inbox) will thank you!
For more expert WordPress tips and how-to‘s, be sure to subscribe to our blog newsletter. If you found this guide helpful or have any lingering questions, leave us a comment below. Now go put that new contact widget to work and start making more meaningful connections with your audience!
