Show required asterisk (*) in forms, instead of "Required"?
Permalink
For some reason, when Required is enabled in my forms, the word "Required" is shown in grey instead of the conventional red asterisk. Anybody know how to change that so that they toggle? (asterisk listed next to field label, word Required displayed only when the field is not filled in).
Hi.
It's version 5.7.5.11
It's version 5.7.5.11
@bobafifi
You can create a custom template for the Form block.
http://documentation.concrete5.org/editors/in-page-editing/block-ar...
- copy view.php
concrete\blocks\form\view.php
- paste view.php into application\blocks\form\templates\required_asterisk
application\blocks\form\templates\required_asterisk\view.php
- open view.php
- in view.php, find this line:
- replace the line with this line:
- to make the required "*" red, you can add a "form-input-required" class in your theme CSS, site Custom CSS, or add a view.css
To add the view.css
- create a file called view.css in application\blocks\form\templates\required_asterisk
application\blocks\form\templates\required_asterisk\view.css
- open view.css
- add this CSS:
You can create a custom template for the Form block.
http://documentation.concrete5.org/editors/in-page-editing/block-ar...
- copy view.php
concrete\blocks\form\view.php
- paste view.php into application\blocks\form\templates\required_asterisk
application\blocks\form\templates\required_asterisk\view.php
- open view.php
- in view.php, find this line:
<span class="text-muted small" style="font-weight: normal"><?php echo t("Required")?></span>
- replace the line with this line:
<span class="form-input-required" style="font-weight: normal"><?php echo t("*")?></span>
- to make the required "*" red, you can add a "form-input-required" class in your theme CSS, site Custom CSS, or add a view.css
To add the view.css
- create a file called view.css in application\blocks\form\templates\required_asterisk
application\blocks\form\templates\required_asterisk\view.css
- open view.css
- add this CSS:
.form-input-required { color: red; }
Thanks very much! For some reason, I haven't been able to get the custom template to show up in the dropdown at all even though I *think* I followed your directions to the letter. However, I simply modified the original view.php page and removed the word "Required" completely.
Oddly enough, on submit the concrete5 validation message for a blank form reads (see attachments):
Please correct the following errors:
Complete required fields *
You must enter a valid email address
Notice the asterisk after fields? So that alert was/is still hard coded in the view.php by concrete5. Beats me why they changed it to "Required" and changed what has been a standard convention for forms since forever. What should be there is the asterisk in red, and only on a validation error, should the word "Required" displayed. That's the behavior I'm after. Thanks again for all your help with this!
<span class="text-muted small" style="font-weight: normal"><?php echo t("")?></span>
Oddly enough, on submit the concrete5 validation message for a blank form reads (see attachments):
Please correct the following errors:
Complete required fields *
You must enter a valid email address
Notice the asterisk after fields? So that alert was/is still hard coded in the view.php by concrete5. Beats me why they changed it to "Required" and changed what has been a standard convention for forms since forever. What should be there is the asterisk in red, and only on a validation error, should the word "Required" displayed. That's the behavior I'm after. Thanks again for all your help with this!
@bobafifi
Any changes made to files inside the concrete folder will be overwritten when concrete5 is updated to a new version.
By removing the "Required" text, you removed the indicator. The field is still required and will be validated as required when submitting the form.
Any changes made to files inside the concrete folder will be overwritten when concrete5 is updated to a new version.
By removing the "Required" text, you removed the indicator. The field is still required and will be validated as required when submitting the form.
@MrKDilkington
Agreed. Just like with WordPress child themes, the idea is to maintain any modifications through system updates. Unfortunately, I can't get the custom templates to show so this is this the next best thing until I can figure out why that is.
Agreed. Just like with WordPress child themes, the idea is to maintain any modifications through system updates. Unfortunately, I can't get the custom templates to show so this is this the next best thing until I can figure out why that is.
So why not put the asterisk where the word required was and add the red color?
<span class="text-muted small" style="font-weight: normal; color: red"><?php echo t("*")?></span>
@weyboat
Sure, I could do that too. However, in this particular case the form is only two fields (Name, Email) and so it's a bit overkill to have anything, and just leave the validation message as enough of an alert. I realize I'm changing my tune somewhat for this thread, sorry. For larger forms though, I maintain that the convention is just an asterisk for required fields (typically some shade of red) and that only on validation is the word "Required" displayed.
Sure, I could do that too. However, in this particular case the form is only two fields (Name, Email) and so it's a bit overkill to have anything, and just leave the validation message as enough of an alert. I realize I'm changing my tune somewhat for this thread, sorry. For larger forms though, I maintain that the convention is just an asterisk for required fields (typically some shade of red) and that only on validation is the word "Required" displayed.
@MrKDilkington
I followed your instructions, but the new view.php file doesn't seem to overwriting the default one. I had to create the 'form','templates', and 'required_asterisk' folders under 'blocks' as the 'blocks' folder was empty. I also uninstalled and re-installed my theme, but I'm still seeing the 'Required' text instead of the asterisk.
I'm also not seeing any options in the 'Custom Template' drop down either, so I feel like I'm missing a step. Any thoughts as to what I might be doing wrong?
I'm using version 8.2.1 if that matters.
Thanks.
I followed your instructions, but the new view.php file doesn't seem to overwriting the default one. I had to create the 'form','templates', and 'required_asterisk' folders under 'blocks' as the 'blocks' folder was empty. I also uninstalled and re-installed my theme, but I'm still seeing the 'Required' text instead of the asterisk.
I'm also not seeing any options in the 'Custom Template' drop down either, so I feel like I'm missing a step. Any thoughts as to what I might be doing wrong?
I'm using version 8.2.1 if that matters.
Thanks.
Form display in v8 is very different and no longer as simple because the forms by default use Express.
This is what I was afraid of... jQuery to the rescue I suppose until I can figure how to update the code :)
EDIT: I think I found the answer in this thread for 8.1 users:https://www.concrete5.org/community/forums/block_requests/override-f...
EDIT 2: So for 8.2+ users, this has changed from that link. For simply wanting to change 'Required' to '*', this process seems crazy difficult. I'll stick to jQuery until there's a field on the dashboard that let's me put in what html I want to use for required elements, rather than having to change multiple files for something that should be so basic. I'm sure as time goes by this will change, but for now, it seems like in their efforts to make things more customizable, they've made it so more difficult for most users.
EDIT: I think I found the answer in this thread for 8.1 users:https://www.concrete5.org/community/forums/block_requests/override-f...
EDIT 2: So for 8.2+ users, this has changed from that link. For simply wanting to change 'Required' to '*', this process seems crazy difficult. I'll stick to jQuery until there's a field on the dashboard that let's me put in what html I want to use for required elements, rather than having to change multiple files for something that should be so basic. I'm sure as time goes by this will change, but for now, it seems like in their efforts to make things more customizable, they've made it so more difficult for most users.
Our Designer came up with a creative solution for that. I wouldn't recommend it because it's super Hacky. - But it works.
You can achieve this by using CSS without having to touch your Express Form templates. Needles to say if you use the CSS Classes "text-muted" and "small" on any other elements within the form, you'll run into troubles.
Consider this .less snippet:
You can achieve this by using CSS without having to touch your Express Form templates. Needles to say if you use the CSS Classes "text-muted" and "small" on any other elements within the form, you'll run into troubles.
Consider this .less snippet:
.ccm-block-express-form { .ccm-form .form-group span.text-muted.small { display: inline-block; position:relative; text-indent: -999%; font-size: 100%; &:before { position: absolute; right: -5px; content: "*"; } } }
There is a tutorial describing the proper (albeit way more complicated) way of doing exactly that:https://documentation.concrete5.org/developers/express/express-forms...
I'm stuck with the same problem. C5 seems to make my life more difficult with every update, not more simple. Did you find a better way by chance to do this than dirty with jquery?
The link I provided above is to a tutorial explaining the proper way. It is by no mean simple but it is the right way.
https://documentation.concrete5.org/developers/express/express-forms...
Do you mean that didn't work for you?
https://documentation.concrete5.org/developers/express/express-forms...
Do you mean that didn't work for you?
Create the file /application/elements/form/frontend.php (or the same way in a package) with the following code :
<?php defined('C5_EXECUTE') or die("Access Denied."); ?> <div class="form-group"> <?php if ($view->supportsLabel()) { ?> <label class="control-label"><?= $view->getLabel() ?> <?php if ($view->isRequired()) { ?> <span class="text-muted small"><?= t('*') ?></span> <?php } ?> </label> <?php } ?> <?php $view->renderControl() ?> </div>
Which version of concrete5 are you using?