Forms - Make the label the placeholder text
Permalink
Hello,
Fistly I am a designer and love Concrete5 for it's ability to let me theme it how I want to with virtually no Php knowledge. I want to have a very simple form that uses placeholder text instead of labels, as they are prettier and save space :)
Is there a way of editing the template (possibly to the code snippet below for its template?) to display the label as the placeholder text, I know this is html 5 only so I may need to look into a JQuery fallback.
Fistly I am a designer and love Concrete5 for it's ability to let me theme it how I want to with virtually no Php knowledge. I want to have a very simple form that uses placeholder text instead of labels, as they are prettier and save space :)
Is there a way of editing the template (possibly to the code snippet below for its template?) to display the label as the placeholder text, I know this is html 5 only so I may need to look into a JQuery fallback.
<div class="fields"> <?php foreach ($questions as $question): ?> <div class="field field-<?php echo $question['type']; ?>"> <label <?php echo $question['labelFor']; ?>> <?php echo $question['question']; ?> <?php if ($question['required']): ?> <span class="required">*</span> <?php endif; ?> </label> <?php echo $question['input']; ?> </div>
Actually you can use a form block for this using the external forms block with the exact method you were talking about. Do some research on using external form blocks, and you will see the form can be entered anywhere. On the current site Im working on, I had an email form signup on the top navigation bar next to the page hierarchy and used this placeholder jquery to solve the problem.
You can copy the files out of the concrete blocks folder, but heres a more direct path
1.) In your main directory, not the concrete directory, inside the blocks folder, create a folder called "external_form".
2.) inside of "external_form" create a new folder called "forms"
3.) My form is called "newsletter.php". Its also good to note that doing this method, your able to do the same styling methods using the table free form plugin with out needing it. Such as I was able to define a wrapping class on the input <div class="field field-text newsletter"> and use CSS to style it. You can do that with all of your fields. Here's the code I am using:
4.) Inside this same directory, create another sub-folder called "controllers"
5.) The controller needs to be the same name as the php file from the parent directory, so mine is "newsletter.php"
6.) Heres the code for the controller... It is IMPORTANT that the first class "NewsletterExternalFormBlockController" the first word is the filename of the php file your using. Example "ContactFormExternalFormBlockController" etc.
7.) Using the jquery method you mentioned worked perfectly. The rest is just CSS styling from there, make sure you are using the concrete form methods when building your custom forms:
http://www.concrete5.org/documentation/developers/forms/standard-wi...
You can copy the files out of the concrete blocks folder, but heres a more direct path
1.) In your main directory, not the concrete directory, inside the blocks folder, create a folder called "external_form".
2.) inside of "external_form" create a new folder called "forms"
3.) My form is called "newsletter.php". Its also good to note that doing this method, your able to do the same styling methods using the table free form plugin with out needing it. Such as I was able to define a wrapping class on the input <div class="field field-text newsletter"> and use CSS to style it. You can do that with all of your fields. Here's the code I am using:
<?php $form = Loader::helper('form'); defined('C5_EXECUTE') or die("Access Denied."); ?> <form enctype="multipart/form-data" method="post" action="<?php echo $this->action('submit_form'); ?>"> <?php if (isset($response)) { echo $response; } ?> <div class="field field-text newsletter"><?php echo $form->label('newsletter', 'Enter email for newsletter'); echo $form->text('newsletter'); ?></div> <div class="honeypot" style="display: none;"><input type="text" type="text" name="etc" /></div> <div class="field field-submit"><?php echo $form->submit('submit', 'Submit', '', 'button'); ?></div> </form>
4.) Inside this same directory, create another sub-folder called "controllers"
5.) The controller needs to be the same name as the php file from the parent directory, so mine is "newsletter.php"
6.) Heres the code for the controller... It is IMPORTANT that the first class "NewsletterExternalFormBlockController" the first word is the filename of the php file your using. Example "ContactFormExternalFormBlockController" etc.
<?php defined('C5_EXECUTE') or die("Access Denied."); class NewsletterExternalFormBlockController extends BlockController { public function action_submit_form() { $error = $this->validate_form($this->post()); if ($error->has()) { $retval = '<div class="errors"><ul>'; $i = 0; foreach ($error->getList() as $error){ $retval .= '<li>'.$error.'</li>'; } $retval .= '</ul></div>'; $this->set('response', $retval); return false; } else {
Viewing 15 lines of 59 lines. View entire code block.
7.) Using the jquery method you mentioned worked perfectly. The rest is just CSS styling from there, make sure you are using the concrete form methods when building your custom forms:
http://www.concrete5.org/documentation/developers/forms/standard-wi...
Sarah Im trying to use your method. I really want to get this working.
I have implemented the javascript in the <head> tag.
I set the table template to tableless instead of the ajax tableless i installed.
then replaced the code in 'tableless_layout.php'
should have worked but form still looking the same :(
I have implemented the javascript in the <head> tag.
I set the table template to tableless instead of the ajax tableless i installed.
then replaced the code in 'tableless_layout.php'
should have worked but form still looking the same :(
One quick workaround is to do a str_replace to add the placeholder html attribute to the input
In 5.7 /concrete/blocks/form/view.php around line 86:
Remove the and add something like:
My entire foreach (starting at line 86) looks like:
Note: Of course, it's bad practice to modify the core files, so copy view.php and override the core, or just make a custom template which is what I prefer
In 5.7 /concrete/blocks/form/view.php around line 86:
Remove the
<label>
<?php $question['input'] = str_replace('class="form-control"', 'class="form-control" placeholder="'.$question['question'].'"', $question['input']); ?>
My entire foreach (starting at line 86) looks like:
<?php foreach ($questions as $question): ?> <div class="form-group field field-<?php echo $question['type']; ?> <?php echo $errorDetails[$question['msqID']] ? 'has-error' : ''?>"> <?php $question['input'] = str_replace('class="form-control"', 'class="form-control" placeholder="'.$question['question'].'"', $question['input']); ?> <?php echo $question['input']; ?> </div> <?php endforeach; ?>
Note: Of course, it's bad practice to modify the core files, so copy view.php and override the core, or just make a custom template which is what I prefer
if you copy the forms block from concrete into application, then opening the view.php file
replace
for
I cant remember where I got this from but it worked for me
replace
<div class="fields"> <?php foreach ($questions as $question): ?> <div class="form-group field field-<?php echo $question['type']; ?> <?php echo isset($errorDetails[$question['msqID']]) ? 'has-error' : ''?>"> <?php if (!in_array($question['inputType'], array('hidden', 'currentpage', 'referrer'))): ?> <label style="color:white!important;" class="control-label" <?php echo $question['labelFor']; ?>> <?php echo $question['question']; ?> <?php if ($question['required']): ?> <span class="text-muted small" style="font-weight: normal; color:white!important; opacity:1!important;"><?php echo t("Required")?></span> <?php endif; ?> </label> <?php endif; ?> <?php echo $question['input']; ?> </div> <?php endforeach; ?> </div><!-- .fields -->
for
<div class="fields"> <?php foreach ($questions as $question): ?> <div class="form-group field field-<?php echo $question['type']; ?> <?php echo $errorDetails[$question['msqID']] ? 'has-error' : ''?>"> <?php $question['input'] = str_replace('class="form-control"', 'class="form-control richformcontrol" placeholder="'.$question['question'].'"', $question['input']); ?> <?php echo $question['input']; ?> </div> <?php endforeach; ?> </div><!-- .fields -->
I cant remember where I got this from but it worked for me
This worked perfectly for me and very easy to implement on a Legacy Form block custom template, thank you!
this worked for me as well except the location of the file that gets addressed by my site is in the /updates/concrete5-8.2.1_remote_updater/concrete/blocks/form
Thanks for this snippet of code! Styling from here will be a breeze :)
Thanks for this snippet of code! Styling from here will be a breeze :)
http://www.dhmedia.com.au/blog/nice-placeholders-jquery...
I can get this working fine hard coding a small form into the template but does not work with the form block. Im using the tableless layout.
JQuery
Template: