Screens come with Echo Forms Signature. While the add-on is off, the form goes straight from one question to the next.
A form with screens feels like it is talking to people. It greets them, cheers a good answer, shares a tip half way and builds a little suspense before the result. Each screen is one more reason to keep going, so more people reach the end.
The Screens tab
Open the form, then Settings > Screens. The numbers match the picture.
| What it is | |
|---|---|
| {1} | Your form, in order: the welcome screen, then every step and every screen between them, top to bottom. Pick one to change it. |
| {2} | Add a screen: an info screen, an answer screen or a loading screen. |
| {3} | Preview: the screen you picked, as visitors see it. Switch between Computer and Phone above it. |
On your page, screens take your form’s own colors and font, so they match the questions around them.
The bar under the builder has Welcome screen, Info and answer screens and Loading screen buttons that open this tab on the right screen.
Greet people with a welcome screen
Pick Welcome screen in the list, then switch it on 1. The form now opens on a screen of its own before the first question.
- Write the heading and a few words in the designer under the switch: what the form is for and what they get at the end.
- Button label 2 is the words on the Start button, such as Find my routine.
- Say how many questions there are and about how long they take 3 adds a line such as 6 questions, about 2 minutes, counted for you.
A welcome screen works on any form: a quiz, a survey, a multi-step form or one that shows one question at a time.
Add an info screen between questions
An info screen sits between two steps with facts, a quote or a picture, then moves on. Use it for a short pause that keeps people going: “Three more questions and your plan is ready”, a customer quote, or a tip that makes the next question easier.
- Under Add a screen, press Info screen 1. It joins the list with a heading and a line to change.
- In Shows after 2, pick the step it comes after.
- Build what it shows in the designer: a heading, words, a picture, a quote, a list, a big number.
- Under Moves on, choose With a button and its label, or By itself after a number of seconds.
Show it built in Elementor or Beaver Builder
An info or answer screen can show a template you made in Elementor or Beaver Builder instead of the built-in designer. Under Design it in, pick Elementor or Beaver Builder, then choose the template.
- In Elementor, go to Templates > Saved Templates and make a section or container template. Keep it short: it fills one screen.
- Save it, come back to the screen and pick it under Template.
- The design settings under it still set the card, background and entrance around your template.
If you have no templates yet, the screen says so and links to where you make them.
Cheer an answer with an answer screen
An answer screen shows only after a chosen answer. Pick Answer screen under Add a screen, then choose the question and the answer it follows. Someone who picks Three or four days a week can see “That is a great pace”, while everyone else goes straight on.
Use answer screens to:
- Encourage: thank people for an answer that shows they are a good fit.
- Explain: when an answer has a catch, say what it means before they go on.
- Sell gently: after “I already have a website”, mention the plan made for people who do.
Build up to the result with a loading screen
A loading screen runs for a few seconds before the result, with steps that tick off one by one: Reading your answers, Working out your pace, Finding your goal date. Results feel earned, and people wait for them instead of skimming past.
- What it says: the heading, and the steps that tick off, one per line.
- Look: thirteen to choose from, from a calm ring or bar to a heartbeat, an orbit or a morphing blob. Ring, Bar and Filling up fill as it runs; the others move until it is done.
- Your picture: an animated GIF, or an SVG if your site allows SVG uploads, with a movement (spin, pulse or float), a size and a speed.
- Color and Second color, and whether to Show the percentage.
- Runs for: how many seconds, then it goes on to the result.
Design a screen
Every screen is built from blocks, in the order you add them, with a live preview beside them. Press Add and pick one:
| Block | What it shows |
|---|---|
| Heading, Text | The words. Press Insert an answer… to put one of their answers in, such as their name. |
| Picture, Divider, Button | A picture from the Media Library, a thin line, and a button with its own words and link. |
| Bullet list, Quote, Big number | Points with ticks, numbers or dots; a quote with who said it; one large figure with words under it. |
| Journey chart, Meter | On a quiz result: a chart from where they are to their goal, and a meter of their score. |
| Type breakdown, Their answers, Product picks | On a quiz result: how much of each type their answers came to, each answer with your note, and products to buy. |
Under the blocks, the design groups set the look: Layout (with a picture beside the words or behind them), Card, Background (a color, a gradient or a picture), Text and colors, Spacing and Entrance.
Every screen starts with your form’s own colors. Change a screen’s colors only when it should stand out, such as a dark info screen half way through a light form.
Support comes with Signature: in Echo Forms, open Help & feedback and tell us what you were doing, and the people who build it answer, seven days a week. Get Signature