Nibble

Contour member tools

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 …

image

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

image

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’.

image

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

image

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’

image

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.

image

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

image

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

image

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

image

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

image

image

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.

image

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.

53 Comments so far

  1. Dave Lane on August 24th, 2011

    Fantastic! Just what I was looking for, and just in time! Thank you very much

  2. Fuji Kusaka on August 25th, 2011

    I tried making the registration form and it worked perfectly. But cant get my login to work and getting server errors. Getting the same error message whenenver i change the password of the registered member in the member section itself. Any thought why ?

  3. Fuji Kusaka on August 26th, 2011

    Hi Tim, Just to tell you that i got it working. I changed the Mapping of my Name Field to FirstName instead of Email.

  4. Rasmus on September 1st, 2011

    I don’t get the ‘Member Login’ type when creating fields.

    I have setup members allready, and I can log in with them.

  5. Brian on September 9th, 2011

    Hi Tim,
    This thanks for all your great work! I wired this up and went to add the workflow. When I select ‘add member to member group’, it is only giving me the ‘membergroup’ option and nothing else. When I select my member group, nothing happens. I tried submitting the form to watch for specific errors and was not able to see anything. It also (obviously) did not add the member.

    Any thoughts?
    Best,
    Brian

  6. Brian on September 9th, 2011

    … Never mind. It’s been a long day. Works wonderfully, I just didn’t read the instructions (as usual)

  7. Fuji Kusaka on September 12th, 2011

    Hi Tim, Again me!!!

    I just noticed that when adding my registration form to my RTE, one of my Javascript stop working. I have a javascript accordion that stops working only with the registration form but not the contact form.

    Fuji

  8. Harm on September 15th, 2011

    Excellent package and post!

    Is there a way to change the “username already in use” alertbox text? A dictionary item perhaps?

  9. Chuck on October 3rd, 2011

    Tim,

    How do you prevent a member from becoming active right away? My client would like to approve members before they are allowed to log in.

  10. Fuji on October 12th, 2011

    Tim am losing all the data when using the Prevalue Sources and running under a licenced Contour v1.19.

    Any suggestion how to fix this?….i have a list of 100 Countries and using this in 4 different forms.

  11. Dave Lane on October 12th, 2011

    Great post, Tim. Thank you!

    Is there a way to obscure the passwords in the compare datatype?

    Cheers,
    Dave

  12. Dave Lane on October 12th, 2011

    @Chuck: All you have to do is set the form in Contour to require manual approval (check under the “Settings” tab for that form).

    Then, in the list of Entries your client can select as many of the “submitted” entries as s/he wants and then there is the ability to “Approve” them (or delete them, for that matter).

  13. Joshua Stewart on October 13th, 2011

    Awesome post, Tim. Thank you for creating this.

    Would it be possible for you to post the source code for the project so that users can modify the fieldtypes and see how everything works at the code level?

    Thanks again.

    Regards,

    Josh

  14. Tim Geyssens on October 13th, 2011

    @Josh, yup I’ll post the code on codeplex in on of the next days

  15. Joshua Stewart on October 14th, 2011

    @Tim, Thanks! Greatly appreciate it. This is one of the many reasons Umbraco is so awesome.

  16. Tim Geyssens on October 14th, 2011
  17. Fuji Kusaka on October 14th, 2011

    @Tim, i have some issues with Contour when dealing with Prevalue Sources and File Upload. Can you please advise? http://our.umbraco.org/forum/umbraco-pro/contour/24867-File-Upload-in-Contour-119?p=0#comment92468

  18. Anthony on December 28th, 2011

    Hi Tim,

    Is it also possible to save as a certain member type based on a question?

    For example, I have to two member types: jobseeker membertype and employer member type

    If the user chose ‘I’m looking for a job’ as an option in the dropdownlist question he should be saved as a ‘jobcandidate’ member type

    I the user chose ‘I’m looking for a jobcandidate’ as an option in the dropdownlist question, he should be saved as a ‘employer’ member type.

    Thanks for your advice,
    Anthony

  19. Jason Mitchell on January 3rd, 2012

    Anthony,

    You can always edit the AddMemberToMemberGroup.cs and customize the WorkflowType with your own logic. Specifically I’m speaking about the Execute(Record record, RecordEventArgs e) method. I’m sure there may be better ideas but this is the quickest I could come up with.

    Pseudo-code but should give you an idea:
    public override Umbraco.Forms.Core.Enums.WorkflowExecutionStatus Execute(Record record, RecordEventArgs e)
    {
    var ss = new SettingsStorage();
    string mId = ss.GetSetting(record.Id, “SaveAsUmbracoMemberCreatedMemberID”);

    int id = 0;
    int gid = 0;

    if (int.TryParse(mId, out id))
    {
    // iterate through the record object to determine which group it should be pointing to
    var rfield = record.GetRecordField(”Field_Guid_Here”);

    if (rfield.ValuesAsString() == “Seeker Choice”)
    gid = int.Parse(SeekerGroup);
    else if (rfield.ValuesAsString() == “Employer Choice”)
    gid = int.Parse(EmployerGroup);

    var m = new Member(id);
    m.AddGroup(gid);
    }

    return Umbraco.Forms.Core.Enums.WorkflowExecutionStatus.Completed;
    }

  20. Jason Mitchell on January 3rd, 2012

    Also, forgot two properties…
    [Setting(”Jobseeker Group”,
    description = “Membergroup to add”,
    control = “Umbraco.Forms.Core.FieldSetting.Pickers.MemberGroup”)]
    public string SeekerGroup { get; set; }

    [Setting(”Employer Group”,
    description = “Membergroup to add”,
    control = “Umbraco.Forms.Core.FieldSetting.Pickers.MemberGroup”)]
    public string EmployerGroup { get; set; }

  21. Morten Balle on February 9th, 2012

    Hi Tim

    Thanks for your inspiring work.
    I have an old site running Umbraco version 4.0.2.1.

    Tried to install your membertools, and they install fine. However, no member will be saved.

    Do you by any chance know if it’s version-dependant, so it will not run properly on Umb v. 4.0.2.1

    Best,
    Morten

  22. Tim Geyssens on February 10th, 2012

    Hey Morten well I haven’t tested it with that version of umbraco but what you could do is download the source of the workflow and replace the references with the ones from the version you are running and see if it gives any errors

  23. bob baty-barr on March 4th, 2012

    Tim, is there a way for the password to be random, like when creating members via the umbraco backend? please let me know.

  24. Giovanni Sidoel on May 18th, 2012

    Hi Tim,

    First of all, great package!
    Now down to the question: Is it possible to make the compare textbox a compare paswword type?
    Because as it is the password is typed in plain text.

    Appreciate the help.

  25. Giovanni Sidoel on May 20th, 2012

    NVM, fixed it myself from the source. Can I upload the new dll somewhere so others can use it with the password textmode out-of-the-box?

  26. Janet Kirklen on July 13th, 2012

    This is just what I need. Is there are version of this for 4.7.2?

  27. Riley on September 11th, 2012

    Does your blоg havе a contact page? I’m having problems locating it but, I’d like to send уоu an emаil.
    I’ve got some suggestions for your blog you might be interested in hearing. Either way, great site and I look forward to seeing it improve over time.

  28. Mozelle on September 13th, 2012

    Excellent Articlе, it is fаntastic to аt last finԁ rеadаble wгitіng on the internet, I am rеally grаtеful tо discover а blog thаt
    is not full of the eνerydaу drοѕs,
    thanκ yоu.

  29. online casino on December 3rd, 2012

    I’m amazed, I must say. Seldom do I encounter a blog that’s both
    educative and amusing, and without a doubt, you have hit
    the nail on the head. The problem is an issue that not enough men
    and women are speaking intelligently about.

    I am very happy that I came across this in my search for something concerning
    this.

  30. Brittany on December 3rd, 2012

    Verу shoгtly this web ρage will
    be famοus among all blogging аnd ѕite-buіlding
    viewеrs, due to it’s pleasant content

  31. Jon Singer on December 17th, 2012

    @Rasmus I had this same problem. Turns out one of the download links is WRONG even though the .zip says the right name! Try downloading from the “Package Files” section on the bottom left of here: http://our.umbraco.org/projects/developer-tools/contour-member-tools

  32. Harm on January 22nd, 2013

    Hi Tim,

    I’m trying to get this to work for a registrationform on Contour 3.0.6 and Umbraco 4.11.3. It works fine when i insert it as a Usercontrol but not as Razor (i want to use conditional fields). Then it shows this error:

    The partial view ‘/umbraco/plugins/umbracoContour/Views/Fieldtype.memberlogin.cshtml’ was not found or no view engine supports the searched locations. The following locations were searched: /umbraco/plugins/umbracoContour/Views/Fieldtype.memberlogin.cshtml

    Is there anything i can do to make it work? Maybe with the source you provided in the comments above?

    Cheers,
    Harm

  33. Harm on January 25th, 2013

    In response to my own reply shown above, for anyone interested.

    I fixed this by copying FieldType.Textfield.cshtml, renaming it to Fieldtype.memberlogin.cshtml and adding “memberlogin” to the input class. The jQuery scripting for checking the uniqueness of the emailadress can be found in the file “uniqueMemberLogin.js” in the source provided by Tim in the comments above.

    Cheers,
    Harm

  34. Jon Singer on January 29th, 2013

    Upon login attempt, I am continuously getting “Server Error in ‘/’ Application. An item with the same key has already been added.” anyone have an idea why? Pretty sure it should be a successful login. Thank you!

  35. Ankit Agrawal on January 30th, 2014

    getting following error when i uploaded this package to umbraco 6.1.6,
    any ideas to work for it
    Could not load file or assembly ‘Umbraco.Forms.Core, Version=1.1.0.25390, Culture=neutral, PublicKeyToken=null’ or one of its dependencies. The system cannot find the file specified.

  36. Tim Geyssens on January 31st, 2014

    @Ankit you need Contour, so first install that :)

  37. Torleif on August 20th, 2014

    Hi Tim!
    Both the member login fieldtype and the compare textbox fieldtype is missing when i install the Contour member tools package on Umbraco 7.1.4 and Contour 3.0.21.

    Do you have any idea what might cause this?

    Cheers,
    Torleif

  38. Tim Geyssens on August 20th, 2014

    @Torleif, it’s because the fieldtypes are webcontrols only, old project that needs to be updated. Are you sure they don’t appear in the list since some have made it work by adding the views themselves

  39. Torleif on August 21st, 2014

    Ah okey :)
    The field types appear in back office when I setup the form but the field types do not appear in my project, so yes I probably have to add them myself if I want to use this package. I’m using the examples from umbraco/PartialViewMacros/Templates instead now and they work perfectly.

    Thanks for the response Tim

  40. Steve on October 22nd, 2015

    Tim - is this compatible with Umbraco Forms in an Umbraco 7.3 project?
    Thanks, Steve

  41. Tim Geyssens on October 22nd, 2015

    Hey Steve, nope this is built for Contour and won’t work on Forms, shouldn’t be that difficult to port it though…

  42. Steve on October 24th, 2015

    Hey Tim, Thanks for the response. Not sure if I’ve got the expertisse (or time!) to port this but will have a look. Do you know of anyone else who might have already done this? /Steve

  43. Tim Geyssens on October 24th, 2015

    Hey Steve nope don’t know, might be good to ask that on the forum

  44. Steve on October 25th, 2015
  45. Steve on October 25th, 2015

    Tim, as an experiment, I installed this project with Forms. Result was that workflow menu became completely empty. I see the project is essentially a dll. How would one go about porting this? thanks - Steve

  46. Tim Geyssens on October 25th, 2015

    @Steve will put code on github tomorrow and see if I can put you on the way (don’t think it needs that much work since most code will still work)

  47. Steve on October 26th, 2015

    Tim, That would be great. Thank you! I will look for it.

  48. Tim Geyssens on October 26th, 2015

    Ok sourcecode is available here, but will port the bits to Forms https://contourstrikesagain.codeplex.com/SourceControl/latest#ContourStrikesAgain/Providers/WorkflowTypes/SaveAsUmbracoMember.cs and post on github, for updates please check the comments here

  49. Steve on October 26th, 2015

    Great! It is interesting to learn more about how this works in Contour but see there are some obsolete classes and other reference errors. Will wait for your port. Big thanks!

  50. Tim Geyssens on October 26th, 2015

    WOrking on it now think I’ll have the first workflow ported tomorrow (the most difficult one, the one that creates members).

  51. Steve on October 26th, 2015

    Tim, that would be really helpful. I’m also working on a custom form field so studying the other code in Contour Strikes Again but the source has just suddenly become unavailable on codeplex. Do you know if it (or even an alternative for learning custom field set up) is available elsewhere? /Steve

  52. Tim Geyssens on October 26th, 2015

    @Steve, project is here: https://github.com/TimGeyssens/MemberToolsForUmbracoForms currently it only has the create as member workflow will add more bits this week

  53. Steve on October 27th, 2015

    @Tim - thanks! This new workflow alone is a fantastic addition to forms. Can’t wait to check out the additional bits. I don’t know if my install method was ideal (just copied the models, controllers, etc into my project). Is there a better way? - I noticed the nuget folder but don’t know how to handle or if it is to be used. Thanks again for this.

Leave a Reply