Contact Form

Updated: September 22, 2016
close

AIT Toolkit plugin is required to use this Element.

Contact Form element create the form on your page, with all inputs specified directly in the options of this element.

Provided options are:

  • Email Address – type an email address which receive the message sent from this form
  • Email Subject – type the text which will be displayed as the subject of received form
  • Email Content – type the content of received mail. To get values from inputs used in the form, use please “Name” value used for input.

    Example of email content: if your form include text field with name “sender-name“.
    Then in the field Email Content you can write text like “This message was sent by {sender-name}”.
    Placeholder {sender-name} will be replaced with the text, which visitor of your site wrote into that text field with name “sender-name”. See screenshot below which shows how to get value from input in Email Content or follow this article.

  • Success Message – message displayed when the form was successfully sent
  • Error Message – message displayed when the sending of form failed
  • Warning Message – message displayed after unsuccessful validation of form inputs

Form Inputs

  • Label Width – specify the custom width for labels
  • Captcha – decide if you want use, or you do not want use the Captcha feature.
    Captcha add into form the special field where visitor of your site must type the short string displayed on image. It prevent automated sending of spam messages through your form.
  • Captcha Label – text displayed as label for captcha
  • Captcha Text – text displayed beside captcha input, may be used as some help text for example
  • Reset Button – you may show in the form Reset Button as well, after click on this button the form inputs will be cleared.
  • Escape Form Inputs – escape special characters from values received in email. Turn option OFF if values of checkboxes, radio buttons or select are in Language which include special characters

By clicking on link “+ Add New Item” you can add new inputs to your form and specify:

  • Label – text displayed as label for input
  • Name – the unique name of input, string from this field may be used in the Email Content message in the form {name-of-input} – see an example above, please.
  • Input Type – select type of this input, available are:
    • Checkbox Horizontal – display checkboxes horizontally
    • Checkbox Vertical – display checkboxes vertically
    • Date – date input
    • Email – email input
    • Hidden – hidden input
    • Radio Horizontal – display radio buttons horizontally
    • Radio Vertical – display radio buttons vertically
    • Select – select input
    • Text – simple text input
    • Textarea – textarea input
    • URL – URL input
  • Value – value of input which will be written in the text fields when form loads. In case of input types which may include more values (checkboxes, radio buttons, select input), use semicolon separator to specify more values.

    Examples:
    checkbox 1;checkbox 2;checkbox 3; … checkbox n
    radio button 1;radio button 2;radio button 3; … radio button n
    select value 1;select value 2;select value 3; … select value n

  • Placeholder – text used in the text field as placeholder
  • Size – size of the input, available are:
    • Full Size: input over full width of contact form section
    • Half Size: input over half size of contact form section
    • Half Size – one per row: input over half size of contact form, floated inputs are displayed side by side
  • Required – input will be marked as required

Advanced options

  • Label Width – specify the custom width of form labels

Using drag&drop system you can easily change order of inputs inside contact form. Just drag and drop input to position you want.

Example of Contact Form