Does your contact page have a list of frequently asked questions (FAQs)? If not, it should. FAQ lists should be a staple on every contact page and it can save you a heap of time.
FAQs are questions that your customers and blog readers often ask you. They might ask you on blog posts, via emails or on social media. Their questions could be on a range of topics from product and service specific questions to questions about how to collaborate with you. To anticipate their needs, you can create a list of the questions that they have either asked or you think that they might ask and answer them for your customers and readers so that they don't have to ask you individually.
FAQS WILL SAVE YOU TIME
Having a FAQ list will save you all that time that it would have taken to type up individual responses for customers and reader that ask them. Having them in one central place means you wont get those questions via email as often and when you do, you can quickly respond by copy and pasting your pre-written answer along with a link to your complete FAQ list.
FAQS BUILD CONFIDENCE
Outlining your answers to potential questions will build confidence for your customers and audience. There are a few reasons for this: firstly, taking the time to outline your answers to FAQs show your customers that you value their piece of mind; FAQs also establish a standard response, so their are no surprises for your potential customers and readers; and lastly, FAQs put their minds at ease, by answering questions your audience might not even know they have yet, you are making them feel confident that you are across all the things that could be a concern to them!
FAQS SUPPORT BRAND CONSISTENCY
Another great advantage of having a FAQ list, is that it actually supports brand consistency. By taking the time to answer these questions in a thoughtful and complete way, you are creating consistent standards for your business and blog. You are essentially saying the same thing, responding in the same way and giving people the same answers to their questions and it makes your brand consistently clear and stable.
Adding a FAQ list to your Squarespace page is easy and there are a variety of ways to do it, but one of my favourite ways is to create an accordion FAQ list. That looks like this:
Q1. THIS IS YOUR FIRST QUESTION.
Place your answer to the question here.
Q2. THIS IS YOUR SECOND QUESTION.
Place your answer to the question here.
Q3. THIS IS YOUR THIRD QUESTION.
Place your answer to the question here.
To add your own accordion FAQ list to your Squarespace site, follow the instructions below.
STEP 1: THE CODE
Put this code in a markdown block on your Squarespace site. So, this should be the page on which you would like to display your FAQ list. You can change the question and answer text accordingly and add as many questions as you like by simply including two hashtags before the question.
## Q1. THIS IS YOUR FIRST QUESTION. Place your answer to the question here. ## Q2. THIS IS YOUR SECOND QUESTION. Place your answer to the question here. ## Q3. THIS IS YOUR THIRD QUESTION. Place your answer to the question here.
STEP 2: JAVASCRIPT
Copy and paste the following code into the header code injection area of your page and click save. If your page is within an index, paste the code into the header code injection area of the Index, not the page.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.markdown-block .sqs-block-content h2').addClass('ui-closed').css('cursor','pointer');
$(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle();
$(".markdown-block .sqs-block-content h2").click(function() {
$(this).nextUntil("h2").slideToggle();
$(this).toggleClass('ui-closed ui-open');
});
});
</script>STEP 3: ADD THE CSS
Once your code is installed in a markdown block on the specific page you want to show your FAQ accordion and you have included the Javascript to make it function, you will need to style it. To make it look like the example you will need the following CSS code and insert it into your Custom CSS field. You will find this in Design > Custom CSS If you have experience with CSS you can edit this code to change the way your list looks!
.markdown-block p {
margin-left:1.5em;
}
.markdown-block .ui-closed:before {
font-family:monospace;
content:"+ ";
}
.markdown-block .ui-open:before {
font-family:monospace;
content:"- ";
}
