Basic registration with eForm

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'] = $fields['name'];
		$dbTable['email'] = $fields['email'];
		$dbTable['receiveEmails'] = $fields['receiveEmails'];
		$dbTable['address'] = $fields['address'];
		$dbTable['category'] = $fields['category'];
		$dbTable['comments'] = $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 *.

Name:
Email:
Subject:
Comment: *

Help prevent spam - enter security code above:
 

mrhaw
Posts: 1

YOU ROCK!
Reply #2 on : Tue July 13, 2010, 15:41:02

---

THANK YOU!

cipa
Posts: 1

Re: Basic registration with eForm
Reply #1 on : Tue July 13, 2010, 16:16:26

---

Thanks for your support :).

I just discovered a problem with registrationFormTpl. Please update your code if it's the case