Skip to content

Setting up a webform on VCP Live

Introduction

Webforms allow us to gather user information. They are used on most events requiring a user to provide their data to register interest and set them up to access the event when it streams.

Instructions

From Templates

  1. Navigate to the webforms list by selecting Structure > Webforms from the admin menu
  2. Select the "Templates" tab and choose select on either of the below templates:
    • VCP Registration - off-white bg - modern styling, for off white background, uses vcp color for button
    • VCP Registration - white bg - modern styling, for white background, uses vcp color for button
  3. Click "Select" and enter a title for the form you create in the pop up window.
  4. The template form fields can then be edited to suit your event

Manual Setup

Setup

For animations to work, All text fields require both a placeholder & The label to sit after the input.

  • Build -> Elements -> Edit (for each) -> Form display -> Title Display (After) & Placeholder (Match title or instruct 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