You can now preview a form to work as if embedded in a website. (This is analogous to previewing emails, and looks similar). New controls for this are just above the form in the form editor. This serves as a “halfway-house” between viewing a form in the form editor and embedding the form in your public website.

Background

The form editor, in forms → form editor, shows a form more-or-less as it would appear when embedded in a web page. This superimposes controls (which you can turn off, just above the form).

However, it doesn’t behave in exactly the same way. In particular:

  • in a live version of Cameo, the final action of the form does not happen inside the form editor. (For example, to add or update a membership, or book an event ticket)
  • in the form editor, you have to simulate anything which needs to divert to a different website:
    • payment methods which jump to the provider’s website to collect details can’t be completed using the form editor. You have to simulate payment. This applies mainly to GoCardless and PayPal.
    • you can only simulate email verification. In a test version of Cameo, email is still not actually sent. You can find it in sent email. In live versions, the form editor does not send emails.
  • in the form editor, the Back button is unreliable. This includes equivalents, such as pressing one of the form progress headers. It isn’t possible to distinguish a Back in the form from a Back intended for Cameo. This is because of the way browsers handle Back.

Previewing a form embedded as it would be in a website removes these restrictions. With a couple of exceptions, the form behaves just like it would in your website. But you don’t have to embed it to try it.

Warning re live versions

Because the form preview embeds a form just as in a website, it does everything a live form would do. This is unlike in the form editor. So in a live version of Cameo, it really does:

  • send emails: so be careful what email addresses you enter and which memberships you select for personalisation. They will receive the emails the form normally sends. Feel free to use any email address with the domain ddje.uk (such as test1234@ddje.uk). This is what the insert invented details button does. It avoids unfortunate accidents.
  • take payments: money really does change hands if, for example, you enter your own credit card number. Refunds do not usually include the providers’ fees.

Form preview

To preview a form, select either of the buttons preview form (Fig 1: 1) or preview personalised (Fig 1: 2). Find these immediately above the form in the form editor.

Preview form simply opens a new browser tab which embeds the form.

Preview personalised personalises the link which opens in the new tab. It does so for the selected membership (provided a suitable email exists sent to that member). If you have no one selected, Cameo chooses a suitable random membership.

Fig 1: preview form controls

The preview page (Fig 2) offers controls for resizing (Fig 2: 1) and dark mode in a sidebar, like email preview. You can hide the sidebar.

You can also fill in invented details as you can in the form editor. Do this either from the sidebar or a control above the form (Fig 2: 2). Cameo decides the set of details randomly when the preview tab opens. So, if you want a new set of details, refresh the tab. Similarly, just refresh the tab to restart the form from the beginning.

Note that the form preview tab is not publicly accessible. You must have logged in to Cameo to see the form preview.

Fig 2: form preview tab

Appearance

The embedded form appears as it would in a simple website with limited formatting (CSS). It doesn’t know about your website. Therefore it can’t apply any formatting your website would apply. That includes font, box sizes and so on. For example, some websites make text input fields much bigger than the default with extra padding around the entered text.

However, form preview does apply all the appearance controls set in forms → colour scheme and style. That includes things like:

  • Button colours, which are also included in your website (unless the website formatting overrides them)
  • Any CSS explicitly provided
  • Selected fonts. These are not carried over into a live embedding. They are applied in form preview, though, as a special case, so you can preview with a similar font to the one your website uses.