Creating the Sitefinity CMS Form
Start by signing into the Sitefinity backend and then navigating to the forms (2) section under the content menu (1).
Click ‘Create a form’ (1) to start a new form.
Sitefinity CMS Form Title and Web Framework
In the ‘Create form’ view give the form a title of ‘Contact Us’ (1) and in the advanced section choose ‘MVC only’ (2) and then click ‘Create and go to add content’ (3).
This will be a very simple contact us form, but once you understand the basic principles of adding elements to a form it should become clear that you can create more complicated forms if necessary.
Sitefinity CMS Form Input Fields
On the form editor view drag 2 textboxes (1), 1 paragraph texbox (2), a CAPTCHA field (3) and a submit button (4) onto the form as shown in the image below.
Edit the labels of each input field by clicking on ‘Edit’ (1) for each field.
Enter ‘Your name’ (1) for the label. You can leave Placeholder and Predefined value blank for the moment. Mark the field as ‘required’ (2) and finally add the text ‘Your name is required’ in the ‘Error message displayed if the textbox is empty’ (3) field.
Do the same for the next field except give the label a value of ‘Email’, mark it as required and set the ‘Error message displayed if the textbox is empty’ value to ‘Email is required’.
Since this is an email input field we want to make sure the user inputs a valid email address. Click the ‘Limitations’ (1) tab and select ’email’ for the ‘Type’ (2) and enter the value ‘Not a valid email address’ in the ‘Error message displayed when the entry is out of range’ (3) field.
For the ‘paragraph textbox’ simply set the label to ‘Message’, mark the field as required and provide a relevant error message if the user doesn’t enter a message.
There is no need to change the default CAPTCHA settings.
There is also no need to change any settings for the submit button.
Finally click ‘Publish’ to finish up the form.
In part 3 of this series on ‘how to create a Sitefinity CMS page’ we’ll add the form and some content to the final page.
Check out our Knowledge Sharing section for more insights into website and software development.