How to embed AJAX site registration in a Joomla page

Recently I needed to add a Joomla registration form to an article page. The purpose of this is to be able to track interest in my and get people to sign up so that we can begin a business relationship. This same technique could also be used on “squeeze pages” (landing pages from paid ads). I wanted the signup process to be as easy as possible for anyone coming to my “Find out more” page. Here’s the process I followed.

1. Install Ajax Register (20 Euro)

This component allows you to customize the registration fields, and provides AJAX style checking for existing usernames and password strength, as well as a few other nice improvements above the standard Joomla registration.

2. Install Plugin Include Component (Free)

Plugin Include Component lets you put a component’s contents anywhere in an article or HTML module using the {component url=’…’} syntax.

3. Make a hidden menu item for the Ajax Register page.

You need a URL for the Plugin Include Component. Make a menu item which points to an Ajax Register page, copy the URL from the front end of the website, then move the menu item to a hidden menu somewhere.

4.  Make a Custom HTML module, assigned to the article in which you want Ajax Register to appear The content of the HTML will look something like this:

 Why dontcha register now!
 {component url='index.php?option=com_ajaxregister&view=registration&Itemid=XXX' }
 OKAY!?

You’ll use the URL from step 3 above in order to populate the Itemid value.

You can style this however you want, or even script a slide-up, etc.

Under module Options tab, under Basic Options enable “Prepare Content”.

Show the module only for Guest users, otherwise the page will render incorrectly when displayed for logged-in users.On the Details tab of the module, set “Access” to “Guest”.

On the Details tab, choose the appropriate module position where you want the registration form to appear.

You may also want to set “Show Title” to “Hide” on the Details tab.

Finally, on the Menu Assignment tab, set this module to show only on the target page(s).

6. (Optional) In your template CSS, hide the Ajax Register title text with the following:

form.form-validate legend {
  display:none;
}

7. Verify that everything is working.

8. Configure Ajax Register to your liking: form fields and other options.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s