Joomla input form field output

Question

All I wanna do is to give the joomla input forms the basic bootstrap styling:

<div class="form-group">
<div class="input-group">
<span class="input-group-addon">some text</span>
<input class="form-control" />

I am using a mixin with less to apply the styles to the existing input-class

//input form fields
.validate-email{
   .form-control;
}

And I am overriding the com_users/remind.php for the other html-changes.

But there is some php-code that messes up the output. This is the original code from com_users/remind.php, which I am overriding:

   <fieldset>
         <?php foreach ($this->form->getFieldset($fieldset->name) as $name => $field) : ?>
            <div class="control-group">
               <div class="control-label">
                  <?php echo $field->label; ?>
               </div>
               <div class="controls">
                  <?php echo $field->input; ?>
               </div>
            </div>
         <?php endforeach; ?>
      </fieldset>

I dont need a label (see above), so i deleted those lines. I changed all the classes available and made a mixin for the input-field class (see above).

This is what it looks like now:

  <fieldset>
  <?php foreach ($this->form->getFieldset($fieldset->name) as $name => $field) : ?>
        <div class="form-group">
           <div class="input-group">
              <span class="input-group-addon">E-Mail</span>
              <?php echo $field->input; ?>
           </div>
        </div>
  <?php endforeach; ?>
  </fieldset>

BUT the surrounding php-lines in that code are doing something weird, which i dont understand. The output looks like this:

<fieldset>
                        <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon">E-Mail</span>
                        <input type="email" aria-required="true" required="" size="30" value="" id="jform_email" class="validate-email invalid" name="jform[email]" aria-invalid="true">                    </div>
                </div>
                        <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon">E-Mail</span>
                                            </div>
                </div>
                </fieldset>

So the first form-group - output is what i want. The second form-group - output normally is the corresponding label to the input-field. I need to get rid of this second form-field output.

I am not doing core hacks, I am looking for a way to override the joomla input-field output. I dont wanna create my own form fields like the docs are suggesting: http://docs.joomla.org/Creating_a_custom_form_field_type

I either need to get rid of that "foreach" without creating any php-errors, but I have no idea how to change that php-code. Or I need to load that input-field for E-Mails without all the extra stuff, but I dont know how to do that.

I tried to create my own field-override by adding

JForm::addFieldPath(JPATH_THEMES . '/MyTemplate/html/fields');

and copying the remind.php to that folder. but it isnt loading my custom remind.php. The docs mentions overriding getLabel

public function getLabel() {
     return '<span style="text-decoration: underline;">' . parent::getLabel() . '</span>';}

But i cant figure out how to use that on getInput

If anyone has the right php-lines or another more simple solution, pls let me know. I have been on trial and error for a while now and i am running out of ideas. Thanks, Lars

Answer 1

Finally I found a way to add custom fields and rendering single input-fields (thanks to Brian). This gives me full control of the output of joomla input form fields, it is update-proof and all files are in MyTemplate-folder. Basically it is an override. I am showing the whole process for the remind.php found in Joomla/components/com_users/remind:

1. I am creating the com_users-override in my template-folder by copying all files from joomla/components/com_users/views/remind to Joomla/templates/MyTemplate/html/com_users/remind

2. I add those lines to the remind.php:

   $this->form->reset( true ); // to reset the form xml loaded by the view

   $this->form->loadFile( dirname(__FILE__) . DS . "remind.xml"); // to load my own version of remind.xml using the FILE constant

Now I am able to use my own remind.xml from the same folder.

3. I copy remind.xml from joomla/components/com_users/models/forms to Joomla/templates/MyTemplate/html/com_users/remind

And I add following lines to that xml:

hint="This is the placeholder-text"
class="form-control"

The whole file looks like this:

<?xml version="1.0" encoding="utf-8"?>
<form>
    <fieldset name="default" label="COM_USERS_REMIND_DEFAULT_LABEL">
        <field name="email" type="email"
            hint="My Placeholder"
            class="form-control"
            description="COM_USERS_FIELD_REMIND_EMAIL_DESC"
            label="COM_USERS_FIELD_REMIND_EMAIL_LABEL"
            required="true"
            size="30"
            validate="email"
        />
        <field
            name="captcha"
            type="captcha"
            label="COM_USERS_CAPTCHA_LABEL"
            description="COM_USERS_CAPTCHA_DESC"
            validate="captcha"
        />
    </fieldset>
</form>

Of course you can add any lines you want.

4. Now I change the default.php in my Joomla/templates/MyTemplate/html/com_users/remind - folder. Those are similar lines as suggested by Brian (sorry code-formating doesnt work here):

   E-Mail form->getInput('email'); ?>

Thats all.

The html-output looks like this:

<fieldset>
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">E-Mail</span>
                <input type="email" aria-required="true" required="" placeholder="My Placeholder" size="30" value="" id="jform_email" class="validate-email form-control" name="jform[email]">          </div>
        </div>
        </fieldset>

Ok, I know there is code in this post that doesnt show properly, but I cant figure out how to fix it and I am not allowed to post screenshots yet. Sorry for that.

Answer 2

If you want to forgoe the foreach loop and manually render the individual fields you can use render the fields individually directly from the JForm object.

  <fieldset>
     <div class="form-group">
         <div class="input-group">
            <span class="input-group-addon">E-Mail</span>
            <?php echo $this->form->getInput('email'); ?>
         </div>
      </div>
      <div class="form-group">
         <div class="input-group">
            <?php echo $this->form->getInput('captcha'); ?>
         </div>
      </div>
  </fieldset>