Questions and answers

Questions that open when they are clicked

The same handful of questions reaches most businesses over and over: delivery times, returns, opening hours, what is included. Putting them on your page answers them before anybody has to write to you. Each question shows on its own line and its answer appears underneath when a visitor clicks it, so the page stays short.

Set it up

1. Make a questions and answers widget. Sign in at dreamwidget.com/dashboard, press FAQ and give it a name for your own list.
2. Add your first question. The editor opens on the Content tab. Press Add Question, type the question in Question and the answer in Answer. The preview shows it at once.
3. Add the rest. Repeat for every question. Six to twelve is usually right. More than that and a visitor scrolls past the one they needed.
4. Put a title above them, if you want one. Title on the same tab is the heading above the whole list. Leave it empty to drop your questions straight into a page that already has its own heading.
5. Press Save and Publish. Then copy the embed code from the Settings tab and paste it on your page, where our embedding guide shows.

The three styles

Style, near the top of the Design tab, sets the overall shape of the list.

• Cards. Each question sits in a box of its own with a border and a background.
• Rules: thin lines between questions, no boxes. No boxes at all, just a fine line separating one question from the next. Quieter, and it suits a page that already has plenty going on.
• Terminal: rules with uppercase mono questions. The same thin lines, with the questions set in capitals in a typewriter face. It is a deliberate look and it is not for every brand.

How they open

Open the first question at the start shows the first answer already open when the page loads, so a visitor can see immediately that these are questions they can open, rather than a list of headings.

Only one question open at a time closes whichever answer is open when a visitor opens another. Leave it off and a visitor can have several open at once and compare them.

The open and close shape

Every question carries a small shape at the end of its line showing that there is more to see. Shape offers four, and each one moves when the question opens: a plus that turns to a cross, a plus that becomes a minus, a chevron that turns over, or an arrow that turns down.

Shape size and Shape stroke width set how big and how heavy it is drawn. Shape color is its color at rest and Shape color when the box is hovered is what it changes to under the pointer.

The shape can also sit inside a little box of its own. Box behind the shape gives it a fill, with its own border color, border width, padding and corner radius. Set the corner radius to 0 for a square and turn it all the way up for a circle. Box fill when the question is open and Shape color when the question is open let an open question stand out from the closed ones.

The boxes and the text

Each question's box holds the border color, the border width, the background, the corner radius, and what both change to under the pointer. These do nothing in the two rules styles, which have no boxes, so they are hidden there.

Space between questions, Question padding, top and bottom, Question padding, sides and Answer padding, bottom control the room inside and between. Tightening the padding is the quickest way to fit more questions on the screen before a visitor has to scroll.

The words have three sections of their own, each with its own font, size, weight, letter spacing, line height and color: Title, Questions and Answers. Answers are usually best a size smaller than the questions and in a quieter color. Space under the title sets how far the first question sits below the heading.

Desktop and Mobile

The editor has two screens, Desktop and Mobile. Every setting on the Design tab is kept once for each, and the buttons above the preview choose which one you are editing. A change lands on the screen you are looking at and nowhere else, unless you tick Edit all screens above the preview. A tablet is drawn from Desktop.

Your questions and answers are shared by every screen, so you write them once.

Guided Edit, the tick box above the preview, is the quickest way to find a control: turn it on, point at any part of the widget and it lights up, then click it and the tool that edits that part opens. While it is on, clicking a question opens its tool rather than opening the answer.

If something goes wrong

The box settings do nothing. You are on one of the two rules styles, which draw no boxes. Switch Style to Cards and they come back.

Clicking a question does not open it. Check whether Guided Edit is ticked above the preview. While it is on, a click opens the tool for that part instead.

An answer is too long. Nothing breaks, but a long answer makes the list jump about as it opens. Two or three sentences is usually right, with a link for the detail.

Anything else: hello@dreamwidget.com, and tell us the widget's name.