Last Updated on January 13, 2020 by Neil Murray

Guidelines to follow when writing and styling FAQ content and images.

FAQ Sites

Development Site

When first writing an FAQ, you write in on the development site at http://kb-dev.cf7skins.com/faq/.

Live Site

When the development FAQ has been approved, you move it and the images over to the live site http://kb.cf7skins.com/faq/

Content

Generally, the content should be easy to read and follow. If in doubt about any formatting, look at a published live site FAQ.

Structure & Tone

An FAQ post exists to answer a specific question. The structure should be clear, concise, easy to follow, be supported with images, and not deviate from the initial question.

Remember: An FAQ is not a tutorial. If the post is becoming lengthy, consider making a short FAQ with an accompanying tutorial.

The tone of writing is a blend of professional and conversational.  Use simple English terms to answer the question as quickly as possible. Avoid the use of sales call-to-actions (“download today for great forms!”) and, unless absolutely necessary, exclamation points.

CF7 Skins UI Terms

When referring to particular areas of the plugin, what you call the UI depends on which audience the FAQ is addressing. Always opt for the more simple term rather than a complex term and use your best judgment.

For example, what do you call the form tab when writing about creating a form?

1. Visual Editor – Used more for conversation within the team or on public areas as a promotional word.
2. CF7 Skins Form Tab – Instructional and direct for novice users and beginners to CF7 Skins.
3. Visual Form Editor – Very precise term, but not necessarily useful. Describes the form editor rather than being promotional or instructional.

Take a look at Visual UI terms explained for help.

Contact Form 7

If the article is about Contact Form 7, at the top of the article, enter a sentence on where to find the same topic for CF7 Skins. For example:

“This article is about Contact Form 7. For CF7 Skins,  <article title and hyperlink to live site article.>”

• Italicize the text.
• Add a horizontal rule to separate this from the rest of the article.

Headings and Sections

Use headings sparingly. If you do need a section heading use a H3 tag.

Tips

Tips are formatted using a blockquote tag.

• For example: Tip: We recommend you start with the Default style.

Steps & Instruction Lists

Numbered instructions (steps to accomplish something) are not ordered lists, they are paragraphs.

• When entering numbers, fix the formatting so they are not indented. The number should be flush with the left side of the article.

Related FAQs

Related FAQs are always located at the end of the article.

• Formatted as ‘Related FAQs:’ using H4.
• Related posts are in an ordered list.
• Maximum of 4.
• Links direct to the live site, not the development site.
  • If the article you want to link does not exist yet on the live site, link it to the development site and leave a note in the content audit to fix this when the article has been approved.
• If there are no related FAQs, do not put any for the sake of having something there.

Images

Creating Images

• Crop Images – The screenshot should only focus on what is necessary to help someone follow along.
  
• Use Arrow and Rectangle Indicators – Arrows and rectangles are used to highlight important, or multiple, parts of a screenshot.
  
  • Arrow – 4 thickness (sometimes 2-3 on images that are a closer view)
  • Rectangle – 3 thickness, 2 border radius
  • Colors – #008CC1 or #C5000B depending on which provides the most contrast.
• Name Images Consistently – Follow the naming convention the best you can. All images follow:
  • cf7skins-(areaofapp)-(extra-info) . Some examples:
    • cf7skins-template-contact-selected (‘contact form’ is selected inside the templates section.)
    • cf7skins-style-berrydelight-selected (‘berry delight’ is selected inside the style section.)
    • cf7skins-wp-style-default-contactform (a contact form with the default style applied in a WordPress page view.)

Uploading Images

• Upload the image directly in the article. It will be automatically added to the WordPress Media Library.
• All images should make use of an appropriate alt tag. The alt tag should describe what is in the image for screen readers.

Saving Images to Dropbox

• Images used in an article need to be uploaded into Dropbox\Documentation\Tasks.
• If there is not a Dropbox folder for the FAQ, create a new one.

Using Images in an FAQ

• Always have an image to help convey any step or to help clarify the location of something in the plugin.
• Max Width
  • 725px (this is so it fits in the accordion view.)
• If necessary, add an extra space above and/or below the image to ensure paragraph text is not squished beside the image.

Checklist

1. Check image and content formatting on the accordion view of the FAQ. This is main FAQ home page view.
2. Check image and content formatting on the article view of the FAQ. This is the view seen when an FAQ is linked through other articles or documentation.
3. Re-read to make sure it is easy to read and answers the actual question.
   
4. Content Audit content status is correct.
5. Dropbox folder has been created and images (if any) are stored inside.
6. ‘Finish’ the Pivotal Task story (if there is one.)