Making a Fancy WordPress Register Form from Scratch

In this tutorial, I will guide you through the process of making a beautiful “Register” form, using Fancybox, jQuery, and, of course, WordPress. As you’ll find, the process is really quite simple.

Step 1. The Markup

First, let’s place our button at the top of the page, replacing the default description in the theme.

<div id="registration"><a class="show register-button"
href="#register-form">Register</a></div>

Notice that in the register button, the href (#register-form) is the same ID as the form below. We’re also using the class “.show” to call FancyBox with jQuery.


We need our base; let’s create our markup. Open header.php, and place this following snippet anywhere you’d like.

<div style="display:none"> <!-- Registration -->
        <div id="register-form">
            <div class="title">
            <h1>Register your Account</h1>
            <span>Sign Up with us and Enjoy!</span>
            </div>
            <form action="" method="post">
                <input type="text" name="" value="Username" id="" class="input"/>
                <input type="text" name="" value="E-Mail" id="" class="input" />
                <input type="submit" value="Register" id="register" />
                <hr />
                <p class="statement">A password will be e-mailed to you.</p>
            </form>
        </div>
</div><!-- /Registration -->

Note that I’m using display:none to hide the form initially.

Step 2. CSS

The CSS is rather simple; I’m merely styling a quick form design in PhotoShop.

The form, minus the styling, looks like so: (note that I’ve removed the display:none in the markup to check my styles)


Let’s next begin styling our box.

div#register-form {
    width: 400px;
    overflow: hidden;
    height: 230px;
    position: relative;
    background: #f9f9f9 url(images/secure.png) no-repeat 260px 40px;
    font-family: Helvetica Neue, Helvetica, Arial !important;
}

Continuing on, I’ll now style the text inputs, adding some fanciness.

div#register-form input[type="text"] {
    display: block;
    border: 1px solid #ccc;
    margin: 5px 20px;
    padding: 9px 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius:4px;
    width: 200px;
    font-family: Helvetica Neue, Helvetica, Arial !important;
}

div#register-form input[type="text"]:hover {
	border-color: #b1b1b1;
}
div#register-form input[type="text"]:focus {
  -moz-box-shadow: 0 0 3px #ccc;
  -webkit-box-shadow: 0 0 3px #ccc;
}
	

Now, I’ll style the button, adding a hover state, and replacing the default button with an image.

div#register-form input[type="submit"]#register {
    background: url(images/register.jpg) no-repeat;
    border: 0;
    clear: both;
    cursor: pointer;
    height: 31px;
    overflow: hidden;
    position: relative;
    left:295px;
    text-indent: -9999px;
    top:42px;
    width:92px;
}
div#register-form input[type="submit"]#register:hover {
	background-position: 0 -32px;
}

Finally, we add some general styling.

div#register-form span {
    display: block;
    margin-bottom: 22px;
}
div#register-form div.title {margin-left:15px}
    div#register-form div.title h1,
    div#register-form div.title span {text-shadow:1px 1px 0px #fff}
    div#register-form div.title h1 {
    margin:7px 0;
}
p.statement
{
    position:absolute;
    bottom:-2px;
    left:10px;
    font-size:.9em;
    color:#6d6d6d;
    text-shadow:1px 1px 0px #fff;
}

Voila! we have our form. Now, let’s move forward with the jQuery functionality.


Step 3. jQuery

First, we need to include jQuery within WordPress. To achieve this, we need to place the following chunk of code before the <head> tag within the header.php file. Remember, as WordPress itself utilizes jQuery, we don’t want to potentially load it twice!

Download Fancybox and place it in your WordPress folder. To organize things a bit more, I’ve created an “Includes” folder.

<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>

Next, open your footer.php file, and place the following before the end of the tag

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/includes/fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<!-- Javascript -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/includes/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/includes/fancybox/jquery.fancybox-1.3.1.pack.js"></script>

And now, let’s call the fancybox method; paste this after the code above and before the closing body tag.

jQuery(document).ready(function() {
    jQuery(".show").fancybox({
        'titleShow'		: 'false',
        'transitionIn'		: 'fade',
        'transitionOut'		: 'fade'
    });
});

We’re done! Our form has been created; we lastly just need to pass the necessary WordPress information to make it function properly.


Step 4. WordPress

There is nothing fancy here; we only require two WordPress snippets, hidden within the wp-login.php file.

The first snippet:

<?php echo site_url('wp-login.php?action=register', 'login_post') ?>

And:

<?php do_action('register_form'); ?>

The final code should look like so:

<div style="display:none"> <!-- Registration -->
    <div id="register-form">
          <div class="title">
              <h1>Register your Account</h1>
              <span>Sign Up with us and Enjoy!</span>
          </div>
    <form action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post">
        <input type="text" name="user_login" value="Username" id="user_login" class="input" />
        <input type="text" name="user_email" value="E-Mail" id="user_email" class="input"  />
        <?php do_action('register_form'); ?>
        <input type="submit" value="Register" id="register" />
        <hr />
        <p class="statement">A password will be e-mailed to you.</p>
     </form>
    </div>
</div><!-- /Registration -->

Please note that it’s really important, and necessary, to have user_login as a name and as an ID in your text input; the same is true for the email input. Otherwise, it won’t work.

And with that, we’re done!


Conclusion

With a touch of code, and some tweaks, we’ve managed to build a great looking “Register Form” for our users. What do you think?

Source: net.tutsplus.com

JustynOS
Feb 11, 2013

just stopping by to say hey

Lavonne
Jul 10, 2013

I wanted to thank you for this excellent read!! I definitely loved every little bit of it. I have you saved as a favorite to look at new stuff you post…

Amie
Aug 7, 2013

This post is genuinely a pleasant one it helps new web users, who are wishing in favor of blogging.

Serena
Aug 9, 2013

I don’t even know how I ended up here, but I thought this post was great. I do not know who you are but definitely you’re going to a famous blogger if you are not already ;) Cheers!

Wilton
Aug 14, 2013

Do you have a spam problem on this blog; I also am a blogger, and I was wondering your situation; many of us have developed some nice methods and we are looking to swap methods with others, please shoot me an email if interested.

Pedro
Aug 14, 2013

I know this web site provides quality dependent content and additional data, is there any other web page which provides such things in quality?

Clark
Aug 14, 2013

Oh my goodness! Amazing article dude! Thank you so much, However I am having difficulties with your RSS. I don’t know why I can’t join it. Is there anybody having the same RSS issues? Anybody who knows the solution will you kindly respond? Thanks!!

Shelly
Aug 14, 2013

wonderful publish, very informative. I’m wondering why the other experts of this sector do not understand this. You must continue your writing. I’m sure, you have a great readers’ base already!

Alphonse
Aug 16, 2013

Magnificent beat ! I wish to apprentice while you amend your web site, how could i subscribe for a blog web site? The account helped me a acceptable deal. I had been a little bit acquainted of this your broadcast provided bright clear concept

Antony
Aug 30, 2013

Hey there, You have done an incredible job. I will certainly digg it and personally suggest to my friends. I am confident they’ll be benefited from this website.

Audrea
Aug 30, 2013

After looking into a handful of the blog posts on your site, I honestly like your technique of blogging. I book-marked it to my bookmark website list and will be checking back in the near future. Please visit my web site as well and tell me your opinion.

Maple
Sep 1, 2013

Hi to every body, it’s my first pay a quick visit of this webpage; this web site includes awesome and genuinely good data for readers.

Stevie
Sep 2, 2013

Tremendous things here. I am very satisfied to see your post. Thank you so much and I am taking a look forward to touch you. Will you kindly drop me a mail?










*