Basic "event" registration with eForm

on 08-Jul-2010 | Comments ( 12 ) Tags: CSS, eForm, Evolution

This tutorial shows how to create a basic registration form that, when submitted, sends a notification email and saves the values into a custom table.

To accomplish all the above you will need to have a basic understanding of MODx, PHP, MySql, eForm and off-course some HTML and CSS.

Create the registration table

Using PhpMyAdmin or a similar tool you need to create a new table in the database you are using for your MODx setup.

CREATE TABLE `registrations` (
  `id` int(11) NOT NULL auto_increment,
  `name` varchar(50) NOT NULL,
  `email` varchar(100) NOT NULL,
  `receiveEmails` varchar(50) NOT NULL,
  `address` varchar(100) NOT NULL,
  `category` varchar(50) NOT NULL,
  `comments` text NOT NULL,
  `date` varchar(50) NOT NULL,
  PRIMARY KEY  (`id`)
);

Build the eForm call

Use the following code in your registration page. Please don't paste the code in the rich textarea unless you know what you're doing. You can also use a chunk or a dedicated TV to insert the calls in your MODx template.

[!registration2Db!] [!eForm? &formid=`registrationForm` &to=`YOUR-EMAIL@DOMAIN.com` &from=`((email))` &fromname=`((name))` &tpl=`registrationFormTpl` &report=`registrationNotificationTpl` &thankyou=`registrationThanks`  &subject=`New registration from ((name))` &eFormOnBeforeMailSent=`registration2Db`!]

The registration2Db snippet must be called before the eForm call as it contains the function that will save the information in the registration table.

The registration form

Here's a basic sample of a registration form. Create a chunk called registrationFormTpl and paste the following.

[+validationmessage+]
<form method="post" action="[~[*id*]~]" id="registrationForm">
    
	<input type="hidden" name="formid" value="registrationForm" />
	
	<div class="row">
		<label for="name">Name *</label>
		<input type="text" name="name" id="name" eform="Name:string:1" />
	</div>
	
	<div class="row">
		<label for="email">Email *</label>
		<input type="text" name="email" id="email" eform="Email:email:1"/>
	</div>
	
	<div><input type="checkbox" checked="checked" value="YES" name="receiveEmails" /> Yes, I would like to receive email updates and marketing information.</div>
	
	<div class="row">
		<label for="address">Address *</label>
		<input type="text" name="address" id="address" eform="Address:string:1" />
	</div>
	
	<div class="row">
		<label for="category">Category *</label>
		<select name="category" id="category" size="1" eform="Category:string:1">
	      	<option value=""> ---  Select one --- </option>
	      	<option value="Category 1">Category 1</option>
	      	<option value="Category 2">Category 2</option>
	      	<option value="Category 3">Category 3</option>
		</select>
	</div>
	
	<div>
		<label for="comments">Comments</label> <br/>
		<textarea cols="40" rows="10" name="comments" id="comments" eform="Comments:html:0"></textarea>
	</div>
	
	<input type="submit" name="submit" value="Submit"/>
</form>

The notification

Create another chunk called registrationNotificationTpl.

<h3>Registration details</h3>
<p>Note: The following information can also be found in the database. Check out the "registrations" table!</p>
<table>
	<tr><td>Name:</td><td>[+name+]</td></tr>
	<tr><td>Email:</td><td>[+email+]</td></tr>
	<tr><td>Receive Emails:</td><td>[+receiveEmails+]</td></tr>
	<tr><td>Address:</td><td>[+address+]</td></tr>
	<tr><td>Category:</td><td>[+category+]</td></tr>
	<tr><td colsapn="2">Comments:<br/>[+comments+]</td></tr>
</table>

The thank you message

And this is another chunk called registrationThanks.

<p>Thank you for your registration!</p>

You can also use the gotoid parameter. See the documentation folder in your eForm snippet folder.

The registration2Db snippet

Create a new snippet and use the code below.

<?php
	function registration2Db( &$fields ){
		
		global $modx;

		$dbTable = array();

		$dbTable['name'] = $modx->db->escape($fields['name']);
		$dbTable['email'] = $modx->db->escape($fields['email']);
		$dbTable['receiveEmails'] = $modx->db->escape($fields['receiveEmails']);
		$dbTable['address'] = $modx->db->escape($fields['address']);
		$dbTable['category'] = $modx->db->escape($fields['category']);
		$dbTable['comments'] = $modx->db->escape($fields['comments']);
		$dbTable['date'] = date("F j, Y, g:i a");
		
		$dbQuery = $modx->db->insert( $dbTable, 'registrations' );		

		return true;
	}
	
	return '';
?>

The CSS

Finally lets style the form with some CSS.

#registrationForm{}
#registrationForm div {margin: 0 0 10px 0;overflow: hidden}
#registrationForm div.row label{display: block; width: 130px; float: left; line-height: 20px}
#registrationForm div.row input{width: 300px;}
#registrationForm textarea{width: 430px; height:100px}

View Demo

Note: Saving to database and the email notification have been disabled.

That's all. Let me know if I missed or misspelled something.

Write a comment

  • Required fields are marked with *.

If you have trouble reading the code, click on the code itself to generate a new random code.
 
mrhaw
Posts: 8
Comment
YOU ROCK!
Reply #12 on : Tue July 13, 2010, 14:41:02
THANK YOU!
cipa
Posts: 4
Comment
Re: Basic registration with eForm
Reply #11 on : Tue July 13, 2010, 15:16:26
Thanks for your support :).

I just discovered a problem with registrationFormTpl. Please update your code if it's the case
Donat
Posts: 8
Comment
Re: Basic registration with eForm
Reply #10 on : Tue October 05, 2010, 10:27:13
I made a request to the table, created a chunk of registration, then a new page, podklyuchill it to the new template, which posted a snippet and chunk. A form appears, but when registering a new user does not msql not a user administration panel modx...
cipa
Posts: 4
Comment
Re: Basic registration with eForm
Reply #9 on : Tue October 05, 2010, 11:20:44
Hi Donat,

This tutorial is not for registering users to your site. Is for building a registration form for some kind of event. You need to use the WebSignup snippet that comes with modx in order to register users to your site.

Ultimately you can do it by modifying this tutorial but I don't recommend it unless you know the table structure within modx.

Also, in order to access the saved information you need to have access to a db tool like PhpMyAdmin.
Donat
Posts: 8
Comment
Re: Basic registration with eForm
Reply #8 on : Tue October 05, 2010, 12:18:35
Now I understand..
webweaver
Posts: 8
Comment
Revolution solution?
Reply #7 on : Wed April 06, 2011, 11:31:59
Thanks for all your tutorials (great!)
Is there a revo alternative that will allow email and save to table similar to eform for evo?
cipa
Posts: 4
Comment
Re: Basic "event" registration with eForm
Reply #6 on : Thu April 07, 2011, 06:28:59
Try FormIt with FormIt2Db(I think)
Steve
Posts: 8
Comment
Validate Emails
Reply #5 on : Mon November 21, 2011, 06:58:47
How do I modify this snippet to check if the e-mail of the subscriber already exists - and inserts it if it doesn't exist and does not insert it if it already exists?

This is to be done to avoid duplicate e-mails.
cipa
Posts: 4
Comment
Re: Basic "event" registration with eForm
Reply #4 on : Mon November 21, 2011, 07:07:21
You could use something like this:
$email = $modx->db->getValue($modx->db->query( 'SELECT email FROM ' . $modx->getFullTableName('YOUR_TABLE') .' WHERE email = "' . $dbTable['email'] . '"'));
if(!$email){
$dbQuery = $modx->db->insert( $dbTable, 'registrations' );
}
Not tested
Checco
Posts: 8
Comment
Thank you
Reply #3 on : Sat March 17, 2012, 04:34:04
Hi cipa,
I want to say thank you for this clear and helpful tutorial!

What snippet would you recommend to display the table values?

Thanks
Checco
business loans
Posts: 8
Comment
Re:
Reply #2 on : Sun July 22, 2012, 03:57:28
Do not enough cash to buy a house? Don't worry, because that is possible to take the loan to work out such problems. Thus take a bank loan to buy all you need.
qqqqq
Posts: 8
Comment
sss ngg
Reply #1 on : Mon April 28, 2014, 11:46:39
aaaa
aaaa


aaaaaa

Quick modx Evolution Tags

  • cached [[snippet]] or uncached [!snippet!]
  • {{chunk}}
  • [+placeholder+]
  • [*resourceField/TV*]
  • [^timing^]
  • [~link~]

Quick modx Revolution Tags

  • [[snippet]]
  • [[$chunk]]
  • [[+placeholder]]
  • [[*resourceField/TV]]
  • [[~link]]
  • [^timing^]
  • [[++systemSetting]]
  • [[%languageStringKey]]
  • all tags can be called un-cached like: [[! snippet]]

Timing Tags (Evo and Revo)

  • [^qt^] - Query time
  • [^q^] - Query count
  • [^p^] - Parse time
  • [^t^] - Total time
  • [^s^] - Source
© modxRULES! 2009-2014