Quick Tip: Making a Fancy WordPress Register Form from Scratch

Quick Tip: Making a Fancy WordPress Register Form from Scratch

on May 18th 2010 with 94 comments
Tutorial Details
  • Difficulty: Intermediate
  • Estimated Completion Time: 30 min

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!

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

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

Next, open your footer.php file, and place the following before the end of the </body> 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?

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm a Web Designer from Venezuela, I love Photoshop, and enjoy making website templates for ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
  • http://sideradesign.com paul

    Rudy, I’m currently integrating this in Genesis, and it works fine. I’m using jquery colorbox for the popup.the only thing I can’t get to work is that when I register it doesn’t stay in the modal window but closes it and goes to the wp-login.php

  • sam

    Hey.

    Great tutorial! :)

    Btw, why is it not sending the password to my email?

    thanks!

    • http://www.pinoytechhub.com pinoytechhub

      what wordpress are you using? if you’re using wordpress version 3.1.3, these are the codes missing:

      and

      >

      Notice the name= and id= from the code provided their null that is why no parameters are being passed to the registration.

      • http://www.pinoytechhub.com pinoytechhub

        ooopppsss i can’t paste the code…

        just copy the last piece of the code under… “The final code should look like so:”

  • Sam

    Great Tutorial , But Please Tell Me Where Could I Put The Styling In Which File ?

  • Tony Luth

    I love the secure.png image you used, any way to steal that from you???

  • Petter

    When I’m clickin within the fields my fancybox is closing, as if I did press the close button. Any help on that?

  • Tobias Jurga

    Well, for me it works, it loads in fancybox but it’s not loading caring about the styles i used in my css somehow – I don’t know why, the background is black, i get like a 10px white border around it – I checked my css for duplicate names but everything looks fine, what can I do?

  • http://jamiemitchelldesign.com.au Jamie

    hi there…

    i noticed in the Meedoo theme, when i click submit in the form, it automatically goes to the login page

    how is this achieved?

    i have created an order form in a fancybox/iframe, but when i click submit it just stays in the fancybox.

    is it because it is an iframe…

    hope you can help

  • http://www.yourwebagency.co.uk/ Edgars

    This is really great, together with little wp-login.php tweaking this will make registration look way more professional

  • ink9

    Can i add a password field to enable user set their password.

  • Robert

    All you need is this, with ajax fallback as well.

    you don’t need the ids actually, all you need is method post, proper names and that’s pretty much.

  • http://tokyoclock.co.uk Tim

    This is excellent! Almost exactly what I need =)
    I must ask though, instead of having the pop up box appear when you click ‘login’, how can I make it appear when a visitor clicks to go to a particular page? I have one page that I want visitors to log in before viewing, so I’d love for this posh pop up to show to prompt them to log in to view the page fully, and to not show when they are already logged in.
    Any ideas how I can do this? Thanks!!

  • http://www.kubodo.com/ Kubodo

    I followed tutorial above step by step but there is no pop up appear when i clicked on register link, could you help me please

    • shaimaa eid

      something may help you Kubodo,if you copied the code make sure that you have uploded the fancybox folder into a new directory in your theme and name it includes ,check the file name of the fancybox scripts and css you may have another version than the one used here .

    • Gary

      <<<<< add this

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

      <<<<< add this

  • neomale

    Hi, i try to make it work but it doesn’t. The form doesn’t pop up.

    I change the fancybox for the latest one 1.3.4

    Can you tell me something about this code

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

    You ask to add it in the footer.php just befor the what i done. But this script appear in my front end, i suppose it should not??? Is there any error in it?

    Regards

    • neomale

      Ok, just found the solution the code should be inside script balise.

  • neomale

    Can someone tell me where to put the two snippet in the wp-login.php file. I suppose is this that make not functioning the form. When i fill the two fields and press enter it redirect me to the wp-signup.php. I suppose it is not what the form is suppose to do.

    So i think is the two snippet that i don’t add at the right place but i have no clue where to add it.

    Can someone can help me!

  • dina

    when register it didn’t actually send e-mail .why?
    and if you submit without filling the name and email it redirect me to wp login page and i want instead to show text to make them add these data without leaving the page, how can i do that

    • mojtaba

      I have same problem.is there any one answer us?

  • Sam

    Awesome! Works perfectly with WP version 3.4, I used it in my plugin (with my own popup box), instead adding the code to header.php, footer.php I used wp_head, wp_footer hooks. Great job, thanks.

  • Sam

    Hey, this may help some people!
    wp_enqueue_script(“jquery”) doesn’t work with all the themes, it doesn’t work for example with standard ‘twenty ten’ or ‘twenty eleven’. I spent all day trying solve this problem, and then instead enqueue jquery library, I used standard link to google jquery library:

    and now it works! Just incase you can also paste the following code in your header, it deregisters fancybox if it’s used in other plugins or theme, so it’s used just ones:
    wp_deregister_script(‘jquery.fancybox’);
    wp_deregister_script(‘fancybox’);
    wp_deregister_script(‘jquery-fancybox’);
    Thanks.

  • Paula

    I need redirect to a special page after send form.
    How I do it?

    • matt

      Same here, Want it to go back to the login page rather than the wordpress login page.

  • http://www.wpgoo.com ayman

    great tutorials…alot thanks

  • Eric McNiece

    Thanks for the tutorial! How can we add extra registration fields?

← Older Comments