Nibble

Custom markup on your contour forms

The last couple of months I’ve been working on the v5 port of Umbraco’s official form builder Contour, today the RC version is out and it won’t be long now before the actual release.

A big plus compared to the v4 webforms version is that it’s possible to have complete control of the form markup that Contour will generate (a much requested feature that was super easy to add due to the move to the MVC framework).

To try this I downloaded a website template that contains a contact form, the contact form page looks like this:

StaticTemplate

You can check out the html here . As you’ll see the form html is pretty simple and different to what Contour normally generates but now you are able to mimic this with Contour.

Step 1: Creating the form

Of course you’ll need to install Contour first and then create a form that has the fields you want (in this case that’s name, email, subject and message).

CreateForm

Step 2; Replacing the static html with the Contour form

If I then place the Contour macro in place of the static form markup I get the following result

ContourFormWithDefaultMarkupAndStylesheet

Because the form markup generated by Contour is different from the form html in the template I get a strange result. Of course you could add additional css rules to make it look the same but I want to output the same html as the static html template

Step 3: Customizing the form markup

As outlined in the RC blogpost you can either choose to customize all your forms at once or you can do this for a specific form.

Do customize it for a single form we need to know the form id, the id is available on the settings tab of the form designer.

FormId

Now in order to control the generated html we’ll need to create the folder:

~/App_Plugins/Packages/Contour/Views/Forms/2f2d7355-2a0d-416e-b36f-99d331b163cf/

2f2d7355-2a0d-416e-b36f-99d331b163cf being the form id

There we’ll copy the default form view from

~/\App_Plugins\Packages\Contour\Views\MacroPartials\ContourForm.cshtml

to

~/App_Plugins/Packages/Contour/Views/Forms/2f2d7355-2a0d-416e-b36f-99d331b163cf/ContourForm.cshtml

This shouldn’t result in any changes yet but if you now make changes to the ContourForm.cshtml view you’ll notice these in the output.

If you then want to make changes to a specific fieldtype it’s just a mather of copying the default views to the form directory and making your changes…

CopyFieldTypeViews

End result

Once the changes have been made I’m outputting the same html,my form is styled correctly and I have a working form!

EndResult

To give this a try go test the Contour v2.0 RC

UPDATE
If you want to take a look at the customized views you can download them here:
http://dl.dropbox.com/u/886345/UpdatedViews.zip

9 Comments so far

  1. Jeroen Breuer on April 4th, 2012

    Could you also show how the code in ContourForm.cshtml looks like after you edited it? That would be the example more complete :-). Thanks

  2. Tim Geyssens on April 4th, 2012

    Sure, here are the updated view
    http://dl.dropbox.com/u/886345/UpdatedViews.zip

  3. Jeroen Breuer on April 4th, 2012

    Thanks for that! http://h5yr.com/

    Contour and MVC are still pretty new for me. Could you please add some comments in your .cshtml files so I can understand them better?

  4. Tim Geyssens on April 5th, 2012

    @Jeroen sure will update those with some comments

  5. Rodney on January 15th, 2013

    The files are now found in /umbraco/plugins/umbracoContour/Views in Umbraco 4.11 & Contour 3

  6. Paul F on January 27th, 2014

    If ContourForms.cshtml doesn’t work try Forms.cshtml instead

  7. Paul F on January 27th, 2014

    or just Form.cshtml

  8. Margarita on July 11th, 2014

    This works with umbraco 4.7?

    I have installed umbraco 4.7 and contour 1.1.13.2 and I want to change the html of the forms that I have created. I can do upgrading to version 3.x of contour?

  9. Michael Lykke on July 31st, 2014

    @Margarita: yes, you can make this work in Umbraco 4.7. I just recently upgraded Contour to 3.0.6 (which is the newest version that will run on 4.7) on a 4.7 version of Umbraco. Of course you need to follow the installation instructions and update your form to use the new MvcRenderContourForm macro.

    Read more and download here:
    http://our.umbraco.org/projects/umbraco-pro/contour

    If you encounter any problems, please post questions at the forum:
    http://our.umbraco.org/forum/umbraco-pro/contour

Leave a Reply