<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>How to Design a FAQ Webpage in a SEO Way With Categories</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-teal.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue-grey.css">
<style>
body{
font-family: Verdana, 'Roboto', sans-serif, Monospace;
background: #E6D16B;
line-height: 1.5;
}
main{
max-width: 80%;
margin:10px auto;
}
.center {
display: flex;
justify-content: center;
align-items: center;
// height: 200px;
border: 3px solid green;
}
img {
max-width: 100%;
}
.container{max-width:900px;margin:auto}.title{text-align:center;font-family:Arial;margin-top:50px;margin-bottom:50px}.accordion__item{margin-bottom:10px}.accordion__item__header{background-color:#CBEAFE;padding:15px;cursor:pointer;position:relative;color:#000;font-family:Arial;font-weight:400;font-size:20px}.accordion__item__header::before{height:15px;width:15px;content:"";position:absolute;right:15px;top:15px;transition:.5s all;transform:rotate(45deg);border-right:2px solid #000;border-bottom:2px solid #000}.accordion__item__header.active{background-color:#33a0ff;color:#fff;transition:.5s}.accordion__item__header.active::before{transform:rotate(-135deg);top:23px;border-right:2px solid #fff;border-bottom:2px solid #fff}.accordion__item__content{overflow-y:auto;padding:0;display:none}
.testbtn {
border:1px solid #99cc44 !important;
border-left:5px solid #99cc44 !important;
border-right:5px solid #99cc44 !important;
border-top:5px solid #99cc44 !important;
border-bottom:5px solid #99cc44 !important;
-webkit-border-radius: 25px;
border-radius: 25px;
margin-right: 10px;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.testbtn {
width: 100%;
height: auto;
padding: 0 !important;
margin: 1px !important;
font-size: 18px;
}
}
</style>
</head>
<body>
<div id="zoom_wrapper" class="w3-animate-zoom">
<div class="w3-panel">
<h1 class="title" style="vertical-align:middle;margin-top:10px;margin-bottom:10px;">Frequently Asked Questions</h1>
</div>
<!-- <div class="w3-border"> -->
<div class="w3-bar w3-theme center">
<button class="w3-bar-item w3-button testbtn w3-padding-16" style="font-size:24px" onclick="openCategory(event,'Category1')">Category1</button>
<button class="w3-bar-item w3-button testbtn w3-padding-16" style="font-size:24px" onclick="openCategory(event,'Category2')">Category2</button>
<button class="w3-bar-item w3-button testbtn w3-padding-16" style="font-size:24px" onclick="openCategory(event,'Category3')">Category3</button>
</div>
<br>
<br>
<div id="Category1" class="w3-container category w3-animate-opacity">
<main>
<div class="container">
<div class="accordion">
<div class="accordion__item">
<div class="accordion__item__header">
What is an FAQ page?
</div>
<div class="accordion__item__content">
<p>Frequently Asked Questions (FAQ) pages contain a list of commonly asked questions and answers on a website about topics such as hours, shipping and handling, product information, and return policies.</p>
<p>It’s no secret that the best companies put their customers first.
<br>
<br>
95% of consumers believe that a good customer experience is important to brand loyalty. Providing a top-notch customer experience can be expensive, time-consuming, and complicated to put into practice.
<br>
<br>
Sure there are chatbots, support lines, and customer reviews to help shoppers on their path to purchase, but there’s one forgotten customer service tactic that is cost-effective and streamlined. That tactic is an FAQ page.
<br>
<br>
FAQ pages went out of style for a bit because companies viewed them as outdated and unattractive forms of communication. Now they are on most websites because they save time for both the customer and employees. It’s easy to get carried away with the design and content on the FAQ page. In this guide, you’ll learn all there is to know about crafting an effective FAQ page. Plus, get inspired with 30 best-in-class examples.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item__header">
Why you should make an FAQ page?
</div>
<div class="accordion__item__content">
<p>An FAQ page is a time-saving customer service tactic that provides the most commonly asked questions and answers for current or potential customers. </p>
<p>Before diving into how to make an FAQ page, you need to know why having one is so important. There are so many reasons beyond improving the customer experience for perfecting your FAQ page. Keep in mind the importance of an FAQ page when <a href="/articles/e-commerce-website" rel="noopener" target="_blank">developing your own e-commerce website</a> so you can make sure it increases sales and not the other way around.</p>
<h3>Saves time </h3>
<p>This reason might be the most obvious, but it’s a clear benefit of an FAQ page. Not only does the FAQ page save customers time, but it also saves employees time as well. Having an FAQ page ensures customers don’t have to sit on the phone for hours waiting for simple answers and employees don’t have to individually answer all questions. </p>
<p>Companies dedicate a large portion of their budgets to customer service teams. When these teams don’t have to focus on answering the frequently asked questions, they can serve other customer issues in a more timely manner. </p>
<h3>Earns trust </h3>
<p>Information is available at the click of a button, but as we all know, information is not always true. Because of this, customers are more skeptical than ever before. They hunt for products by sifting through reviews, looking at the product on multiple websites, and doing price checking across the internet. </p>
<p>If your brand seems to understand the customer’s pain point and address it through a seamless user experience, the shopper will become a loyal customer. </p>
<p>One of the most common pain points is when shoppers are wondering something about a product or service and there’s no information addressing that question. The customers think to themselves, “I can’t be the only person who’s wondering this,” yet the answer is nowhere to be found. This is a surefire way to guarantee they close the window and go to your competitor’s website. </p>
<p>By creating a comprehensive FAQ page you can assure customers get the answer they need and keep shopping on your site. </p>
<h3>Provides new insights </h3>
<p>It’s difficult to get into the head of a shopper. Some buy on impulse and others buy after thorough research. By tracking the clicks on your FAQ page you can gather insights about your product or service that you didn’t know before. You can then inform your product team of these insights. From there, the product team can make changes to improve the product or experience. </p>
<p>For example, if a dog collar company’s most clicked-on FAQ is, “how do I make sure my dog doesn’t slip out of the collar?” you’ll know that people are having issues or concerns about the collar staying on. The product team then might have to create a no-slip feature to ease this fear among potential customers. </p>
<h3>Drives internal page views </h3>
<p><span>If you want your FAQ to be extremely thorough, which it should be, you can link to resources within your FAQ for your customers to find out more information. Whether you link to a blog that goes into more detail or a product page, this content helps the shoppers get the full story before making a purchase. </span></p>
<p><span>Having all of these resources also shows that you care about your customer's happiness, and it will make them stay on pages longer and explore other pages that they may have missed otherwise. </span></p>
<h3>Prevents negative reviews</h3>
<p><span>When looking through negative reviews, there’s almost always one thing in common— the problem could’ve been avoided. </span></p>
<p>For example, there’s always anger and confusion around e-commerce return policies</a>. <span>These issues are easily avoidable with a comprehensive section about questions relating to returns on an FAQ page. Instead of directing people to a support line, direct them to the FAQs. They’ll be happy to find an answer and avoid the phone call. </span></p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item__header">
How to make an FAQ page?
</div>
<div class="accordion__item__content">
<p>There are seven simple steps to make the perfect FAQ page for your business. The design of an FAQ page is crucial for an easy-to-use customer experience. Follow these steps and your customer success team will thank you. <br><br><img src="https://sell.g2.com/hubfs/how%20to%20make%20in%20an%20faq%20page.png"></p>
<h3>1. Determine the questions </h3>
<p>If your company already exists, then either in your inbox or your head of customer service’s inbox there will be a plethora of questions to get you started. Use these as a jumping-off point and make the list of questions as long as possible. No question is a dumb one, and odds are if one person thought it, then there’s a group of people out in the world thinking it, too. </p>
<p>If you are creating your business from scratch, jot down the questions that your friends, family, and investors ask about your product or service. Create a focus group and ask people to test your product or service and ask them questions about their experience. </p>
<p>Make sure the questions are relevant to your specific product and service and that they could make people want to buy once they find out the answer. Always frame your questions in a positive way. </p>
<h3>2. Categorize the questions </h3>
<p>Determine common themes within your list of questions, and begin grouping them based on that commonality. </p>
<p>Common categories include: </p>
<ul>
<li>Shipping and returns</li>
<li>Sizing </li>
<li>Products </li>
<li>Payments </li>
<li>Security </li>
<li>Your account </li>
<li>Promotions and discounts</li>
</ul>
<p>Sifting through a long list of random questions will only further frustrate the consumer. Categorizing all of the questions will help guide them on their search for answers. </p>
<h3>3. Highlight or link the most popular questions </h3>
<p>They are called frequently asked questions for a reason. Make sure that all of the questions can apply to multiple people. </p>
<p>For instance, “What to do if my dog steals my underwear” would not be a good FAQ. A better FAQ would be about the product details and the quality of the fabric used to decrease the number of tears. </p>
<p>After you have the most popular questions nailed down, pick no more than five questions to highlight as the most popular or top questions at the beginning of your FAQ page. Emphasizing these questions will make for a better user experience because most shoppers will just need those answers. </p>
<h3>4. Include a search bar </h3>
<p>This is the most helpful aspect of an FAQ page, and you will see plenty of search bars in the examples to come. Customers go to the FAQ page with a specific question in mind. Instead of making them hunt for it, have a search bar at the top of the page to save the shoppers’ time. </p>
<p>Search bars also cause related keywords to pop up in the results and can be a learning opportunity for the shopper. Without a search bar, customers can become lost and frustrated with the user experience. </p>
<h3>5. Align with your brand look and feel </h3>
<p>It’s always strange when browsing a beautifully designed e-commerce site, and then you click on the FAQ page and it looks like a design from the ’90s. </p>
<p>Of course, don’t over-design your FAQ page, but add some brand elements so that the shopper feels that they are in the same decade when they click over to it. Think about designing bullet points to align with your brand, or simply use your brand fonts. Make it feel just as important as the rest of the website because it is. </p>
<h3>6. Update regularly</h3>
<p>An out-of-date FAQ page can be more frustrating for shoppers than not having an FAQ at all. </p>
<p>Be sure to update your FAQ page with new questions when you roll out a new product or feature.</p>
<p>It’s good to look over the page quarterly to assess if any changes need to be made. Sometimes a question becomes more popular and needs to be moved to the top, or other times you may switch the payment processor and have to update those terms. No matter how big or how small the change is, make sure you reflect the changes on your FAQ page. </p>
<h3>7. Track and improve </h3>
<p>We talked about how the FAQ page can provide insights above, but in order to gather those insights, you must track the traffic and clicks on the page. Follow things like the order in which they clicked the questions and how they got to your FAQ page. </p>
<p>All of the actions taken on your FAQ page can help inform your product strategy so that your product team can improve the product or service based on your analysis of the page. Also looping in the software engineers is a good idea because they can alter the user experience based on the insights you gather. </p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item__header">
What are the most frequently asked questions?
</div>
<div class="accordion__item__content">
<p>A good FAQ is general enough to address many issues. There are questions that just about every company answers on their FAQ page, so if you’re struggling to get started use these are your starting point. If they’re relevant to your company, of course. </p>
<p><img src="https://sell.g2.com/hubfs/most%20frequently%20asked%20faqs.png"></p>
</div>
</div>
</div> <!-- id accordion end -->
</div>
</main>
</div>
<div id="Category2" class="w3-container category w3-animate-opacity">
<main>
<div class="container">
<div class="accordion">
<div class="accordion__item">
<div class="accordion__item__header">
How to answer your FAQs?
</div>
<div class="accordion__item__content">
<p>When crafting the answers to your FAQs, involve someone from PR. It’s unlikely you have an entire PR team on your staff, which is OK, but there are plenty of freelance PR specialists who can give input while writing these answers. It will highly benefit you to consider hiring one for a week or two. </p>
<p>Some of these questions could cause you to expose shortcomings of your product or service, so it is imperative that you position these answers in a positive light while remaining truthful. </p>
<p>It’s not as easy as it sounds. For example...</p>
<p><strong>FAQ:</strong> How much sugar is in D’s Energy drinks? </p>
<p><strong>Don’t say:</strong> There are 55 grams of sugar per serving, and the daily recommendation for sugar intake is 45 grams. </p>
<p><strong>Say: </strong>There are 55 grams per serving. Maintaining a healthy and well-balanced lifestyle is important to D’s Energy Drinks. Our beverages are perfect for athletes and those who maintain an active lifestyle. Check with your doctor before consuming if you have dietary concerns. </p>
<p>Additionally, write your questions from the customer’s perspective and your answers from the business’s perspective. </p>
<p>For instance, </p>
<p><strong>Question:</strong> How do I turn on my TV? </p>
<p><strong>Answer:</strong> We provide a remote control with each of our TVs. Click the ON button and you’ll be good to go! </p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item__header">
Where to put your FAQ page?
</div>
<div class="accordion__item__content">
<p>The placement of your FAQ page depends on the structure of your website. After putting so much work into your FAQ page, you don't want to hide it. Make sure your FAQ page is easy to find because when people are hunting for answers, they don't want to jump through hoops. </p>
<p>Consider putting your FAQ page on the top navigation of your website, or place it on a pull-down menu under the "Contact Us" tab. Don't try to be fancy and put it in an uncommon location, just stick to where others are putting it. </p>
</div>
</div>
</div>
</main>
</div>
<!-- Another Category Starts Here -->
<div id="Category3" class="w3-container category w3-animate-opacity">
<main>
<div class="container">
<div class="accordion">
<div class="accordion__item">
<div class="accordion__item__header">
First Question?
</div>
<div class="accordion__item__content">
<p>Answer Paragraph</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item__header">
Second Question?
</div>
<div class="accordion__item__content">
<p>Answer Paragraph</p>
</div>
</div>
</div>
</main>
</div>
</div>
<!-- Another Category Ends Here -->
<!-- Script for Tabs. No Need to Edit This. -->
<script>
// Tabs
function openCategory(evt, CategoryName) {
var i;
var x = document.getElementsByClassName("category");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
var activebtn = document.getElementsByClassName("testbtn");
for (i = 0; i < x.length; i++) {
activebtn[i].className = activebtn[i].className.replace(" w3-theme-dark", "");
}
document.getElementById(CategoryName).style.display = "block";
evt.currentTarget.className += " w3-theme-dark";
}
var mybtn = document.getElementsByClassName("testbtn")[0];
mybtn.click();
</script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
if ($(".accordion__item__header").length > 0) {
var active = "active";
$(".accordion__item__header").click(function () {
$(this).toggleClass(active);
$(this).next("div").slideToggle(200);
});
}
</script>
</body>
</html>
!
