After the previous post on contour and members I got several requests asking how you could use contour for a registration form so here are the details. I make use of some additional fieldtypes and workflow types so to make it easy to get started I also packaged those up (download details at the bottom). The package will add some extensions to contour that make it possible to create registration and profile forms.

Overview of what it will add:

• Member Login fieldtype
• Compare textbox fieldtype
• Add member to membergroup workflow type
• Save as umbraco member workflow type
• Update umbraco member workflow type

Setting up a registration form

The registration form will be creating umbraco members so first make sure you have a member type. In this example I’ll be using a member type with 2 custom properties, first name and last name but it’s of course possible to add more …

Once the member type is setup we’ll create a registration form in Contour. Making use of the 2 additional field types.

The email address will be used as a unique identifier for our members (and also as the loginname). So the type of the email address field is set to ‘Member Login’.

The type of the password field is set to ‘Compare textbox’

Both fields are also set to mandatory.

Once the registration form is designed we’ll need to attach the workflow that will perform the actual registration. The type is called ‘Save as umbraco member’

The workflow has 3 settings, the member type of the member that will be created, an optional membergroup to add the member to and an option to immediately login the member after registation.

Once a membertype has been chosen it’s possible to map the properties of the type to the fields on the form. Name, login and email are all set the the email field since the email will be used as the unique identifier.

If you also want to add the newly created member to a group it’s possible by setting the membergroup setting.

It’s also possible to directly login the member after registration

You can then add other workflows that sends an email to the site administator, a welcome email to the new member….

Once the registration form is submitted a new member is created with the supplied details

The Member Login field type also makes sure that the login (email) is unique. It uses a little bit if jQuery for it so make sure jQuery is available where you place the registration form. If you enter an email address that is already in use you’ll get notified. This check also occurs when the form is submitted so it’s not possible to end up with duplicate emails.

Setting up an edit profile form

To create the profile form we’ll make use of the bracket syntax to fill the fields with member values and again use a workflow to update the member. This is already outlined in a previous post: Contour forms and umbraco members

Going further

To get a login form, logout button you can simply make use of the standard .net login controls. And with the public access dialog you can setup role based protection. Details on how to do that can be found in the members umbraco.tv tutorial 

Download

The Contour member tools Package is available on the project page on our.umbraco.org . Make sure to be running at least version 1.1.9 of Umbraco Contour.

Contour 1.1.9 has just been shipped. It’s a minor release, but it adds a nifty little feature making it super easy to work with member data. Default values and workflow settings bracket syntax has now been updated to support member values.

Member values as default field values

Say that you have a comment form on your website with the standard fields (name, email, website and comment).

In the case when an Umbraco member is currently logged in and you want to pre-populate the name and email fields with the values from the logged in member, it’s now just a matter of setting the default value using the bracket syntax.

You can access: member.id, member.loginname, member.email and for custom properties simply use the alias member.customalias.

Full details on the syntax can be found in the Contour developer documentation.

Member values in workflow settings

Of course it’s also possible to use this syntax in workflow settings. For example, sending an email to the current member when a form has been submitted, just set the email setting to {member.email}

Member profile editor

Combine the default values with a workflow that will update the member details and you have a member profile editor.

Let’s start with a simple member type with just a single property with the alias custom.

I want the members to be able to edit their email and the value for the custom property so I’ll create a form with 2 fields (email address and custom property).

The default value of the email field has been set to {member.email}

And the one for custom property has been set to {member.custom}

So now if I request the form when I’m logged in as an Umbraco member, the fields should be populated with the current member values.

The next step is to make sure the member values get updated when the form is submitted. This can be done with a workflow (workflow is part of the contour strikes again project).

The workflow simply maps the member type properties to the contour form fields. When the form is submitted the member properties will be updated. Once this is in place you have a working profile editor.

Make sure you have at least Contour version 1.1.9 in order to use these features. Install and upgrade instructions can be found on the contour project page.