Building the Registration Form with Form Designer

Form Designer

Welcome to our Form Designer, your all-in-one tool for crafting registration forms with ease. Say goodbye to toggling between editor tabs – now you can design your form and questions seamlessly within one intuitive interface.

Ready to get started? Simply head over to the Registration tab and dive into the management menu. Click on 'Form Designer - Beta' to unleash the power of our interactive editor.

Once inside the Form Designer select the 'Launch form editor' button and you'll find a sleek preview of your registration form. Need to tweak the layout or preview it for different groups? No problem. Utilise the dropdown menus at the top right to tailor your view precisely to your needs.

Navigate through tabs like 'Form', 'Header', 'Page', 'Text', and 'Messages' to access a plethora of customisation options. From shaping the form's layout to infusing your brand's identity into every aspect, the controls you need are at your fingertips.

And here's the best part – every change you make is instantly reflected in the real-time preview panel on the right. No guesswork, just seamless design.

So, what are you waiting for? Let your creativity flow and watch your registration form come to life effortlessly.

[INSERT SCREENSHOT/DEMO HERE]

Form Tab Overview:

In the Form tab, you wield the power to shape your registration form exactly as you envision it. We've streamlined the process by auto-generating a basic information section, complete with fields for Email, First Name, and Last Name, so you can hit the ground running.

Adding new fields to this section is a breeze – just click the '+' icon. And if you need to bid farewell to a section, simply click on the ‘Bin’ icon. Need to tweak the details of a section? The ‘Pencil’ icon is your go-to for quick edits.

But wait, there's more! Feel free to expand your form's horizons by creating new sections with a simple click of the 'Create new section' button.

Ready to unleash the full potential of your registration form? Let's dive in!

[PLACE HOLDER INSERT SCREEN SHOT]

When fine-tuning your section, you're in control. Edit the Section Title and Icon to ensure clarity and cohesion within your form. Want to tailor visibility? Add a 'Group' to restrict access to specific people groups, ensuring information is shared selectively. And for added context, enrich your section with a description.

[PLACE HOLDER INSERT SCREEN SHOT]

If you click on the ‘v’ icon, the section will expand and display the list of fields you have added for that section. To edit the field, click on the ‘Pencil’ icon. You can also move the field into another section by clicking on the ‘Double Arrows’.

[PLACE HOLDER INSERT SCREEN SHOT]

Finally, to re-order the field or the section, click, hold, and drag the field or section.

Field Options within the Form

Text field – This is a simple one-line text field which is appropriate for small responses.
Checkbox field – This field can be used for simple yes or no questions.
Dropdown field – This field is useful to present users with a long list of predefined options.
Rich Text field – This field will allow users to write longer content with rich text editing options.
Radio field – This field is useful to present users with a short list of defined options.
Multi-Select field – Similar to the checkbox, but allows users to select multiple options from a predefined list.
Ordered Multi Select field - A multi select that the user can re-order to rank options.
Image Upload - Allows users to upload images and optionally map to their profile picture (authenticated registrations only).

[PLACE HOLDER INSERT SCREEN SHOT]

Field Configuration

When you select a field, you will be presented with the configuration dialog.

On this dialog, you will see four tabs, and they are:

Setup – Where you add the label name for the field and an optional short description.
Validation – You can opt to make this field mandatory or optional and set the maximum and minimum length of the text the users can enter.
Connect – You can map the current field to either the Profile or a Custom field in CrowdComms.
Please remember that if you want to connect the response in the form to a custom field, you must first add the custom field in the People’s Profile setting.
Visibility – You can customise this tab to configure when to show or hide this current field based on the user’s response to other fields, as well as add a People Group to restrict the visibility of this field to specific people groups. Please refer here for explanations of how to configure this tab.

Once you’re happy with the text field configuration, click ‘Submit’.

Visibility (All fields)

i. There are a few ways to use this Visibility configuration. The simplest one is if you want to show or hide the current field based on the user’s response to a previous field, as well as add People Group to restrict the visibility of this field to specific people groups.

ii. For example, you can decide to show or hide a checkbox question based on the answer provided in the previous field(s) of the registration form.

iii. Say you want to ask a follow-up question, ‘Do you ride to work?’ to users who have responded Yes to having a bicycle. You can add a configuration for the current field to only appear for those users who have answered Yes. And not to appear for users who answered No.

iv. You can also configure the current field to check multiple other previous fields before it shows/hides the current field based on the user’s responses.

v. As an example, if your current field asks the users if they ride to work, you may want to check if your users have answered True in some of the other previous fields, such as, if they ‘Own a bicycle’ or if they ‘Work from an office’.

vi. If you want the current field to only show if the users have answered all of the relevant questions with True, then select ‘When all the following are true’ from the Select Logic dropdown.

vii. But, if you want at least one of the relevant fields to have been answered True, then select ‘When some of the following are true’ from Select logic the dropdown options.

viii. You don’t need to create the opposite response configuration, i.e. ‘Hide this field’ if the users responded to not having a bicycle.

ix. On Select Logic, there are 2 options available. If you have one or multiple fields you want to check for this configuration, select ‘When all the following are true’.

x. For this logic, the system will look for all the relevant fields you’ve configured and check that the users have answered True on all of them.

xi. The other option is if you have multiple fields and you want the system to check that your users have answered ‘Yes’ to at least one of them, select ‘When some of the following are true’ from the dropdown option.

xii. What this will do is, if you have 2 questions which you have configured with this current field, the system will look at whether at least one of the answers is True, and if so, the current field will appear to the user.

xiii. The next step is to add the visibility Conditions. On this table you will need to add all the field(s) you want the configurations to check.

xiv. Click on the ‘+ Add’ button and another dialog will appear. You must ensure that the field already exists in the registration form.

xv. On the dialog, select the Field, Comparison and/or the Value. Please note that depending on the field type, some of the dropdowns may not be applicable to the configuration. Such as for the Text Field type, you won’t need to add the Value.

xvi. If you want to add more fields to the current field’s configuration, repeat steps ix – xii.

Header Tab Overview:

Within this tab, elevate your registration form's allure by uploading and configuring captivating header content aligned with your brand. From the striking Page Title to the engaging Introductory Text and Logo, every element is at your fingertips. Plus, enjoy the flexibility of toggling specific content on or off to align with your design preferences seamlessly.

Once you've curated your content, customise to your heart's content, adjusting parameters such as:

Logo Width: Set the perfect dimensions to ensure your logo shines.
Header Text Color: Infuse your header with the ideal hue to captivate registrants.
Toggle Form Title: Decide whether to showcase the Form Title, and effortlessly control its Font size and weight.
Toggle Form Description: Choose to display the Form Description, and wield control over its Font size and weight.
Header Content Spacing and Alignment: Perfect the visual harmony by adjusting spacing and alignment to suit your aesthetic.

[PLACE HOLDER INSERT SCREEN SHOT]

Page Tab Overview:

In the Page tab, you wield the reins to sculpt the layout of your registration form into a seamless journey for your users. Here's what you can do:

Layout Configuration: Tailor the layout to fit your vision perfectly. Whether you prefer a classic design of a single page or a modern twist, the choice is yours.
Background Images: Elevate the visual appeal by applying captivating background images. Set the tone and immerse users in an engaging registration experience.
Additional Elements: Enhance user navigation with features like Display Breadcrumbs. Empower users to track their progress effortlessly through the registration process, ensuring they're always in the loop. Plus, unlock the potential of summary pages to provide a snapshot of their registration details, simplifying the process and instilling confidence.

[PLACE HOLDER INSERT SCREEN SHOT]

Text Tab Overview:

In the Text tab, align your form seamlessly with your event's branding. Here's what you can do:

Font Customisation: Choose fonts that resonate with your event's vibe, ensuring every word reflects your brand's identity.
Color Customisation: Infuse your form with a splash of personality by selecting colors that resonate with your event's theme. Whether you're aiming for bold and vibrant or sleek and sophisticated, the choice is yours.
Contrast Optimisation: Tailor text to stand out on both light and dark backgrounds, ensuring readability and visual appeal across all devices and environments.

[PLACE HOLDER INSERT SCREEN SHOT]

Messages Tab Overview

In the Messages tab, wield the power to craft compelling messages that guide attendees seamlessly through the registration journey. Here's what you can do:

Edit and Format Messaging: Tailor messages to resonate with your audience, ensuring clarity and engagement every step of the way. Whether it's a confirmation message or an email verification prompt, make every interaction count.
Personalisation: Infuse messages with a personal touch to foster a sense of connection with your attendees. Customise content to reflect your brand's tone and values, leaving a lasting impression.
Formatting Options: Elevate the presentation of your messages with formatting options such as font styles, colors, and layout. Ensure consistency with your event's branding while enhancing readability and visual appeal.

With the Messages tab, transform mundane notifications into memorable interactions, enriching the registration experience for your attendees from start to finish.

[PLACE HOLDER INSERT SCREEN SHOT]

Advanced Tab Overview:

TBC

[PLACE HOLDER INSERT SCREEN SHOT]

Once you've effortlessly fine-tuned each tab to perfection and the preview panel reflects your vision flawlessly, it's time to seal the deal. Simply click the 'Save Changes' button to apply your edits. With one swift click, your masterpiece comes to life, ready to captivate attendees and elevate your event experience to new heights.