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.

submit to reddit

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

Back to top