How To Create Your First Form With Umbraco Forms / Contour

In today’s guide, I’m going to cover the process of creating your first form using Umbraco Forms / Contour. In this guide, I’m assuming you have already installed Umbraco Forms / Contour. If you haven’t and need an overview of the process then I suggest you read, An Honest Review Of Installing Umbraco Forms / Contour For Umbraco 6

Creating A Form

In the Umbraco backend open up the Contour dashboard, by clicking on the ‘Contour’ icon.

umbraco_forms_registering_2

You can create a form straight from the dashboard

Umbraco_forms_creating_a_form

In the create section, add in the name of your form, e.g. ‘Main Contact Form’ and hit create.

Umbraco_forms_creating_a_form_1

This will take you to the form editor. This is the area where you will create and customise your form.

Umbraco_forms_creating_a_form_2

In here you can create and order fields to make up your form. A field can either be :

  • CheckBox
  • CheckBoxList
  • DatePicker
  • DropDownList
  • File upload
  • HiddenField
  • Password Field
  • RadioButtonList
  • Recaptcha
  • Textarea
  • Textfield

For each field you can add different properties to it like:

  • Caption
  • Mandatory
  • Regex
  • Invalid Error Message
  • Tooltip
  • Required Error Message
  • Enable Conditions
  • DefaultValue

Umbraco_forms_creating_a_form_3

I create a simple form with an email address, message and a captcha, like so:

Umbraco_forms_creating_a_form_4

You can preview what the form will look like, using the preview button. Before you add the form to your website you probably want to set the email address the form will be sent to. If you click the workflow button in the toolbar the workflow screen will open:

Umbraco_forms_creating_a_form_6

The default workflow will use the email adress you registered against the logged in account. If you don’t want to send an email you can also get the form to do things like:

  • Perform filtering
  • Post as xml
  • Post form to url
  • Save as file
  • Save as umbraco document
  • Send email
  • Send xslt transformed email

After you have your form set-up and the workflow to send, store, or save your file. The last customisation you might want to do is in the ‘Sections’ tab.

Umbraco_forms_creating_a_form_7

  • Disable default stylesheet
  • Mark fields as mandatory, optional fields only
  • Set the required error message
  • Set the Invalid error message
  • Show validation summary
  • Hide field validation labels

Probably the most useful option in ‘Settings’ is the option to decide where the user will be re-directed on from submission. Contour provides a lot of customisation options after you have configured your form, how you want the next step is to display it on a page.

Displaying a form on a page

Umbraco_forms_creating_a_form_8

In the backend go to the ‘Content’ section and navigate to a page you want to display a form on (NOTE: The form will need to have a TextArea)

Umbraco_forms_creating_a_form_9

In the textarea you want to display the form, in the TinyMce toolbar click the ‘Macro’ button.

Umbraco_forms_creating_a_form_10

From the ‘Add Macro’ dialog, select ‘Insert Form From Umbraco Contour’

Umbraco_forms_creating_a_form_11

From the ‘Insert Form’ dialog, select the form you created above.

Umbraco_forms_creating_a_form_12

After saving the page, you should see a preview of the form in your content area. If you click the preview button you should now see the form appear on your site ready for testing:

Umbraco_forms_creating_a_form_13

My website obviously needs styling, but the steps above show how versatile and easy it is to start displaying Umbraco forms onto your website.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

1 reply

Trackbacks & Pingbacks

  1. […] Installing Contour was a lot more complicated than it needed to me. Once it was installed however, it did do everything the client required. Setting up new forms customising them and getting an email send out on form submission was very easy. As this post is getting quite long I’ve written the step-by-step guide about how to create a new form in this post, How To Create Your First Form With Umbraco Forms / Contour […]

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *