Form Editor works just like any other property editor for Umbraco, so installation is pretty straight forward.
First and foremost grab the Form Editor package from the latest release (it's the zip file attached to the release) and install it in the Developer section of your Umbraco site.
Or, if you're using NuGet, you can install the Form Editor NuGet package.
Once the package is installed, go ahead and create a Form Editor data type.
In the "Row layouts" section of the configuration you'll set up the row layouts you want available for your editors. A row layout consists of:
- A name and an icon, so the editors can tell the row layouts apart.
- An alias, so you can identify the row layout when rendering the form.
- Some cells that the editors can add form fields to. A cell in turn consists of:
- An alias, so you can identify the cell when rendering the form.
- The width of the cell (in percent of the total row width) when rendered in the Form Editor. Within a row layout, the sum of all cell widths must equal 100.
Form Editor ships with a bunch of row icons, but if you run out of icons you can add more simply by dumping them in /App_Plugins/FormEditor/editor/rows/.
By default, Form Editor will suggest Bootstrap style .col-md-* classes as cell aliases, mainly because the sample templates shipped with Form Editor use Bootstrap to render the form grid. But Form Editor is not tied to Bootstrap in any way. You have complete control over the form rendering, so just use whatever cell alias that makes sense.
Form Editor ships with a bunch of field types (textbox, email, select box etc.). By default they are all listed in alphabetical order when the editors add a new field to a form. You can change this by grouping the available field types into field type groups, which is a great way to help your editors find the field types they need.
Don't want your editors adding certain field types to their forms? No problem. Just don't add these field types to any of the field type groups.
Form Editor supports two different types of emails - notification emails (sent to specific recipients of the editor's choosing) and confirmation emails (sent to the end users when submitting the form).
You can choose separate email templates for notification and confirmation emails, or leave them blank if you don't want to support one or both types of emails. See Email templates for more info.
Form Editor uses the mail settings configured in the <mailSettings> section of web.config for sending emails.
Tip: If you don't have a mail server available for testing your email templates, you can write the emails to disk by using specifiedPickupDirectory as delivery method in the <smtp> configuration:
<mailSettings>
<smtp from="[email protected]" deliveryMethod="specifiedPickupDirectory">
<network host="127.0.0.1" userName="username" password="password" />
<specifiedPickupDirectory pickupDirectoryLocation="[absolute path to a folder under App_Data]" />
</smtp>
</mailSettings>There are a lot of options with Form Editor, some of which you might not use or want your editors to be concerned with. These options are grouped in tabs within the property editor. You can decide the order of these tabs as well as disable the tabs you don't want available to your editors.
If your editors need to approve form submissions (e.g. for moderating comments), you can enable submission approval. This adds a little checkmark next to each submission, which the editors can click to approve the submission.
Form Editor can send form data automatically to an external web service upon a successful form submission. Read more about this here.
If you feel the need to style Form Editor differently, specify the path to your custom style sheet here and it will be loaded whenever a Form Editor property loads. The path must be from the root of your site.
Hopefully the rest of the Form Editor data type configuration is self explanatory. Oh, and it's highly recommended to tick the "Hide label" checkbox to give the Form Editor property as much space as possible.
When you have configured the data type, create a content type (or reuse an existing) and add a property based on the new Form Editor data type. If you're going to use the templates and views shipped with Form Editor for rendering (see Rendering the form), make sure the Form Editor property has the property alias "form".
Since the Form Editor data type takes up a lot of space in the UI, you should consider placing the property on a separate tab - e.g. "Form".
Please note: You can only have one Form Editor property per content type.
Please also note: Due to backwards compatibility issues, you cannot put the Form Editor property in a content type composition. At least not for the time being.
When exporting form submissions to CSV, Form Editor uses a semicolon as field delimiter by default - for some reason this sits better with MS Excel that commas do. If you'd rather use another delimiter, you can configure this in /Config/FormEditor.config:
<FormEditor>
<!-- this sets the column delimiter for CSV export to comma instead of semicolon -->
<CsvExport delimiter="," />
</FormEditor>In the light of the GDPR and its call for controlling "Data retention periods", you can let the editors specify a maximum lifetime of the form submissions for each individual form. This option is automatically added to the Submissions tab, as soon as you have set up the authentication of scheduled jobs in the Form Editor configuration file:
Designed specifically to help with GDPR compliance, the "Global search" dashboard is installed into the developer section (both when installing with NuGet and with the Umbraco package). In case you loose this configuration, here's the XML you'll need to add to dashboard.config to bring it back again:
<section alias="FormEditorDashboardSection">
<areas>
<area>developer</area>
</areas>
<tab caption="Form Editor global search">
<control>
/App_Plugins/FormEditor/dashboard/dashboard.html
</control>
</tab>
</section>Onwards to Rendering the form.