Adding a 'quick registration form' to a widget

[thoughton]

On our homepage we want to have a ‘quick reg’ form in a widget in the sidebar. This is in addition to the main ‘registration page’.

Previously I had a normal registration page, and then I copied the code into a text widget to display in the homepage sidebar. The code I copied looked like this:

<div class="swpm-registration-widget-form">
<form id="swpm-registration-form" name="swpm-registration-form" method="post" action="">
<input type ="hidden" name="level_identifier" value="c81e728d9d4c2f636f067f89cc14862c" />
<table>
<tr>
<td><input type="text" id="user_name" placeholder="Choose a username" class="validate[required,custom[noapostrophe],custom[SWPMUserName],minSize[4],ajax[ajaxUserCall]]" value="" tabindex="1" size="28" name="user_name" /></td>
</tr>
<tr>
<td><input type="text" id="email" placeholder="Your email" class="validate[required,custom[email],ajax[ajaxEmailCall]]" value="" tabindex="2" size="28" name="email" /></td>
</tr>
<tr>
<td><input type="password" autocomplete="off" id="password" placeholder="Password" value="" tabindex="3" size="28" name="password" /></td>
</tr>
<tr>
<td><input type="password" autocomplete="off" id="password_re" placeholder="Password again" value="" tabindex="4" size="28" name="password_re" /></td>
</tr>
<tr>
<td><input type="text" id="first_name" placeholder="First name" value="" tabindex="5" size="28" name="first_name" /></td>
</tr>
<tr>
<td><input type="text" id="last_name" placeholder="Last name" value="" tabindex="6" size="28" name="last_name" /></td>
</tr>
<tr>
<td><input type="submit" value="Register" tabindex="8" id="submit" name="swpm_registration_submit" /></td>
</tr>
</table>
<input type="hidden" name="action" value="custom_posts" />
<input type="hidden" id="name_of_nonce_field" name="name_of_nonce_field" value="ed349dc73d" /><input type="hidden" name="_wp_http_referer" value="/_wp/?page_id=18" /></form>
</div>
<script>
jQuery(document).ready(function($){
$.validationEngineLanguage.allRules['ajaxUserCall']['url']= 'http://digitalhub.drench-development.com/_wp/wp-admin/admin-ajax.php';
$.validationEngineLanguage.allRules['ajaxEmailCall']['url']= 'http://digitalhub.drench-development.com/_wp/wp-admin/admin-ajax.php';
$.validationEngineLanguage.allRules['ajaxEmailCall']['extraData'] = '&action=swpm_validate_email&member_id=';
$("#swpm-registration-form").validationEngine('attach');
});
</script>

This worked as expected. Filling in this quick reg form registers the user. They still have to go to the login page and login manually.

Recently I switched to the ‘Form Builder’ for my registration form. I treid the same approach of copying the code into a widget, but it doesn’t work. This is the code I copied:

<div id="swpm-form-1" class="swpm-form-builder-container">
	<form id="digitalhub-media-reg-form-1" class="swpm-form-builder swpm-form-1 " method="post" enctype="multipart/form-data">
	<input type="hidden" name="form_id" value="1" /><input type ="hidden" name="level_identifier" value="c81e728d9d4c2f636f067f89cc14862c" />
		<fieldset class="swpm-fieldset swpm-fieldset-1 fieldset " id="item-swpm-1"><div class="swpm-legend"><h3>Register</h3></div>
			<ul class="swpm-section swpm-section-1">
				<li class="swpm-item swpm-item-text" id="item-swpm-2"><label for="swpm-2" class="swpm-desc">User Name  <span class="swpm-required-asterisk">*</span></label><span class="swpm-span"><input type="text"  name="swpm-2" id="swpm-2" value="" class="swpm-text  swpm-medium required"  /><label>User Name</label></span></li>
				<li class="swpm-item swpm-item-text" id="item-swpm-11"><label for="swpm-11" class="swpm-desc">First name  <span class="swpm-required-asterisk">*</span></label><input type="text" name="swpm-11" id="swpm-11" value="" class="swpm-text  swpm-medium  required  "  /></li>
				<li class="swpm-item swpm-item-text" id="item-swpm-12"><label for="swpm-12" class="swpm-desc">Last name  <span class="swpm-required-asterisk">*</span></label><input type="text" name="swpm-12" id="swpm-12" value="" class="swpm-text  swpm-medium  required  "  /></li>
				<li class="swpm-item swpm-item-password" id="item-swpm-3"><label for="swpm-3" class="swpm-desc">Password  <span class="swpm-required-asterisk">*</span></label><div class="swpm-span"><div><input type="password" placeholder="Type password here" name="swpm-3" id="swpm-3" value="" class="swpm-text swpm-medium required" /></div><div><input type="password" placeholder="Retype password here" name="swpm-3_re" id="swpm-3" value="" class="swpm-text swpm-medium required" /></div><label>Password</label></div></li>
				<li class="swpm-item swpm-item-text" id="item-swpm-4"><label for="swpm-4" class="swpm-desc">Membership Level  <span class="swpm-required-asterisk">*</span></label><input type="hidden"  name="swpm-4" id="swpm-4" value="2" class="swpm-text swpm-medium required" /><div> Media visitor</div></li>
				<li class="swpm-item swpm-item-email" id="item-swpm-5"><label for="swpm-5" class="swpm-desc">Email  <span class="swpm-required-asterisk">*</span></label><span class="swpm-span"><input type="email" name="swpm-5" id="swpm-5" value="" class="swpm-text  swpm-medium required email" /><label>Email</label></span></li>
			</ul>&nbsp;
		</fieldset>
		<fieldset class="swpm-fieldset swpm-fieldset-2 verification " id="item-swpm-6" style="display:block">
			<div class="swpm-legend"><h3>Are you human?</h3></div>
			<ul class="swpm-section swpm-section-2">
				<li class="swpm-item swpm-item-secret"  style="display:block"><label for="swpm-7" class="swpm-desc">Please enter any two digits <span class="swpm-required-asterisk">*</span></label><input type="hidden" name="_swpm-secret" value="swpm-7" /><span class="swpm-span"><input type="text" name="swpm-7" id="swpm-7" value="" class="swpm-text  swpm-medium  required {digits:true,maxlength:2,minlength:2} " style="display:block" /><label>Example: 12</label></span><li style="display:none;"><label>This box is for spam protection - <strong>please leave it blank</strong>:</label><div><input name="swpm-spam" /></div></li>
				<li class="swpm-item swpm-item-submit" id="item-swpm-8">
                <input type="submit" name="swpm-submit" id="swpm-8" value="Submit" class="swpm-submit " />
                </li>
			</ul>
		</fieldset>
		<input type="hidden" name="_wp_http_referer" value="/membership-join/membership-registration/" /></form></div> <!-- .swpm-form-builder-container -->
<script>
jQuery(document).ready(function($){
$.validationEngineLanguage.allRules['ajaxUserCall']['url']= 'http://www.digitalhub.media/wp-admin/admin-ajax.php';
$.validationEngineLanguage.allRules['ajaxEmailCall']['url']= 'http://www.digitalhub.media/wp-admin/admin-ajax.php';
$.validationEngineLanguage.allRules['ajaxEmailCall']['extraData'] = '&action=swpm_validate_email&member_id=';
$("#swpm-registration-form").validationEngine('attach');
});
</script>

This does NOT work. If I register using this form I cannot login using the same details. it also doesn’t redirect after registration as specified in the Form Builder form, I would like that functionaility as well please.

[mbrsolution]

Hi thoughton, I am not sure about the Form builder add-on, but the plugin allows you to add a shortcode to the Text widget. Doesn’t the Form builder add-on allow for the same option of adding a shortcode to the text widget?

Regards

[thoughton]

Thanks for the suggestion i will look into it. However part of the problem is that Form builder only lets you make one registration form for some reason, so I would need to manually remove some of the less important form fields from the ‘quick reg’ version (in the quick reg version we only ask their name, email and password).

[thoughton]

Muhaha, thanks for the suggestion. The shortcode in the widget does work (redirection included, yay). So I copied the code it generates and was able to remove the fields I don’t need. All good now!

[Author]

Posts