FormsΒΆ

Forms are used to get and process user input on the frontend. You can manage them (add, edit, and delete) from the backend using the Content/Forms section:

../../_images/113.png

Each form has code and localized name. The Produce completed forms checkbox allows to specify whether you want completed forms to be created each time user fills the form. You can review completed forms (user input) from the backend any time if they are created.

C# class name field allows you to specify the implementation of the IFormHandler interface that will handle the user input for this form. There is the only one built-in implementation of this interface: the EmailFormHandler class. It sends the user input to the specified recipients by the email. You can write your own implementations of this interface. For example, you can have form handler that creates objects using the user input and Platformus object mappers.

Each form handler can have different (specified by the developer) parameters, which use different parameter editors. Parameter editors might be created by the developer too. (The built-in form handler has two parameters: Recipient emails and Redirect URL.)

../../_images/211.png

Forms consist of fields. There are different types of fields (and you can add your own ones). Each field has type, localized name, and position. Position might be used to sort the fields in the correct order:

../../_images/38.png

Also, fields have validation parameters.

After form is created, you can display it on the frontend using the built-in FormViewComponent class like this (the form code is passed as the parameter to identify the form we want to display):

@await Component.InvokeAsync("Form", new { code = "Feedback", additionalCssClass = "master-detail__form" })

As you can see, an additional CSS class might be applied using the corresponding optional parameter.

The form will be displayed using the built-in views (_Form and _Field). The HTML elements have unique CSS classes (the BEM methodology is used), so it is easy to apply styles to them:

<form class="form" action="/en/forms/send" enctype="multipart/form-data" method="post" novalidate="novalidate">
  <input name="formId" id="formId" type="hidden" value="1">
    <div class="form__field field">
      <label class="field__label label" for="field1">Your name</label>
      <input name="field1" class="field__text-box text-box" id="field1" type="text" maxlength="64" data-val-required="" data-val-maxlength-max="64" data-val="true">
    </div>
    <div class="form__field field">
      <label class="field__label label" for="field2">Your email</label>
      <input name="field2" class="field__text-box text-box" id="field2" type="text" maxlength="64" data-val-required="" data-val-maxlength-max="64" data-val="true">
    </div>
    <div class="form__field field">
      <label class="field__label label" for="field3">Your message</label>
      <textarea name="field3" class="field__text-area text-area" id="field3" maxlength="1024" data-val-required="" data-val-maxlength-max="1024" data-val="true"></textarea>
    </div>
  <div class="form__buttons buttons">
    <button class="buttons__button button" type="submit">Send</button>
  </div>
</form>

If you want to change the HTML, just copy the views into your project and they will be used instead of the built-in ones, so you will be able to modify them as you want.