1. Home
  2. Docs
  3. How to use QSM?
  4. How to add a Contact Form

How to add a Contact Form

The Contact tab in QSM enables you to configure a form for collecting user contact details within quizzes or surveys. This feature supports multiple field types and customization options to define a signup form tailored to your data collection needs.

Setup to Configure Contact Tab

setup-contact-form

1. Contact Field Type

When adding a new field in QSM, you can choose from 8 types of contact fields:

  • Text: Collects general input, such as names, businesses, or phone numbers.
  • Email: Allow to input valid email address.
  • URL: Collects website addresses.
  • Number: Accepts only numerical input, ideal for phone numbers, student IDs, or similar data.
  • Date: Gathers date information, with customizable format options available in the Options Tab.
  • Checkbox: Allows users to confirm choices, like agreeing to terms and conditions.
  • Radio: Provides a single-choice selection, such as choosing a gender or preference.
  • Select: Adds a drop-down menu; enter the list options (separated by commas) in Settings > Options.

Note that QSM includes four built-in contact fields: Name, Email, Business, and Phone. These fields are initially disabled, so you need to enable the ‘Show disabled fields’ option to view them. You can customize their labels to suit your needs, but their types are fixed and cannot be changed. Additionally, these fields are permanent and cannot be deleted.

2. Label

This field provides you the ability to customize each type with a particular label that will be displayed in the contact form before the text field.

For example, if you enable the Text field for ‘Name’ and customize its label to ‘Your Full Name,’ participants will see ‘Your Full Name’ followed by a text box in the quiz.

3. Settings

Various settings are available based on the selected contact form type.

  • Required: If checked, the field must be filled in before the quiz or survey can be submitted.
  • Hide Label: Lets you hide the set label with just the placeholder text visible
  • Placeholder: Set the placeholder text that will be shown inside the text field
  • Min Length (For Text & Number type): Set the minimum number of characters or numbers the input must have.
  • Max Length (For Text & Number type): Set the maximum number of characters or numbers allowed in the input.
  • Allow Domains (For Email Type): Enter a comma-separated list of email domain extensions allowed for input. Leaving it blank means all domains are allowed.
  • Block Domains (for Email type): Enter a comma-separated list of domains blocked for input
  • Options (For Radio & Select Type): Enter all the options for the selection to be separated by comma
  • Make the first option default selection (Select type) – If enabled, the first option added in the select type field will be by default selected.

4. Duplicate Field

Click the “Duplicate” icon to create a copy of a contact form field.

5. Delete Field

Click the “Delete” icon to remove a field.

6. Enable/Disable Field

To add a field to your quiz or survey contact form, enable it by toggling it on. To exclude all contact fields, leave them disabled by keeping them toggled off.

7. Show Disabled Fields

When the “Show disabled fields” option is enabled, you will see all the disabled fields. However, if you disable the option, all the fields that are toggled off will be hidden, and only the enabled fields will be displayed.

8. Add New Field

Click on the Add New Field button to include more fields for the contact form.

9. Options tab

setup-options-in-contact-tab

Navigate to the Options section in the Contact tab, you’ll see more pre-set options to set up your contact form.

  • Contact form position – Choose where you want to display the contact form in a quiz or survey
  • Hide contact form to logged-in users – Select whether to display contact form to logged-in users or not
  • Disable auto fill for contact input – Select whether to allow auto-fill in the contact input field or not
  • Disable first page on quiz – You can choose whether to disable the first page (welcome page) in the quiz or not. If you disable it, then the quiz will be displayed directly to users.

After adding and adjusting fields as needed, remember to save your work by clicking the “Save Form” button located below the Form Options box.

Educators & Professional Web Developers, Try QSM!

4.9 / 5
Over 1 million downloads

Subscribe to Our Newsletter

Get weekly updates, no spam guaranteed we promise ✌️