This module enables non technical users to create and edit forms. The forms can be inserted into any HTML field using the insert object button in the toolbar of the HTML editor.
Form definition
The forms are defined in the forms module:
![forms_module forms_module](/forms2?iid=24512&pid=WebnodesDeveloper-DeveloperArticle-Files.Native-InnerFile-File&r_n_d=624101_&adjust=1&x=369&from=0&bgc=000000000)
The first time you go to the module, there is only one button. "New webform":
![forms_module2 forms_module2](/forms2?iid=24513&pid=WebnodesDeveloper-DeveloperArticle-Files.Native-InnerFile-File&r_n_d=624101_&adjust=1&x=528&from=0&bgc=000000000&y=621)
When you add a new form, you're shown the following screen:
![forms_module_new_form forms_module_new_form](/forms2?iid=24514&pid=WebnodesDeveloper-DeveloperArticle-Files.Native-InnerFile-File&r_n_d=624101_&adjust=1&x=541&from=0&bgc=000000000)
Form settings
There are a lot of settings for the forms you define. From behaviour to how it looks; almost everything can be customized. The settings are split into different categories (tabs):
- The "Web form" tab contains the basic settings and confirmation and notification settings.
- The Settings tab contains a lot of detailed information on how to render the html.
- The Templates tab contains the template code used to render the form. These templates can be overridden to get your desired look and functionality.
- The Definitions tab contains the field definitions of the form.
Fields
There are a number of different field types you can create when you have defined a form.
If you switch to the "Fields" tab:
![forms_module_new_form2 forms_module_new_form2](/forms2?iid=24515&pid=WebnodesDeveloper-DeveloperArticle-Files.Native-InnerFile-File&r_n_d=624101_&adjust=1&x=531&from=0&bgc=000000000)
Click on the "Add new form field" button to add a new field. You get a dialog where you have to choose the field type. The types available are:
![form_field form_field](/forms2?iid=24516&pid=WebnodesDeveloper-DeveloperArticle-Files.Native-InnerFile-File&r_n_d=624101_)
If you select the "Text box" field type, you get the following:
![form_field2 form_field2](/forms2?iid=24517&pid=WebnodesDeveloper-DeveloperArticle-Files.Native-InnerFile-File&r_n_d=624101_)
When you create new fields, they are listed on the left:
![form_field4 form_field4](/forms2?iid=24519&pid=WebnodesDeveloper-DeveloperArticle-Files.Native-InnerFile-File&r_n_d=624101_&adjust=1&x=515&from=0&bgc=000000000)
Preview
When you open a form, you can click the preview icon on the blade to preview and test your form without publishing it on any pages. Note that the styling and look might be different than what you'll see in a real web page, due to the fact that different css rules may apply to the fields. The preview is very plain.
![form_preview form_preview](/forms2?iid=24520&pid=WebnodesDeveloper-DeveloperArticle-Files.Native-InnerFile-File&r_n_d=624101_&adjust=1&x=581&from=0&bgc=000000000)
Inbox
The inbox displays the submissions of the current form. This is a copy of the content sent in an email to the notification email addresses.
![forms_inbox forms_inbox](/forms2?iid=24521&pid=WebnodesDeveloper-DeveloperArticle-Files.Native-InnerFile-File&r_n_d=624101_&adjust=1&x=585&from=0&bgc=000000000)
You can click on any of the submissions to read them:
![forms_inbox2 forms_inbox2](/forms2?iid=24522&pid=WebnodesDeveloper-DeveloperArticle-Files.Native-InnerFile-File&r_n_d=624101_&adjust=1&x=677&from=0&bgc=000000000)
Using forms
Forms can be used inside the html editor in Relatude, and the forms can be rendered inside content without any programming required:
- First, click on the "Insert or edit object" button in the editor:
![forms_editor_insert forms_editor_insert](/forms2?iid=24523&pid=WebnodesDeveloper-DeveloperArticle-Files.Native-InnerFile-File&r_n_d=624101_)
- In the dialog that opens, select the "Form" button:
![forms_editor_insert2 forms_editor_insert2](/forms2?iid=24524&pid=WebnodesDeveloper-DeveloperArticle-Files.Native-InnerFile-File&r_n_d=624101_)
- That opens a dialog that lists all the forms in the current site. Select the one you want to show:
![forms_editor_insert3 forms_editor_insert3](/forms2?iid=24525&pid=WebnodesDeveloper-DeveloperArticle-Files.Native-InnerFile-File&r_n_d=624101_)
- The inserted forms is rendered as a placeholder. The placeholder makes it easy to move the form around in the text content:
![forms_editor_insert4 forms_editor_insert4](/forms2?iid=24526&pid=WebnodesDeveloper-DeveloperArticle-Files.Native-InnerFile-File&r_n_d=624101_)
For the visitor, the inserted form can look something like this:
![insert5 insert5insert5insert5](/forms2?iid=16919&pid=WebnodesDeveloper-DeveloperArticle-Files.Native-InnerFile-File&r_n_d=624101_&adjust=1&x=598&y=240&ox=10&oy=1&from=0&z=102.4315&format=jpg&bgc=000000000&zmode=fill)
Rendering forms programmatically
The most common way of using forms have traditionally been to insert the forms in the editor. But with the popularity of modular page architecture, many new sites are composing pages using modules. On those situations, it is common to create a "Forms module", with a node parent relation on the module where you can select a form. In the code that renders the module, you can do the following to render a form:
WebForm form = module.Form.Get();
string formHtml = form.GetFormHtml(httpContext.Request.Params);