In the previous post ‘how to create a Sitefinity CMS page – part 1‘ we started by creating a simple Sitefinity CMS ‘Contact Us’ page that had the following basic properties:

  1. A page name of Contact Us
  2. A URL in the form of ‘/contact-us’
  3. A Bootstrap template using two equal width columns
  4. We added a navigation widget to the page and published it

In this post we’ll create a form that can be used by the user to submit details to make contact with us.

Progress Sitefinity Logo

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).

Sitefinity CMS - Create page - create form menu

Click ‘Create a form’ (1) to start a new form.

Sitefinity CMS - Create page - 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).

Sitefinity CMS - Create page - form name

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.

Sitefinity CMS - Create page - new form fields

Edit the labels of each input field by clicking on ‘Edit’ (1) for each field.

Sitefinity CMS - Create page - new form field labels

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.

Sitefinity CMS - Create page - new form edit input labels

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.

Sitefinity CMS - Create page - new form email 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.