Adding form elements
While in 'All properties' on the block where you have started to create the form, choose 'Edit' on the form.
You are now able to drag-and-drop the elements from the form gadget in the right column.
Each of the elements could be re-organized and edited. I will give a short explanation of the most important elements, but please test and experiment.
Text box is the work horse of any form, used for name, mail-adress and other types of input. Here is how the element is edited:
- Name is what is displayed within Episerver.
- Label text is what is shown to the user to describe the field.
- Check off Required if you don't want the information in the form unless the field has information. An error message will appear if that isn't the case.
- Email checks that the information in on the format email@example.com. If not, the user will get an error message and the form will not be completed.
- I don't recommend using any other validators.
- Placeholder text will be displayed until the user replaces it.
- Eloqua HTML Field Name is mapping up the form in Eloqua.
- AutoFill Mapping key is not in use yet.
You should only use this if you want the user to input a larger amount of text. This is a text box where you are able to input several lines.
This element is both check boxes and radio buttons. If you says that the form should 'Allow multiple choices', it will be check boxes. If not, you will get radio buttons.
You add items with the +-button. Each items could be edited in a similar way to a block.
You only need to edit the text here. Where to send the data is set up with the Eloqua Mapper.
This is a new element that makes it possible to create forms with several steps. You should do some thinking and testing to make sure that this would help the conversion process. Please be aware that A/B-testing has shown that several steps in a form could increase and decrease conversion rate. It very much depends on the context.
Put element form step between the element where you want to split up the form.
On the setting tab, you could create more advanced steps. You could jump to another page and only trigger the next steps under certain conditions.