Form conventions

This guide gets you started with form conventions

Once they are on a page, forms should be in an 8 column grid. When they are initially created and linked to a page, forms are in a 12 column grid.

To change the grid size of a form, open the page that form is pointed to in Experience editor. In an appropriate placeholder, insert a grid component. (Select Insert components>Rendering>Building blocks>Grids>Numeric grids>8).

You can either point your grid to an existing one or create a new one.

Once the grid is in place, you can move your form to the grid. To do this, Click on the form and select ‘move component’.

You will then be presented with a list of options to move the form to, at which point you can select the 8 column grid you have just inserted.

Item names

There are a few item naming conventions to be wary of when creating a form:

  1. Don’t use spaces in the item
  2. Don’t use special characters
  3. Shorten the phrase/question of the field title. E.g. If the field question is ‘Tell us your favourite chocolate’ the item name could be ‘FavouriteChocolate’
Field keys

Field keys are extremely important to pass through information once a form is submitted.

Each field in a form should always contain a field key.

Field keys should always be unique. The only exception to this is when using hidden fields to pass through information. See the guide on Integration for more information on that. In this situation, it is possible to have hidden fields with the same field keys (e.g. serviceCategory). However, it is important to note these must be conditional on different options within the form. Whilst it is possible to build a form with fields using the same field key, it is not possible to submit a form if two fields have the same field key. So, if fields are built with the same field key they must always be conditional on two separate options within the form, which will never appear at the same time.

Field key names should not contain special characters.

Field keys should match the parameters in the C4C API for integration purposes. See the guide on Integration for more information on that.