Feature request - forms

Permalink
With forms now creating express objects there needs to be some additions.

Questions from forms make terrible column names. Sorting by "Which items are you most interested in (select as many as applicable)" just doesn't work. It also makes for horrible looking tables. There needs to be both a question and a field name associated with each field handle.

Adding "Required" to the title of required fields is a mess. There is no way to visually separate it from the title. A better system would be add classes to such fields. That is to say 'required' to required fields, 'multiple' to select fields with that take multiple items. This would allow the user to add appropriate styling. along with this the ability to add custom classes to questions would really help with CSS styling of forms. (presently the only option is to use selectors for the specific ID) I would much rather just add a asterisk to the title and add *required to the bottom of the form.

 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi TRRosen,

You can replace the "Required" text with an asterisk or add a class to it by using a custom template for the Express Form block (or override the default block view).

Here are the selectors for the basic Answer Types and buttons scoped to "ccm-block-express-form" (the default Express Form block wrapper class):
.ccm-block-express-form {
    // Text
    input[type=text] {}
    // Text Area
    textarea {}
    // Checkbox
    input[type=checkbox] {}
    // Date/Time - Date
    .ccm-input-date-wrapper {}
    // Date/Time - Time
    .ccm-input-time-wrapper {}
    // Image/File - File Manager Selector
    .ccm-file-selector {}
    // Image/File - HTML Input
    input[type=file] {}

When you need custom HTML/selectors For Display Text, you can add them in the rich text editor Source panel.

For styling specific labels and inputs, you can target their "for" and "id" attributes or use nth-child/nth-of-type selectors.
TRRosen replied on at Permalink Reply
Thanks That helps a lot. (love your add-ons by the way)
TRRosen replied on at Permalink Reply
Thanks That helps a lot. (love your add-ons by the way)
Veronikan replied on at Permalink Reply
Veronikan
This is helpful, thank you.

However, I'll leave this here for anyone who may be tripping down the same path.

With the form block now creating express objects, all of the form labels have the same class. I don't want to style labels for different form elements the same way. There are no id's on the labels, there is only a for attribute with a string of unique identifiers. This makes it impossible to set styles for a form.

If my client wants to edit the form, or heaven forbid, build a new one, the styles set on the for attribute will break.
MrKDilkington replied on at Permalink Reply 2 Attachments
MrKDilkington
@Veronikan

You can target specific form labels using CSS selectors like nth-child and nth-of-type.

Example:
.ccm-dashboard-express-form fieldset > div:nth-child(4) .control-label {
    color: yellow;
    font-size: 23px;
    text-shadow: 1px 1px 3px #000000;
}

- Please see the attached screenshots to see the before and after.

The Form block by default is general purpose, if you need a form with customized output (HTML or class/ID attributes) and specific structure, that might fall outside of the scope of what the block does.

Some custom form block options:
- create a single page based form
- create a form using the External Form block
- override the Express form rendering
- use this add-on:https://www.concrete5.org/marketplace/addons/express-form-templating...