Nibble

Create/Update COntour forms code first

Another result of freedom Fridays at the Umbraco HQ, an addon for Umbraco Contour the official form builder that will allow you to create/update forms from code.

It’s heavily inspired by uSiteBuilder (they did all the hard work).

With this add-on you will be able to design your Contour forms from visual studio, here is a simple example:

   public enum FormPages
    {
        Contact
    }
 
    public enum FormFieldsets
    {
        Details
    }
 
    [Form("Another Contact Form", MessageOnSubmit = "Thank you")]
    public class AnotherContactForm : FormBase
    {
        [Field(FormPages.Contact, FormFieldsets.Details,
           Mandatory = true)]
        public string Name { get; set; }
 
        [Field(FormPages.Contact, FormFieldsets.Details,
            Mandatory = true)]
        public string Email { get; set; }
 
        [Field(FormPages.Contact, FormFieldsets.Details,
           Mandatory = true,
           Type = typeof(Umbraco.Forms.Core.Providers.FieldTypes.Textarea))]
        public string Message { get; set; }
 
    }

This code will result in the following form

image

It’s also possible to attach third party functionality either by attaching workflows from code

        public override List<WorkflowBase> Workflows
        {
            get
            {
                return new List<WorkflowBase> {
                        new Email()
                    };
            }
        }

With the email class being as follows

    [Workflow("Send Email",FormState.Submitted)]
    public class Email: WorkflowBase
    {
 
        public override WorkflowType Type
        {
            get
            {
                return new Umbraco.Forms.Core.Providers.WorkflowTypes.SendEmail
                    {
                        Email = "test@test.com",
                        Subject = "the form Contact Form was submitted",
                        Message = "the form Contact Form was submitted, " +
                                    "this is the list of values it contained, " +
                                    "you can turn this email off under workflows in Umbraco Contour"
                    };
            }
        }
    }

Or by overriding the submit method (form class properties will be populated with the record values Smile )

        public override void Submit()
        {
            
            umbraco.library.SendMail(
                Email,
                "me@company.com",
                "New Contact",
                string.Format("New message from {0} : {1}",Name,Message),
                false);
        }

The main advantages of this code first approach is that forms and workflows can be source controlled, support for unit testing, support for automated deployments, easy form maintenance through code…

The add-ons and some example forms are available on the project page at our.umbraco.org

Full sourcecode is available here

For a quick demo watch:

4 Comments so far

  1. Vincent on January 28th, 2013

    it is very clear and help me a lot on my job

  2. Mansoor on June 18th, 2013

    This is a good example:)

  3. Nick on August 29th, 2013

    FYI, I was getting a null reference exception until I specified the “SenderEmail” property (setting just “Email” didn’t seem to be sufficient).

  4. Erika Danis on March 19th, 2014

    How can add my own data source to your example? So when the form is submitted the data gets saved into my own table, instead of the default contour UF tables?

Leave a Reply