Designing a form and thank-you screen

Use Design in the form editor to choose how a full-page form looks, then use Thank-you screen to explain what happens after someone submits it. Preview both screens before saving.

These design controls apply to the form's own public page and its confirmation screen. Forms embedded in another page keep the design of the page around them. Changing a form's layout does not redesign that surrounding page.

Open the form you want to design

1. Open Forms, find the intended form, and select Edit form.
2. Review its Title, Description, and questions. Use a short title and a description that helps visitors understand the request before they start.
3. Check Live under On your site. Saving changes with Live on updates the public form. Keep a new form in draft while preparing it; switching an existing live form off and saving makes it unavailable to visitors.
4. Find Design. Its controls change the current editor; use the form-level Save when you are ready to keep the changes.

For a new form, follow Creating a contact or inquiry form first. New forms start with Live on, so switch it off before saving unfinished work.

Choose a layout

Choose one of the three layouts in Design:

• Split: places the introduction beside one focused question at a time on a wide screen. Use it when visitors need context while answering.
• Centered: uses a single column. It suits short, direct forms with a brief introduction.
• Image: places an image with the introduction beside the questions on a wide screen. Use an image that helps explain the request or sets an appropriate tone.

All three keep the question-by-question flow. Choosing Centered does not turn the form into a page showing every question at once. On smaller screens, the composition becomes a single column; check how much introduction or imagery visitors see before reaching the first question.

Colors and fonts follow your site's theme. The form editor does not provide a separate color palette or font selection. For site-wide branding, see Changing your logo, colors, and typography.

Adjust spacing, background, and progress

Use the controls below the layout choices to refine the form:

• Background: choose Site background, Panel, or Subtle brand tint. A panel separates the form from the surrounding page; the tint uses your site's brand color subtly.
• Content width: choose Standard or Wide. Compare the preview rather than assuming a wider layout is easier to read.
• Spacing: choose Comfortable or Compact. Compact reduces space, but long labels, help text, and messages still need room.
• Progress: choose Progress bar, Step markers, or Question count only. The last option removes the visual progress indicator while keeping the question count.
• Motion: choose Gentle movement, Fade, or None. Visitors' reduced-motion preferences are respected.

The same design carries through to confirmation. Check that your choices work with both a question and the thank-you message.

Reset design restores the default design: Split, Site background, Standard width, Comfortable spacing, Progress bar, and Gentle movement. It also clears the form image and its description. It does not reset your questions or thank-you text. Review the result before saving; Reset design is not an undo command for all form edits.

Add and crop an image

1. Choose Image, then open Form image using Add image or Change image.
2. Select an image from the library. Use Search media to find it by filename. If the library has no suitable image, upload one in Media first. Alternatively, enter an Image URL and select Use URL.
3. Enter an Image description for meaningful content, using up to 500 characters. Leave it empty when the image is purely decorative. Do not put essential form instructions only inside the image.
4. Set Image focal point to Top, Center, or Bottom, then inspect the crop in both desktop and mobile previews.

The image fills its display area, so its edges may be cropped. A focal point changes which part remains visible; it does not edit the original media file. Keep important faces, objects, and text away from the edges, or choose a different image if the crop cannot work on both screen sizes.

Use an image visitors can open without signing in. A site image path or a full HTTP/HTTPS image URL is supported; an external page address is not a substitute for the image's address. Prefer a secure HTTPS image on an HTTPS site.

The Image layout needs an image before it can be saved. Until you choose one, the preview temporarily uses Split and shows a message explaining why. To remove the image, use Clear in the picker and choose Split or Centered before saving.

See Uploading and organizing media if you need to prepare an asset first.

Write the confirmation and choose what happens next

1. Under After someone submits, open Thank-you screen.
2. Set Heading to a clear receipt message, such as “Inquiry received.”
3. Set Message to explain the next step. For example: “Thanks for contacting us. Our team will review your inquiry and reply by email.” Include a response time only if your team can meet it.
4. Set Send another button to describe returning to a fresh form, such as “Send another inquiry.” This button resets the form; changing its label does not make it open another page.
5. Under Then, choose Return to the form after 5 seconds, 10 seconds, 30 seconds, or Stay on the thank-you screen.

New forms default to returning after 5 seconds. Choose a longer delay or stay on the screen when the message needs more time to read. Staying on the screen still leaves the return button available. On the live form, hovering over or focusing inside the confirmation pauses the return countdown, so it may remain visible longer than the selected delay.

The confirmation appears in the form after a successful submission; these settings do not create a separate destination page or redirect. Heading and Message are text, so write the next step clearly rather than relying on HTML or Markdown formatting.

Leaving these text fields blank uses the default confirmation copy; it does not hide the confirmation. Preview the actual result if you clear a field.

Keep the message accurate. Receiving an inquiry does not establish that a booking was confirmed, a payment completed, or an application approved. Changing the thank-you text also does not configure an email acknowledgment, a team notification, or a mailing-list subscription. Set up and test any separate follow-up you intend to promise.

Preview questions and confirmation

1. Select Preview form in Design. The preview reflects the current editor, including changes you have not saved yet.
2. Compare Desktop and Mobile, then Light and Dark. Check text readability, image cropping, spacing, and whether the first question is easy to reach.
3. Select Questions and move through the form with sample answers. Check long questions, help text, required-answer errors, and Back and Next. Review the final submit-button label too.
4. Select Confirmation to inspect the thank-you message directly. Read it at mobile width and check the return button. You can also complete the preview questions to reach this screen.
5. Use Restart to return to the first question, or Hide preview to close the preview while continuing to edit.

Preview answers are never sent or saved, and the preview does not trigger a real subscription or notification. The confirmation preview stays available for inspection instead of running the live return countdown. Use the saved public form to verify actual submission and return behavior.

The Desktop preview represents a 1280-pixel view and Mobile represents 390 pixels. Cedros scales the view to fit the editor, so a small-looking desktop preview is not necessarily the size visitors will see. Check a real phone or narrow browser window before sharing the form widely.

If you see Your site theme could not be loaded, the preview is using the default theme. Your saved design is unaffected. Recheck with the site theme available before judging colors and fonts.

Save and verify the public result

1. Review the design, confirmation text, and Live setting, then select the form-level Save. Confirm Changes saved. Opening a preview does not save the form.
2. For a live form, use Open form in the Forms overview. For a draft, finish preparing it before switching Live on and saving.
3. Inspect the public page on desktop and mobile. Check the image, colors, questions, and the route visitors will use to reach the form.
4. Send one clearly labeled test inquiry using an address you control, then check the confirmation and View submissions. This is a real submission and may trigger any configured follow-up. Verify the return button and, if enabled, the timed return.

If the form is also embedded in a page, inspect that placement separately. Its surrounding design is controlled by the host page. Publishing a form's saved design does not publish unrelated edits to that page.

If a submission request times out, check for the saved test answer before sending another copy. A successful design preview alone does not prove that the public form is collecting answers.

Fix common design and confirmation issues

The preview will not open: use Retry preview if shown. Your form edits remain in the editor. If Cedros asks for a title and question, add them before previewing.

Save says an image is required: select a Form image or change the layout to Split or Centered. A Split preview while an image is missing does not mean the selected Image layout is ready to save.

The image is missing or cropped badly: check the image address and visitor access, adjust the focal point, and compare both screen sizes. Use another image when the subject cannot fit the available crop.

The confirmation disappears too quickly: choose a longer Then delay or Stay on the thank-you screen, save, and check the public form. The preview does not exercise the timer.

The confirmation remains longer than expected: move the pointer and keyboard focus outside it when checking a timed return. Hover and focus pause the countdown. Also confirm you did not select Stay on the thank-you screen.

The public form still looks unchanged: confirm you saved the correct form and opened its own public link. Reopen the editor to check the saved design, refresh the public page, and distinguish an embedded form from the full-page form. If editing controls are read-only, ask an administrator to check your feature access.