Advertisement
WordPress

Quick Tip: Making a Fancy WordPress Register Form from Scratch

by

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?

Related Posts
  • Code
    Theme Development
    Custom Controls in the Theme CustomizerTheme customizer custom control 400
    In the last article, we explored the advanced controls available in the Theme Customizer, and how to implement them. We’re going to look at how to create our own custom control, allowing you to choose which Category of Posts are displayed on the home page. To get started, download version 0.6.0 of our Theme Customizer Example.Read More…
  • Code
    HTML5
    HTML5: Battery Status APIPdl54 preview image@2x
    The number of people browsing the web using mobile devices grows every day. It's therefore important to optimize websites and web applications to accommodate mobile visitors. The W3C (World Wide Web Consortium) is well aware of this trend and has introduced a number of APIs that help with this challenge. In this article, I will introduce you to one of these APIs, the Battery Status API.Read More…
  • Web Design
    HTML/CSS
    Creating Friendlier, “Conversational” Web FormsForm retina
    Web forms are constantly a hot topic when it comes to web design and user interaction. The reasons for this are vast, but one of the more obvious reasons is that forms are the most basic way for a user to input information into your application. In this article, we'll discuss a few techniques that allow your forms to respond to the user's input, while helping to obscure unnecessarily confusing or overwhelming elements.Read More…
  • Web Design
    UX
    Implementing the Float Label Form PatternForm float input retina
    Using Matt Smith’s mobile form interaction design as a guide, we will create a stunning form interaction for the web that’s both beautiful and accessible using HTML, CSS and JavaScript.Read More…
  • Web Design
    HTML/CSS
    Foundation for Beginners: Custom Forms and SwitchesFoundation form retina
    Following on from our look at buttons in Zurb's Foundation, let's now take a look at custom forms and switches. During this tutorial we're going to work on an exercise; a contact form which you can add to your projects or just play around with. Once we've built that, we'll move onto other form elements.Read More…
  • Code
    JavaScript & AJAX
    Building Ribbit in MeteorRibbit meteor preview retina
    This is a continuation of the Twitter clone series with building Ribbit from scratch, this time using Meteor.Read More…