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.

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

sarah3585
 
sarah3585 replied on at Permalink Reply
sarah3585
Hello again, I've found a JQuery plugin that does what I'm looking for.
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
$(document).ready(function() {
   $('form').inputLabels()
});


Template:
<div id="formblock<?php  echo $bID; ?>" class="formblock">
<form enctype="multipart/form-data" id="miniSurveyView<?php  echo $bID; ?>" class="miniSurveyView" method="post" action="<?php  echo $formAction ?>">
   <?php  if ($success): ?>
      <div class="success">
         <?php  echo $thanksMsg; ?>
      </div>
   <?php  elseif ($errors): ?>
      <div class="errors">
         <?php  echo $errorHeader; ?>
         <?php  echo $errorDivs; /* each error wrapped in <div class="error">...</div> */ ?>
      </div>
   <?php  endif; ?>
   <div class="fields">
      <?php  foreach ($questions as $question): ?>
         <div class="field field-<?php  echo $question['type']; ?>">
SteamSynthetic replied on at Permalink Reply
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:
<?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 {

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...
ShardCode replied on at Permalink Reply
ShardCode
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 :(
ChannelMarkerMedia replied on at Permalink Reply
ChannelMarkerMedia
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
<label>
and add something like:
<?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
guardiangsrich replied on at Permalink Reply
if you copy the forms block from concrete into application, then opening the view.php file

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
PixelFields replied on at Permalink Reply
PixelFields
This worked perfectly for me and very easy to implement on a Legacy Form block custom template, thank you!
thekarmaman replied on at Permalink Reply
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 :)