How to style this registration form?

My current registration form is really plain, and I want to change the style to something else. I have found a css style I want to apply (got the html and css code from cssdeck.com) but cannot figure out how to get the old form to work with the new css style. I have both the new and old form on the same page right now and attached an image so you can see hat I am trying to accomplish.

[attachment=98]

Code from old, but working registration form (the view page):

PHP Code:

<?php
if ($use_username) {
 $username = array(
 'name' => 'username',
 'id' => 'username',
 'value' => set_value('username'),
 'maxlength' => $this->config->item('username_max_length', 'tank_auth'),
 'size' => 30,
 );
}
$email = array(
 'name' => 'email',
 'id' => 'email',
 'value' => set_value('email'),
 'maxlength' => 80,
 'size' => 30,
);
$password = array(
 'name' => 'password',
 'id' => 'password',
 'value' => set_value('password'),
 'maxlength' => $this->config->item('password_max_length', 'tank_auth'),
 'size' => 30,
);
$confirm_password = array(
 'name' => 'confirm_password',
 'id' => 'confirm_password',
 'value' => set_value('confirm_password'),
 'maxlength' => $this->config->item('password_max_length', 'tank_auth'),
 'size' => 30,
);
$captcha = array(
 'name' => 'captcha',
 'id' => 'captcha',
 'maxlength' => 8,
);
?>
<?php echo form_open($this->uri->uri_string()); ?>

<div id="content-left">
                            <h3>Create Your Account</h3>
 <p></p>
 <table>
 <?php if ($use_username) { ?>
 <tr>
 <td><?php echo form_label('Username', $username['id']); ?></td>
 <td><?php echo form_input($username); ?></td>
 <td style="color: red;"><?php echo form_error($username['name']); ?><?php echo isset($errors[$username['name']])?$errors[$username['name']]:''; ?></td>
 </tr>
 <?php } ?>
 <tr>
 <td><?php echo form_label('Email Address', $email['id']); ?></td>
 <td><?php echo form_input($email); ?></td>
 <td style="color: red;"><?php echo form_error($email['name']); ?><?php echo isset($errors[$email['name']])?$errors[$email['name']]:''; ?></td>
 </tr>
 <tr>
 <td><?php echo form_label('Password', $password['id']); ?></td>
 <td><?php echo form_password($password); ?></td>
 <td style="color: red;"><?php echo form_error($password['name']); ?></td>
 </tr>
 <tr>
 <td><?php echo form_label('Confirm Password ', $confirm_password['id']); ?></td>
 <td><?php echo form_password($confirm_password); ?></td>
 <td style="color: red;"><?php echo form_error($confirm_password['name']); ?></td>
 </tr>
 
 </table>
<?php echo form_submit('register', 'Register'); ?>
<?php echo form_close(); ?>

HTML code for new registration form, on the views page:

PHP Code:

<div class="regcontainer">

    <form id="regsignup">

        <div class="regheader">
        
            <h3>Create New Account</h3>
            
            <p>You want to fill out this form</p>
            
        </div>
        
        <div class="regsep"></div>

        <div class="reginputs">
          
            <input type="regusername" placeholder="Username" autofocus /> 
        
            <input type="regemail" placeholder="e-mail" autofocus />
        
            <input type="regpassword" placeholder="Password" />
          
            <input type="regconfirmpassword" placeholder="Confirm Password" />
          
            <div class="checkboxy">
                <input name="cecky" id="checky" value="1" type="checkbox" /><label class="terms">I accept the terms of use</label>
            </div>
            
            <a id="regsubmit" href="#">Continue To Payment</a>
        
        </div>

    </form>

</div> 


The input fields for the old form are being generated by

PHP Code:

<?php echo form_password($password); ?>

yet the new form's input fields are

PHP Code:

 <input type="regpassword" placeholder="Password" /> 


How do I go about making entries entered in the fields on the new form to be inputted into the old form's logic so that it creates the new user account? The new and old forms are completely different, for example, the old form submits by

PHP Code:

<?php echo form_submit('register', 'Register'); ?>

and the new one is like

PHP Code:

<a id="regsubmit" href="#">Continue To Payment</a> 


.

Just add a placeholder to the form arrays:

Code:

$password = array(
  'name' => 'password',
  'id' => 'password',
  'value' => set_value('password'),
  'maxlength' => $this->config->item('password_max_length', 'tank_auth'),
  'size' => 30,
  'placeholder' => 'Password'
);

You don't necessarily need to change the input types to what they are using. They are just HTML5 specific input types, but regular inputs will work fine too.

Or you can just use it the way they are and not use the form helper, which doesn't have HTML5 elements built into it.

Code:

<input type="regusername" placeholder="Username" name="username" value="<?php echo set_value('username'); ?>" autofocus />

Additionally, there is no input type of "regusername" and a lot of the others they are using. Not sure what the purpose of that is. They will just be converted to straight <input type="text">

The form helpers do have a place to enter custom data, such as setting id's, classnames, etc. See the userguide for more details.

Thanks for the reply CroNIX. I was using resusername and similar to match the css, I was having some conflicts with other elements on the site so I renamed them something unique.

Code:

#regsignup .reginputs input[type=regusername], input[type=regemail], input[type=regpassword], input[type=regconfirmpassword] {
   background: #f5f5f5;
   font-size: 0.8rem;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   border: none;
   padding: 13px 10px;
   width: 330px;
   margin-bottom: 20px;
   box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
   clear: both;
}

#regsignup .reginputs input[type=regusername]:focus, input[type=regemail]:focus, input[type=regpassword]:focus, input[type=regconfirmpassword]:focus {
   background: #fff;
   box-shadow: 0px 0px 0px 3px #fff38e, inset 0px 2px 3px rgba( 0,0,0,0.2 ), 0px 5px 5px rgba( 0,0,0,0.15 );
   outline: none;  
}

The new form already has placeholders in place and working, but I added the placeholder to the array and changed my inputs on the new form to

PHP Code:

<input type="regusername" placeholder="Username" name="username" value="<?php echo set_value('username'); ?>" autofocus /> 


But all that did was add placeholders to the old form that I will be deleting. Once the functionality of the old form has been transferred over to the new one I will just delete the old one.

The other thing I need to know is how to submit the form. How would I make it so that when the user hits "continue to payment" the form is submitted using the old code,

PHP Code:

<?php echo form_submit('register', 'Register'); ?>

? Below is the html code as far as I can tell how it should be (except I left the submit button as-is because I'm not sure how to make that work):

PHP Code:

<?php echo form_open($this->uri->uri_string()); ?>

<div class="regcontainer">

    <form id="regsignup">

        <div class="regheader">
        
            <h3>Create New Account</h3>
            
            <p>You want to fill out this form</p>
            
        </div>
        
        <div class="regsep"></div>

        <div class="reginputs">
          
            <input type="regusername" placeholder="Username" name="username" value="<?php echo set_value('username'); ?>" autofocus /> 
        
            <input type="regemail" placeholder="Email" name="email" value="<?php echo set_value('email'); ?>" autofocus />
        
            <input type="regpassword" placeholder="Password" name="password" value="<?php echo set_value('password'); ?>" autofocus />
          
            <input type="regconfirmpassword" placeholder="Password" name="confirm_password" value="<?php echo set_value('confirm_password'); ?>" autofocus />
          
            <div class="checkboxy">
                <input name="cecky" id="checky" value="1" type="checkbox" /><label class="terms">I accept the terms of use</label>
            </div>
            
            <a id="regsubmit" href="#">Continue To Payment</a>
        
        </div>

    </form>


<?php echo form_submit('register', 'Register'); ?>
<?php echo form_close(); ?>

</div> 


Something like this should work:

PHP Code:

<?php
if ($use_username) {
    $username = array(
        'name'        => 'username',
        'id'          => 'username',
        'type'        => 'regusername',
        'placeholder' => 'Username',
        'value'       => set_value('username'),
        'maxlength'   => $this->config->item('username_max_length', 'tank_auth'),
        'size'        => 30,
        'autofocus'   => 'autofocus',
    );
}
$email = array(
    'name'        => 'email',
    'id'          => 'email',
    'type'        => 'regemail',
    'placeholder' => 'e-mail',
    'value'       => set_value('email'),
    'maxlength'   => 80,
    'size'        => 30,
    'autofocus'   => 'autofocus',
);
$password = array(
    'name'        => 'password',
    'id'          => 'password',
    'type'        => 'regpassword',
    'placeholder' => 'Password',
    'value'       => set_value('password'),
    'maxlength'   => $this->config->item('password_max_length', 'tank_auth'),
    'size'        => 30,
);
$confirm_password = array(
    'name'        => 'confirm_password',
    'id'          => 'confirm_password',
    'type'        => 'regconfirmpassword',
    'placeholder' => 'Confirm Password',
    'value'       => set_value('confirm_password'),
    'maxlength'   => $this->config->item('password_max_length', 'tank_auth'),
    'size'        => 30,
);

?>
<div id="content-left" class='regcontainer'>
    <?php echo form_open($this->uri->uri_string(), array('id' => 'regsignup')); ?>
        <div class='regsignup'>
            <h3>Create New Account</h3>
            <p>You want to fill out this form</p>
        </div>
        <div class='regsep'></div>
        <div class='reginputs'>
            <?php 
            if ($use_username) :
                echo form_label('Username', $username['id']); 
                echo form_input($username); 
                if (form_error($username['name']) || isset($errors[$username['name']])) :
            ?>
            <span class='error'><?php echo form_error($username['name']) . (isset($errors[$username['name']]) ? $errors[$username['name']] : ''); ?></span>
            <?php
                endif;
            endif;

            echo form_label('Email Address', $email['id']); 
            echo form_input($email); 
            if (form_error($email['name']) || isset($errors[$email['name']])) :
            ?>
            <span class='error'><?php echo form_error($email['name']) . (isset($errors[$email['name']]) ? $errors[$email['name']] : ''); ?></span>
            <?php
            endif;
            echo form_label('Password', $password['id']);
            echo form_input($password);
            if (form_error($password['name'])) :
            ?>
            <span class='error'><?php echo form_error($password['name']); ?></span>
            <?php
            endif;
            
            echo form_label('Confirm Password ', $confirm_password['id']);
            echo form_input($confirm_password); 
            if (form_error($confirm_password['name'])) :
            ?>
            <span class='error'><?php echo form_error($confirm_password['name']); ?></span>
            <?php
            endif;
            ?>
            <div class="checkboxy">
                <input name="cecky" id="checky" value="1" type="checkbox" /><label class="terms">I accept the terms of use</label>
            </div>
            <?php echo form_submit(array('name' => 'register', 'id' => 'regsubmit'), 'Continue To Payment'); ?>
        </div>
    <?php echo form_close(); ?>
</div> 


If you don't want the labels for some reason, just delete the form_label() calls. The same goes for the error messages (though you would delete the whole if (form_error())/endif block for each message).

Bonfire

Practical CodeIgniter 3
CodeIgniter Testing Guide

Thanks mwhitney! Repped. Your code worked and was spot on. It also helped me understand what was going on with the form. I was able to get the checkbox working correctly also, where the form won't submit without it being checked.

I basically just took your existing, working form, and modified it to output markup which was closer to the new form. In general, when you are not very familiar with a particular piece of code and how it works, you should change as little as possible to get the desired result.

I assumed that the CSS for your form used the type values on the form's inputs, because most of them are not standard types. I would really recommend changing them to standard types ( http://www.w3.org/TR/html-markup/input.html#input ) and updating the CSS and markup to use classes instead. However, you may have other code (e.g. JavaScript) which is also dependent on these types, so tread carefully.

Bonfire

Practical CodeIgniter 3
CodeIgniter Testing Guide

However, you may have other code (e.g. JavaScript) which is also dependent on these types, so tread carefully.

Yup that's what I was having a problem with, with the recommended input types. My text input fields for my login box were being styled like the the reregistration box because of the type in my css file so I felt like renaming them was the only way to have a separate style for both forms.

Sorry to bring back this thread but how would I make it so that when the user types in his password in the registration form, asterisks show instead? My old registration form used to work that way but this one is just showing the plain text password as it's typed.

Hi User2374,

Please use a type="password" to hide the password from showing on the HTML form ie <input type="password" name="password"> or use the codeigniter form helper echo form_password()