Customizing Quick Registration Fields

Customizing Quick Registration Fields

In EasySocial 1.4, we have a hard time to standardize the styling in the quick registration form since it allows most of custom fields to be displayed there. So in EasySocial 2, only specific fields are allowed to be shown in the form. This enables EasySocial 2 to standardize the layout, simplify the display and keeping the styling fixed.

The current layout of the quick registration form only includes these following fields joomla_fullname, joomla_email, joomla_password, birthday, gender. However, we do allow users to add several more fields in the quick registration form such as recaptcha, address and checkbox.

Overriding Quick Registration Fields

How to add the additional fields in the quick registration form? The only way to do this is by creating a template override over the quick registration form. Overriding this quick registration form is very straightforward. Copy the original file (login.php) of the quick registration form from this directory.

/components/com_easysocial/themes/wireframe/helpers/html/login.php

Then, navigate to your current Joomla template and create the following folders (helpers/html/) in your current Joomla template /templates/protostar/html/com_easysocial/helpers/html/. So, the final directory for the override file should be /templates/protostar/html/com_easysocial/helpers/html/helpers/html/login.php.

The following codes is the example of the override login.php file which you will be created for the template override.

<form method="post" action="<?php echo JRoute::_('index.php');?>" data-registermini-form>
    <div class="register-wrap">
        <div class="es-login-box__msg-title"><?php echo JText::_('COM_EASYSOCIAL_LOGIN_NO_ACCOUNT');?></div>
        <div class="es-login-box__msg-desc">
            <?php echo JText::_('COM_EASYSOCIAL_LOGIN_REGISTER_NOW');?>
        </div>
        <div class="register-field" data-registermini-fields-item><?php echo $fields['joomla_fullname']->output;?></div>
        <div class="register-field" data-registermini-fields-item><?php echo $fields['joomla_email']->output;?></div>
        <?php if (isset($fields['joomla_username'])) { ?>
            <div class="register-field" data-registermini-fields-item><?php echo $fields['joomla_username']->output;?></div>
        <?php } ?>
        <div class="register-field" data-registermini-fields-item><?php echo $fields['joomla_password']->output;?></div>
        <?php if (isset($fields['birthday'])) { ?>
            <div class="register-field" data-registermini-fields-item><?php echo $fields['birthday']->output;?></div>
        <?php } ?>
        <?php if (isset($fields['gender'])) { ?>
            <div class="register-field" data-registermini-fields-item><?php echo $fields['gender']->output;?></div>
        <?php } ?>
        <!-- Add recaptcha fields here -->
        <?php if (isset($fields['recaptcha'])) { ?>
            <div class="register-field" data-registermini-fields-item><?php echo $fields['recaptcha']->output;?></div>
        <?php } ?>
        <div>
            <button class="btn btn-es-primary btn-block" type="button" data-registermini-submit><?php echo JText::_('COM_EASYSOCIAL_LOGIN_REGISTER_NOW_BUTTON');?></button>
        </div>
    </div>
    <input type="hidden" name="option" value="com_easysocial" />
    <input type="hidden" name="controller" value="registration" />
    <input type="hidden" name="task" value="miniRegister" />
    <?php echo $this->html('form.token');?>
</form>

This is the additional fields in the quick registration form and you may apply any of these code in the template override file.

// Copy this code if you wanted to add recaptcha field on your quick registration form.
<?php if (isset($fields['recaptcha'])) { ?>
    <div class="register-field" data-registermini-fields-item><?php echo $fields['recaptcha']->output;?></div>
<?php } ?>
// Copy this code if you wanted to add address field on your quick registration form.
<?php if (isset($fields['address'])) { ?>
    <div class="register-field" data-registermini-fields-item><?php echo $fields['address']->output;?></div>
<?php } ?>
// Copy this code if you wanted to add checkbox field on your quick registration form.
<?php if (isset($fields['checkbox'])) { ?>
    <div class="register-field" data-registermini-fields-item><?php echo $fields['checkbox']->output;?></div>
<?php } ?>