Skip to content

Manually Setting up a Registration Form on VCP Live

Setup

If you used the template method list above, you will need to do a little configuration so the form looks and behaves as it is supposed to.

If you used the 'duplication' method, you might still want to run through this to make sure everything is correctly set up.

Required fields

Required fields are just that. They need to be added so registrant information can be collected and displayed to event admins correctly. Without these fields, you will not collect the information required to send on to clients.

When creating a new form from a template all the required fields will already be present. For reference, the required fields are listed below:

  • First name
  • Last name
  • Email
  • Company
  • Job title
  • Accept terms

Setup

For animations to work, all text fields require both the placeholder and the label to sit after the input field. To do this follow these steps:

  • Build > Elements > Edit (for each) > Form display
    • Title Display - set to After
    • Placeholder - set to Match title or instruction eg 'Enter Email'
  • Save

Styling

To format a form, 3 classes are required, as below, which is the default for the registration page

form-md form__style-modern form-bg-light
These should be entered under Settings > Form > FORM GENERAL SETTINGS > FORM ATTRIBUTES > Form CSS classes

Select 'custom', then add the above classes in the box that appears.

  • form-md relates to size on the page, can be one of;
  • form-md ; max 550px wide, centred
  • form__style-modern relates to styling, can be one of;
  • form__style-modern ; latest design, thin, with animated labels
  • form__style-poll-btns ; for checkboxes, making each option a capsule
  • form-bg-light relates to the background colour, this is required as labels have background to make them clear, and this needs to match the background colour behind the form, can be one of;
  • form-bg-light ; off-white, second-lightest color, switches color in dark mode
  • form-bg-lighter ; full white, switches color in dark mode
  • form-bg-overlay ; white, used on the survey overlay, doesn't change in dark mode

Button

To style the button, add the below classes to Build -> Elements -> Customize (on 'Submit Buttons' along the bottom) -> 'Submit button CSS classes

button__brand button-lg-txt mx-auto
  • button__brand Affects the color & look
  • button-lg-txt makes it bigger
  • mx-auto sticks it in the middle