Documentation - Pages

Forms

How to create, use and test various types of forms.

Why and when use it?

The forms are used to collect user information, such as names, emails, phone numbers etc. You can create various types of form in the CMS: Formspree, Zoho and B2B forms.

To add a new form, you need to follow the general steps first (described here) and then add necessary fields depending on the form type you need. You can find them here:

General Form Creation

To create a form, follow the steps below:

  1. Go to the “Main side navigation” and click on “Data - Form”. Here you will find a list of all the forms that were added previously.

  2. Click on the “New Data - Form” button. This button redirects to the form settings page.

    Form Creation - General

  3. Add the ID (CMS ONLY). Remember to set a descriptive ID and easy to recognise in the “REFERENCED FORM” field inside the module settings page.

  4. Choose to add utms in the form entries if needed. You can add them by enabling the toggle in "Add session utms as form values"

    Session UTMs as form values

  5. Save your changes and stack them.

Formspree Form

With the Form created previously, you can start adding the fields necessary for a Formspree form.

What you need

To create a form connected to Formspree, you will need the form ID link (that usually looks like this: https://formspree.io/f/manwyddw) and the list of inputs (data to collect) you want to add.

Setting up the form

Before adding your inputs, you need to set up necessary fields for the Form:

  1. Choose the Form Method from the drop down list (usually "POST").

  2. Paste your form ID link in the Form Action.

  3. In the Form Legend, add a text you want to have under the form (for example, "Fields with are required"*)

  4. Add Submit Button Text. This will be the button that appears under the form to submit the entries.

Formspree form

Adding inputs

Now you can add your inputs. Choose an input type from the input drop down list in "Add inputs".

You can find the list of possible inputs here.

Please note that for each input, the name you add in the "Field name" will be the name of the data collected in Formspree.

Inputs Formspree

Remember to save your data and stack changes.

Zoho Form

With the Form created previously, you can start adding the fields necessary for a Zoho form.

What you need

To create a form connected to Zoho, you will need to create a default Zoho form in Zoho platform first.

Then you will need to obtain the form ID link (that usually looks like this: https://forms.zohopublic.eu/fever/form/FormName/formperma/QpdGoDWfEEbEeq12qRgldw6UiAJ9k5ng8apUMJ3_ZhQ/htmlRecords/submit) and the list of created inputs from the Zoho page.

Creating form in Zoho
  1. Enter Zoho forms page (https://www.zoho.com/forms/) and login with Fever pass.

  2. Add new form by clicking "Nuevo formulario".

  3. Add the necessary inputs in the form generator ("Generador"). Choose the input types from the list provided by Zoho, but please note that not all of the inputs are available in the CMS (find available inputs here).

Zoho generating Form

  1. When you have your form ready, go to "Compartir", "Insertar" and "HTML & CSS". Download plain HTML file ("Descargar HTML plano"). In this file you will find your form ID link and inputs' names to create the form correctly. You can open the file in your code editor, or open it in your browser and inspect it (Right click - inspect).

Zoho - download the form

Setting up the form

Now once you have your index.html file downloaded and open, you can start editing your form in the CMS.

  1. Choose Form Method - POST.

  2. Paste your form ID link in the Form Action (you will find it in the "action=" field)

  3. In the Form Legend, add a text you want to have under the form (for example, "Fields with are required"*)

  4. Add Submit Button Text. This will be the button that appears under the form to submit the entries (eg. "Send")

Zoho Form link ID

Adding the inputs

Now you can add your inputs. You will need the inputs' names from the file you downloaded to connect CMS input with Zoho entry. Choose an input type from the input drop down list in "Add inputs".

You can find the list of possible inputs here.

In the "Field name" of each input, include the name you obtained from the index.html file (for example Name_First, Name_Last, Email... etc).

⚠️Zoho forms will only accept the values created previously in Zoho generator and with the same name as in the index.html file.⚠️

Field names Zoho

Remember to save your data and stack changes when you're done.

B2B (Fever Zone / Self Service) Form

With the Form created previously, you can start adding the fields necessary for a B2B Form.

What you need

To create a form connected to Fever Zone, you will need the partner ID link (usually looks like this: https://services.feverup.com/b2b-iam/1.0/organizations/198/businesses) and the list of inputs (data to collect) you need.

Setting up the form

Before adding your inputs, you need to set up necessary fields for the Form:

  1. Choose the Form Method - POST from the drop down list.
  2. Choose a form type to add the additional B2B form fields by clicking on "Add form type" - "B2B" .

B2B Form Type

  1. Add additional fields in the "Form Type":
  • Success text - a text that is displayed when the form submission is successful and the user is registered. This is a dynamic text - it appears under the form, only after submitting.
  • Error text - a text that is displayed when the form cannot be submitted correctly. This is a dynamic text - it appears under the form, only after submitting.
  • Success confirmation page - a link to a thank you page. It can be an internal link (/thank-you/) or external (https://domain.com/thank-you/).
  • Login texts - used to redirect the registered users to Fever Zone. You should add the login text that appears over the login button, the login CTA and the link to the Fever Zone.
  • Partner IDs - optional select list in case you need to send the form entries to various Partner IDs. By adding them, your form will have a drop down list of possible options (for example cities, events etc.) and to each of them you can assign a different partner ID link.
  1. Paste your partner ID link in the Form Action (⚠️in case you haven't added the Partner IDs in the additional fields).
  2. In the Form Legend, you need to add links to legal documents that user accepts on creating the account. It is mandatory to add this in the Form Legend. The legal documents you must include are the information about Privacy Policy and Terms of use.
  3. Add Submit Button Text. This will be the button that appears under the form to submit the entries (usually "Register").

B2B Partner ID and Legal

Adding inputs

Now you can add your inputs. Choose an input type from the input drop down list in "Add inputs".

You can find the list of possible inputs here.

Please note that for each input, the name you add in the "Field name" will be the name of the data collected in Fever Zone. Remember that the B2B form only accepts particular fields that can be found in this document.

You need to remember also:

  • B2B forms must contain 5 required fields: name, contact name, phone number, email and business types.

  • The “name” field of each input must be included in the field list that you can find here.

    It has to be identical to the one in the document, with minuscules and special characters included.

  • “Country_code” field accepts only country codes (ES, US, UK…), so keep that in mind when creating a country selector.

  • The “business_type” field can be a multi-select field or hidden field. You can add as many options as you need in the select input, but remember that the options' values must be the same as the ones in the document, with minuscules and special characters included. In the options' label you can add any text you want.

Remember to save your data and stack changes.

Input Types

Each input you add in your form has a "Field name" used to send the data with the form entry, "Label" that is displayed on the page, and "Placeholder" that is a explanatory text inside the input box. You can also add a pattern that needs to be followed for each input (only numbers, only letters etc.) and toggle if the field is required or not.

Input main fields

Please find here the available input types:

Text Input

A basic input that accepts a text line in an entry.

Email Input

An input to collect email data. In this input, you need to add an error message for when the email format is not correct (doesn't have @ character etc). In this field you can also add "Repeat email validation" that will create second email input to check if both inputs contain the same email.

Phone Input

An input to collect phone number data. You can include phone pattern to make sure the phone number is submitted in the format you need.

Number Input

An input that only accepts numerical data. In this input you can set the max and min number.

Date Input

An input with date selector. In this input you can choose the date range of available dates.

Text Area

Similar to text input, but will be shown as a text box of various lines.

Checkbox

An input with a checkbox, used for example for accepting Privacy Policy.

Radio

An input that will create a set of radio buttons (circles) with assigned values. Only one button can be selected.

Select

Similar to radio input, will create a drop down list of options with assigned values. Only one option can be selected.

Hidden input

An input used to send additional data without being shown in the form on the page. You need to assign the name and value that will be sent. You can use it for example when sending the experience name, or the experience city.