Build an Event Registration System with CGCalendar and Formbuilder in CMS Made Simple, Part One

CMS Made Simple Beyond the Basics – Managing Event Registrations

This article will explore how to use Smarty template variables and two modules to create an event Registration System. It will feature an event listing, registration form, emailed registrations details, submissions saved to a file for admin use, and the registered person will receive an emailed confirmation.

eventlist-registrationform

~Install Required Modules~
The two modules needed for this system are CGCalendar and Formbuilder. They can be installed using the Module Manager or downloaded from the Development Forge and installed manually.

~Create Pages~
Once the modules are installed, create two new Content Pages. The first will be a page to display the upcoming events. The following template tag can be placed into the page’s content box:
{cms_module module="CGCalendar" display='upcominglist'}
I usually disable the WYSIWYG editor when the page content contains template tags because depending upon the settings for your editor, it may try to wrap the tag in a paragraph (<p></p>) element.

The second page will hold the registration form. Use the following tag to load a Formbuilder contact form:
{Formbuilder form="EventRegistration"}
We will return to this page later in the tutorial to add additional parameters to the Formbuilder tag. The second part of this tutorial will create the EventRegistration contact form in Formbuilder.

~Configure Event Template~
Open the CGCalendar module, and click on the Templates link and then go to the Upcoming Templates tab. Open the existing Sample template or create a new one. This template will have Smarty variables that will contain information about the event. The event variables will pass information to the Formbuilder module using Query Strings in a link.

Find the $events foreach loop ({foreach from=$events key=key item=event}) and immediately below it, create a new variable called, “EventTitle” by adding the following to the template:

{assign var="EventName" value=$event.event_title scope=global nocache}

To add the event’s start date, find the first instance of the following tags in the template:
{$event.event_date_start|date_format:"%e"} {$month_names[$month_number]} {$event.event_date_start|date_format:"%Y"}
And add the tag below to assign the start date to a variable:

{assign var="EventStart" value=$event.event_date_start|date_format:"%m-%e-%Y" scope='global' nocache}

Next, locate the following event end date tags:
{$event.event_date_end|date_format:"%d"} {$month_names[$end_month_number]} {$event.event_date_end|date_format:"%Y %H:%M"}
And, assign the event end date to a variable:

{assign var="EventEnd" value=$event.event_date_end|date_format:"%m-%e-%Y" scope='global' nocache}

Note, due to the placement of this tag within the calendar’s template logic, this variable will only be set if the event’s end date is different than the event’s start date.

There may be other event fields that will be useful to have available during the registration process or helpful to event admins. For example, the event summary or the URL link to the event’s detail page:

{assign var="EventURL" value=$event.url scope="global" nocache}

Similar steps can be taken to set up the same variables inside of the Event Detail template. The final step is to link to the event registration page created earlier in this tutorial. The link should be inside of the Upcoming list template. If the Event Detail page and template is being used, the link to the registration form will need to be placed inside of that template too.

<a href="event-registration">Register for this Event</a>

However, this link should contain the Event Name and Event Date Smarty variables set earlier using the {assign} tags. If additional field data was set as a variable, that too must become part of the link.  The link will carry over the data needed to the page that loads the registration form. To achieve this, the link will use Query Strings:

<a href="event-registration/?EventName={$EventName}&EventStart={$EventStart}&EventEnd={$EventEnd}">Register for this Event</a>

~Retrieve the Data~
Open and edit the page containing the Formbuilder tag – the one that will hold the registration form.  The data passed to it has to be retrieved from the URL clicked from the event list page. And, now is a good time to test your query strings to confirm that data is being passed correctly.

Add the following to the page’s content box and save the changes:

{$smarty.get.EventName}<br>
{$smarty.get.EventStart}<br>
{$smarty.get.EventEnd}<br>

Now, when clicking the, “Register for the event” link from the event list page, the event data should be printed onto the event registration page. For example,

My Cool Test Event
03- 7-2014
03-11-2014

At this point, the variables are loaded correctly in the CGCalendar template and the event registration page can successfully read the data passed to it using query strings in the URL. The $smarty.get tags can be removed from the page after testing.

Part Two of this tutorial will show how to set up a contact form with Formbuilder to use for registrations and how to populate the form with the event data collected from the query strings.

Please post questions and comments below and Part Two will be published soon.


Looking for quality CMS Made Simple Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , , , , , , , | Posted under CMS Made Simple | RSS 2.0

Author Spotlight

JohnnyB

JohnnyB

I've been a full-time front-end web developer for nine years working with design and marketing agencies and businesses located all over the USA. CMS Made Simple has been my go-to Content Management System since mid 2006.

One Comment on Build an Event Registration System with CGCalendar and Formbuilder in CMS Made Simple, Part One

  1. geepers says:

    Good start on this on JohnnyB, looking forward to Part 2. Any thoughts on tying this in with payments (PayPal or some such) as well?

Leave a Reply

Your email address will not be published. Required fields are marked *


+ 1 = 7

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>