Overview

One of the nice features of Rock's Workflow forms is that, when you create the form, you can hide the label on some of the fields. Ever since I began using Rock, this has been a feature that I've wanted to see on Event Registration forms.

With some easy CSS and HTML work, this is possible and quick to do. 

Here's an image of our demonstration form without this technique applied. Take note of the Point 1, Point 2, and Point 3 labels.

Form - With Labels.png

Here's the same form after some quick CSS and HTML.

Form - No Labels.png

You may have noticed in the original image that these form questions are required. When we hide the labels, we also hide the red requirement dot. This is the same behavior that can be observed in workflow forms with hidden labels.

When labels are hidden on a workflow form, the label is hidden from the required entry alert. You would see "is required" with no label name. (This was a boolean with the name of "Required entry")

Workflow is required.png

Using this technique in event registration forms, that isn't the case. 

Because of that, make sure you give some kind of descriptive name to your attribute. (Maybe better than Point 1...)

Form - Required Labels.png

So how did we do this?

Preparation

First, we're going to create a very quick css file. The function of this file will be to not display control labels that are inside a class of 'hide-label'.  Open a text editor, and enter in:

.hide-label label.control-label { display:none !important; }

With that done, save the file has hide-label.css

Code screen.png

A copy of the file can be downloaded from this recipe. It may download as hide_label rather than hide-label. Make sure that the file name you put into the block settings is accurate.

Then we need to get the css file on the server. For demonstration purposes, we'll upload it to the ~/Content/ExternalSite/ folder using the File Manager found in Admin Tools > CMS Configuration.

File Manager.png

With the file on the server, we need to tell the event registration block how to find it. Navigate to the registration page, either on the public site side, or via Admin Tools > CMS Configuration > Pages. On the demo, it's found at External Homepage > Calendar > Registration.

Registration page.png

Edit the registration entry block, and add a link to the hide-label css file in the block's Pre-HTML field:

If your css file is going to live in Content/External site, the link is:

<link rel="stylesheet" href="~/Content/ExternalSite/hide-label.css">

Block Properties.png

The rest of the configuration will all be done in our event registration template.

Registration Template

We used registrant attributes for this demonstration, but hiding labels will work on any of the other field types: person fields, person attributes, etc. 

We'll create our 3 registrant attributes, Point 1, Point 2, and Point 3

3 Questions - Registration Form.png

Let's look at Point 2 for what we're doing (and a couple tricks)

Point 2.png

Our registrant attribute has a Name of Point 2, a Key of Point2, and the value is required.

To get a check box, we use a multi select, but only give it one actual thing to select. As you create selections in Rock, whether for single selects or multi selects, it's always a good idea to use the key/value pair. Doing so will let you change the text in the value, without losing information stored on previous entries. In this case, our key is 2, and the value is 

"I agree to the second point in a series of statements, this is a compound statement which has a number of commas, which must be changed so it's still one check box."

Normally, different choices in a single or multi select are separated by commas. If you're working on a form where you paste in statements from something else, chances are that you'll meet some commas. In that case, change your "," character to "&comma;", as shown on callout 1. It will still show as a comma on the page, as shown on callout 2.

Having set up the basics of our attribute, we're going to add the final bit of special sauce. Using the Pre-HTML and Post-HTML fields, we wrap the whole field in an HTML Div, with a class of 'hide-label'. This is what the css file we made earlier will act on: any labels that have a class of "hide-label."

<div class="hide-label"></div>

PreHTML.png

That's it!

From now on, the labels on any registration attributes in a hide-label div on any forms opened via that registration entry block will not show their labels.

Form - No Labels.png

Important note for maintenance

While it's possible to open the div on one attribute and close it on another one, I would recommend against this. Do your future self, and anyone else coming along after you, the benefit of making it very clear how every attribute label is being affected by putting each one inside it's own div. Additionally, make sure in the description of the event registration form that you remind anyone involved that you're hiding labels intentionally.

As a general rule, any time that you're changing how Rock core blocks display elements, make sure it's very clear where that change is being made, and how.

Description.png

Special thinks to Marcus Lee for his help working on this solution.