ValidForm Builder

Easy and safe XHTML 1.0 strict forms with validation!

• Home
• Downloads
• Documentation
• Tutorials
• Bug tracker

Get started using one of these easy to learn tutorials.

Before you use ValidForm Builder, we recommend you take a look at one of these easy to follow tutorials and demo's. It will only take you a few seconds and you can choose different skill levels, still a rookie is for everyone who's just getting started with the library I'm getting better is a more advanced tutorial and I wanna go pro is a fully featured registration form.

• Still a rookie
• I'm getting better
• I wanna go pro!

• Getting started:
  A simple contact form

  What are we aiming for?

  Every good website has a contact form instead of additionally to mailto links. We are going to build a form with 3 fields. Name, email address and remarks.

  The PHP code

  First, we need to include the ValidForm Builder code in the PHP page. For more info about the file structure, check out Installing ValidForm Builder in the documentation.

  					require_once("libraries/ValidForm/class.validform.php");
  				

  After that we create an instance of the ValidForm object. We name the form contactForm and add some text to inform the visitor about our required fields.

  					$objForm = new ValidForm("contactForm", "Required fields are printed in bold.");
  				

  Now the cool part starts. We are going to add our first field to the form using the addField method. It's going to be the Name field.

  					$objForm->addField("name", "Your name", VFORM_STRING, 
  					    array(
  					        "maxLength" => 255, 
  					        "required" => TRUE
  					    ), 
  					    array(
  					        "maxLength" => "Your input is too long. A maximum of %s characters is OK.", 
  					        "required" => "This field is required.", 
  					        "type" => "Enter only letters and spaces."
  					    )
  					);
  				

  That's quite a bit of code. Let's find out what just happened by highlighting each argument of the addField method.

  1. name is the id and name of the form field and has to be unique
  2. Your name is the label of the field.
  3. VFORM_STRING is a constant of the ValidForm Builder library and sets 3 things at once:
     • The type of the field. In this case a text field.
     • The default CSS style of the field.
     • The default validation of the field.
  4. Next up is an array with the validation rules. We set two rules:
     • "maxLength" sets the maximum allowed length of the input.
     • "required" sets whether the field is required or not.
  5. The next array sets the alerts for the validation rules.
     • "maxLength" is the alert if the input is too long. The %s will get replaced by the allowed maximum length.
     • "required" is the alert if the field is submitted empty.
     • "type" is the alert for the field type validation. It will be displayed when the input is not valid according to the default type rules.

  Ok, on to the next field. Again the addField method, but now for the Email address.

  					$objForm->addField("email", "Email address", VFORM_EMAIL, 
  					    array(
  					        "maxLength" => 255, 
  					        "required" => TRUE
  					    ), 
  					    array(
  					        "maxLength" => "Your input is too long. A maximum of %s characters is OK.", 
  					        "required" => "This field is required.", 
  					        "type" => "Use the format name@domain.com"
  					    ), array(
  					        "tip" => "name@domain.com"
  					    )
  					);
  				

  This looks almost the same with a few differences:

  • The third argument is VFORM_EMAIL. It's another ValidForm Builer constant and indicates that the field should be validated as an email input field.
  • There is a 6th argument. The array holds special settings for the field and in this case a "tip". The tip will be displayed beneath the field and gives the user an idea about the expected format of the input.

  Last, but not least we are going to add the Remarks field.

  					$objForm->addField("remarks", "Remarks", VFORM_TEXT, 
  					    array(
  					        "maxLength" => 2000
  					    ), 
  					    array(
  					        "maxLength" => "Your input is too long. A maximum of %s characters is OK.", 
  					        "type" => "Enter only characters, punctuation, numbers and spaces"
  					    )
  					);
  				

  This is a bit shorter because we are not making it a required field. The type of the field is VFORM_TEXT which indicates a multi-line textarea field.

  We created the form object and added 3 fields to it. Pretty easy, huh? The next line sets a general alert that will be displayed at the start of the form if the validation failed.

  					$objForm->setMainAlert("One or more errors occurred. Check the marked fields and try again.");
  				

  To finish it off let's set the label of the Submit button. The default label value is "Submit".

  					$objForm->setSubmitLabel("Send");
  				

  The core logic of the form is now ready and we can now start checking if the form was submitted. If so we check if all fields are valid and continue to email the field values to the site owner.

  					$strOutput = "";
  					
  					if ($objForm->isSubmitted() && $objForm->isValid()) {
  					    //*** HTML body of the email.
  					    $strMessage = "<html><head><title></title></head><body>";
  					    $strMessage .= $objForm->valuesAsHtml();
  					    $strMessage .= "</body></html>";
  					
  					    //*** Mail headers.
  					    $strHeaders = "MIME-Version: 1.0\r\n";
  					    $strHeaders .= "Content-type: text/html; charset=utf-8\r\n";
  					    $strHeaders .= "From: Awesome website <form@awesomesite.com>\r\n";
  					
  					    //*** Send the email.
  					    mail("owner@awesomesite.com", "Contact form submitted", $strMessage, $strHeaders);
  					        
  					    //*** Set the output to a friendly thank you note.
  					    $strOutput = "Thank you for your interest. We will contact you as soon as possible.";
  					} else {
  					    //*** The form has not been submitted or is not valid.
  					    $strOutput = $objForm->toHtml();
  					}

  This concludes the PHP part of the Contact form. Only a few more lines of HTML.

  The HTML code

  					<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  					 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  					<html>
  					<head>
  					<title>Contact Form</title>
  					<meta http-equiv="content-type" content="text/html; charset=utf-8" />
  					<link type="text/css" rel="stylesheet" href="css/validform.css" />
  					<script type="text/javascript" src="libraries/jquery.js"></script>
  					<script type="text/javascript" src="libraries/validform.js"></script>
  					</head>
  					<body>
  					
  					<h1>Contact form powered by ValidForm Builder</h1>
  					<?php echo $strOutput ?>
  					
  					</body>
  					</html>
  				

  As you can see we include the following external files:

  • css/validform.css | The skeleton CSS styles for the form.
  • libraries/jquery.js | The jQuery library used for inline alerts.
  • libraries/validform.js | The Javascript part of the ValidForm library.

  Also there is one last line of PHP in the HTML . This code writes either the form to the HTML page or the "Thank you" note if everything was submitted successfully.

  You can download the code for this and other tutorials from the Downloads section.

• Deeper into the rabbit hole:
  The advanced contact form

  That was easy! What's next?

  Assuming you've already done Tutorial 1: Simple contact form, in this tutorial we'll be creating a more advanced contact form using checkboxes and select options.

  The PHP code

  Once again, we first need the ValidForm Builder library to get started:

  					require_once("libraries/ValidForm/class.validform.php");
  				

  Now we start building the ValidForm object. First of all, we need an instance of the object:

  					$objForm = new ValidForm("advContactForm", "Required fields are printed in bold.");
  				

  As you've seen in Tutorial 1, the code above creates a new instance of the VFB object with form id advContactForm and a (not required) default message above the form saying which fields are required.

  We use this code from Tutorial 1 as a basis for our advanced contact form, we've placed some inline comments for your reference.

  					require_once("libraries/ValidForm/class.validform.php");
  					
  					$objForm = new ValidForm("contactForm", "Required fields are printed in bold.");
  					//*** A 'name' field, field type is string.
  					$objForm->addField("name", "Your name", VFORM_STRING, 
  					    array(
  					        "maxLength" => 255, 
  					        "required" => TRUE
  					    ), 
  					    array(
  					        "maxLength" => "Your input is too long. A maximum of %s characters is OK.", 
  					        "required" => "This field is required.", 
  					        "type" => "Enter only letters and spaces."
  					    )
  					);
  					//*** An e-mail field, field type is email.
  					$objForm->addField("email", "Email address", VFORM_EMAIL, 
  					    array(
  					        "maxLength" => 255, 
  					        "required" => TRUE
  					    ), 
  					    array(
  					        "maxLength" => "Your input is too long. A maximum of %s characters is OK.", 
  					        "required" => "This field is required.", 
  					        "type" => "Use the format name@domain.com"
  					    ), array(
  					        "tip" => "name@domain.com"
  					    )
  					);
  					//*** A 'remarks' field, field type is text (HTML: textarea)
  					$objForm->addField("remarks", "Remarks", VFORM_TEXT, 
  					    array(
  					        "maxLength" => 2000
  					    ), 
  					    array(
  					        "maxLength" => "Your input is too long. A maximum of %s characters is OK.", 
  					        "type" => "Enter only characters, punctuation, numbers and spaces"
  					    )
  					);
  					
  					//*** Setting the main alert.
  					$objForm->setMainAlert("One or more errors occurred. Check the marked fields and try again.");
  					
  					//*** As this method already states, it sets the submit button's label.
  					$objForm->setSubmitLabel("Send");
  				

  Let's get advanced!

  Now let's say you want your customers to choose what kind of support they want using a select list. Therefore we need a VFORM_SELECT_LIST form field. We insert the next code between the email and remarks fields.

  					$objSelectList = $objForm->addField("support-type", "Support type", VFORM_SELECT_LIST,
  					        array(
  					                "required" => true
  					        ),
  					        array(
  					                "required" => "You must select a support type."
  					        ),
  					        array(
  					                "tip" => "If you're not sure, just choose 'general'."
  					        )
  					);
  				

  This should be familiar so far, right? It's almost the same as any other addField method we've used so far. There is just one big difference. Thistime, we put the result of this method, in a new object we call $objSelectList. If we look at the HTML hierarchy, we've now created the SELECT element. Next, we want to add OPTION elements to the SELECT element. We can do that using, once again, the addField method on the $objSelectList object.

  					//*** This is what we had so far.
  					$objSelectList = $objForm->addField("support-type", "Support type", VFORM_SELECT_LIST,
  					        array(
  					                "required" => true
  					        ),
  					        array(
  					                "required" => "You must select a support type."
  					        ),
  					        array(
  					                "tip" => "If you're not sure, just choose 'no support'."
  					        )
  					);
  					        //*** This is where the magic happens.
  					        $objSelectList->addField("Select support type", "", true); 
  					        // The default value needs to be empty in order to do a 'required' check.
  					        $objSelectList->addField("Tech support", "tech"); 
  					        // In HTML this looks like: <option value="tech">Tech support</option>
  					        $objSelectList->addField("Friendly support", "friendly");
  					        $objSelectList->addField("No support", "no-support");
  				

  That's all folks!

  This is it! We've now created a contact form including a select list with several options to choose from. Progress so far.

  Check this out.

  Next thing we want to add to our advanced contact form are checkboxes! You create checkboxes the exact same way as you create select lists and other 'list'-items (such as radio lists). We add the next code right underneath the select box:

  					$objCheckboxes = $objForm->addField("why-support", "Why do you want support?", VFORM_CHECK_LIST,
  					        array(
  					                "required" => true
  					        ),
  					        array(
  					                "required" => "Please tell us WHY!"
  					        )
  					);
  					        $objCheckboxes->addField("Dunno", "i-dunno");
  					        $objCheckboxes->addField("I got bored.", "bored", true);  // HTML output: <option value="bored" selected="selected">I got bored.</option>
  					        $objCheckboxes->addField("Just for fun", "fun");
  					        $objCheckboxes->addField("This is what I do", "just-because");
  					        $objCheckboxes->addField("I like to annoy you", "annoy");
  				

  That's it!

  We've now finished our ValidForm object. Check out the result. The only thing we need to do now is some form handling. You've seen the basics of ValidForm handling in Tutorial 1, so I'll just wrap this up a bit. The last bit of code looks like this:

  					if($objForm->isSubmitted() && $objForm->isValid()){
  					        //*** Handle the form, maybe even send the data as an email.
  					        $strOutput = $strReturn; // Set the proper output.
  					}
  					else {
  					        $strOutput = $objForm->toHtml();
  					}
  				

  You can echo the variable $strOutput in any given location. For a full HTML reference, see Tutorial 1.

  You've made it!

  You created a 100% XHTML 1.0 valid advanced contact form including client and server-side form validation.

  For your reference, the working source code of this tutorial is available for download in the downloads section.

• Going pro:
  The fully featured registration form

  Are.. you.. READY?

  Well, you've made it to the final tutorial. Or at least, I assume you've already done the Still a rookie and I'm getting better tutorials. This tutorial is a follow-up on the previous two tutorials so it's essential to take a look at these tutorials first.

  'Nuf said.

  Let's get roling then! We now know how to use the more advanced features of ValidForm Builder but still there's a lot more to discover. We've tried to pack it all together in one (big?) tutorial. We are going to create an (insanely big) registration form.

  The PHP code

  Since you already know some ValidForm basics, this tutorial is slightly different from the others. Thistime we'll just throw some code at you and explain it using inline comments.

  					$objForm = new ValidForm("superRegistrationForm","Welcome to our imaginary website. Please register to access all the good stuff.");
  					
  					//*** Add a paragraph and header above the paragraph
  					$objForm->addParagraph("Oh, and by the way.. I wanted to add some extra text here.", "Forgot something.");
  					
  					$objForm->addFieldset("Personal details");
  					
  					$objGender = $objForm->addField("gender", "Gender", VFORM_RADIO_LIST,
  						array(
  							"required" => true
  						),
  						array(
  							"required" => "You must select your gender!"
  						),
  						array(
  							"tip" => "If you're not sure, select 'both'.",
  							"class" => "vf__inline-select"
  						)
  					);
  						//*** addField($label, $value, $checked = false);
  						$objGender->addField("Male", "male");
  						$objGender->addField("Female", "female");
  						$objGender->addField("Both", "not-sure-yet");
  					
  					
  					$objForm->addField("name","Name",VFORM_STRING,
  						array(
  							"required" => true,
  							"maxLength" => 60
  						),
  						array(
  							"required" => "You forgot your name?",
  							"maxLength" => "Your name is too long. Maximum of %s characters allowed."
  						)
  					);
  					
  					
  					$objForm->addField("last-name","Last name",VFORM_STRING,
  						array(
  							"required" => true,
  							"maxLength" => 60
  						),
  						array(
  							"required" => "You forgot your last name?",
  							"maxLength" => "Your last name is too long. Maximum of %s characters allowed."
  						)
  					);
  					
  					
  					//*** We don't want to add 60 addField methods, so let's use
  					//*** some meta info instead.
  					$objForm->addField("age","Age",VFORM_SELECT_LIST,
  						array(
  							"required" => true
  						),
  						array(
  							"required" => "Please select an age."
  						),
  						array(
  							"start" => 10,
  							"end" => 70
  						)
  					);
  					
  					
  					//*** Special e-mail address validation
  					$objForm->addField("email1","1st e-mail address", VFORM_EMAIL,
  						array(
  							"required" => true
  						),
  						array(
  							"required" => "You'll have to fill in at least one e-mail address",
  							"type" => "This is not a valid e-mail address!"
  						),
  						array(
  							"tip" => "This will also be your username"
  						)
  					);
  					
  					$objForm->addField("email2","2nd e-mail address", VFORM_EMAIL,
  						array(
  							"required" => false
  						),
  						array(
  							"type" => "This is not a valid e-mail address!"
  						),
  						array(
  							"tip" => "Just in case.."
  						)
  					);
  					
  					
  					//*** There is also built-in support for password fields
  					$objForm->addField("password1","Password", VFORM_PASSWORD,
  						array(
  							"required" => true
  						),
  						array(
  							"type" => "This is not a valid password!",
  							"required" => "Please fill in a password"
  						)
  					);
  					$objForm->addField("password2","Repeat password", VFORM_PASSWORD,
  						array(
  							"required" => true
  						),
  						array(
  							"type" => "This is not a valid password!",
  							"required" => "Please retype your password"
  						)
  					);
  					
  					
  					//*** Let's insert a file upload field as well.
  					$objForm->addField("avatar", "Your avatar", VFORM_FILE,
  						array(
  							"required" => false
  						)
  					);
  					
  					
  					//*** Now we want to know all the users' addresses.
  					$objForm->addFieldset("Addresses");
  					
  					
  					//*** Let's start by asking their home address by default
  					$objHome = $objForm->addArea("Home address", false, "home-address");
  					
  						$objStreet = $objHome->addMultiField("Street, Number");
  						$objStreet->addField("home-street", VFORM_STRING,
  							array(
  								"required" => true
  							),
  							array(
  								"required" => "Please fill in your streetname.",
  								"type" => "Only letters and numbers allowed"
  							)
  						);
  						
  						$objStreet->addField("home-number", VFORM_INTEGER,
  							array(
  								"required" => true
  							),
  							array(
  								"required" => "This field is required.",
  								"type" => "Only numbers are allowed."
  							)
  						);
  					
  					$objHome->addField("home-zip-postal", "Zip / Postal Code", VFORM_STRING,
  						array(
  							"required" => true
  						),
  						array(
  							"required" => "Please fill in your streetname.",
  							"type" => "Only letters and numbers allowed"
  						)
  					);
  					
  					$objHome->addField("home-city", "City", VFORM_STRING,
  						array(
  							"required" => true
  						),
  						array(
  							"required" => "Please fill in your streetname.",
  							"type" => "Only letters and numbers allowed"
  						)
  					);
  					
  					$objCountry = $objHome->addField("home-country","Country",VFORM_SELECT_LIST,
  						array("required"=>true),
  						array("required"=>"Select your country")
  					);
  						$objCountry->addField("Select your country","");
  						$objCountry->addField("United States","US");
  						$objCountry->addField("Netherlands","NL");
  						$objCountry->addField("Madagascar","MA");
  					
  					
  					//*** Optional delivery address data
  					$objHome = $objForm->addArea("Delivery address", true, "delivery-address", false);
  						
  						$objStreet = $objHome->addMultiField("Street, Number");
  						$objStreet->addField("delivery-street", VFORM_STRING,
  							array(
  								"required" => true
  							),
  							array(
  								"required" => "Please fill in your streetname.",
  								"type" => "Only letters and numbers allowed"
  							)
  						);
  						
  						$objStreet->addField("delivery-number", VFORM_INTEGER,
  							array(
  								"required" => true
  							),
  							array(
  								"required" => "This field is required.",
  								"type" => "Only numbers are allowed."
  							)
  						);
  						
  					$objHome->addField("delivery-zip-postal", "Zip / Postal Code", VFORM_STRING,
  						array(
  							"required" => true
  						),
  						array(
  							"required" => "Please fill in your streetname.",
  							"type" => "Only letters and numbers allowed"
  						)
  					);
  					
  					$objHome->addField("delivery-city", "City", VFORM_STRING,
  						array(
  							"required" => true
  						),
  						array(
  							"required" => "Please fill in your streetname.",
  							"type" => "Only letters and numbers allowed"
  						)
  					);
  					
  					$objCountry = $objHome->addField("delivery-country","Country",VFORM_SELECT_LIST,
  						array("required"=>true),
  						array("required"=>"Select your country")
  					);
  						$objCountry->addField("Select your country","");
  						$objCountry->addField("United States","US");
  						$objCountry->addField("Netherlands","NL");
  						$objCountry->addField("Madagascar","MA");
  					
  					
  					$objForm->addParagraph("If you want to be registered as a company, please fill in the next fields as wel.", "Are you a company?");
  					
  					
  					$objCompany = $objForm->addArea("I am a company", true, "company", false);
  						
  						$objCompany->addField("company-name", "Company Name", VFORM_STRING,
  							array(
  								"required" => true
  							),
  							array(
  								"required" => "You must provide your company name."
  							)
  						);
  						
  						$objCompany->addField("function", "Title / Function", VFORM_STRING);
  						
  						$objCountry = $objCompany->addField("country", "Country", VFORM_SELECT_LIST,
  							array(
  								"required" => true
  							),
  							array(
  								"required" => "Please select the country where your company is located."
  							)
  						);
  							$objCountry->addField("Select a country","");
  							$objCountry->addField("Netherlands", "NL");
  							$objCountry->addField("Other","Other");
  						
  						$objCompany->addField("chamber-of-commerce", "Chamber of Commerce (KvK) number", VFORM_INTEGER,
  							array(
  								"required" => false,
  								"maxLenght" => 8,
  								"minLength" => 8
  							),
  							array(
  								"type" => "Only numbers are allowed.",
  								"maxLenght" => "A Chamber of Commerce number is max. %s numbers long.",
  								"minLength" => "A Chamber of Commerce number is min. %s numbers long."
  							),
  							array(
  								"tip" => "For Dutch companies only."
  							)
  						);
  						
  						
  						//*** A VFORM_CUSTOM field uses a custom regular expression
  						//*** for field validation, server- and clientside. 
  						$objCompany->addField("tax-number", "Tax number", VFORM_CUSTOM,
  							array(
  								"required" => false,
  								//*** This is a custom regular expression 
  								//*** for a Dutch tax number. 
  								"validation" => '/(NL)(\\d{9})(B)(\\d{2})*$/i',
  								"minLength" => 14,
  								"maxLength" => 14
  							),
  							array(
  								"type" => "This is not a valid Tax number.",
  								"minLength" => "A Tax number is at least %s characters long.",
  								"maxLength" => "A Tax number has a maximum of %s characters.",
  								"hint" => "This value is just a hint. Insert your Tax number or remove the hint value."
  							),
  							array(
  								//*** A hint value is displayed inside the input field
  								//*** and is not allowed to be submitted.
  								"hint" => "NL123456789B12",
  								"tip" => "For Dutch companies only."
  							)
  						);
  						
  					//*** Captcha image validation to keep those bots out.
  					$objForm->addField("captcha", "Are you human?", VFORM_CAPTCHA, array("required" => true));
  						
  					/* 	
  					 * As soon as the client side validation is done, alert the user
  					 * that we will continue validating serverside. This uses the
  					 * validate() function from the javascript ValidForm class.
  					 * 
  					 * Ofcourse you can always add a custom javascript function like
  					 * an AJAX request.
  					 */
  					$objForm->addJSEvent("submit","function(){ if(objForm.validate()){ alert('Client side validation is done. We now continue to validating the data serverside.');} }");
  					
  					
  					//*** Setting the main alert.
  					$objForm->setMainAlert("One or more errors occurred. Check the marked fields and try again.");
  					
  					//*** As this method already states, it sets the submit button's label.
  					$objForm->setSubmitLabel("Send");
  					
  					//*** Handling the form data.
  					if($objForm->isSubmitted() && $objForm->isValid()){
  						$strOutput = "<p>Thank you for submitting the form. However, we didn't save any data because this is just an example page.</p>";
  					}
  					else {
  						$strOutput = $objForm->toHtml();
  					}
  					
  					/*
  					 * Use echo $strOutput; somewhere in your code to insert the form
  					 * or it's results.
  					 */
  					

  Check it out!

  You want to see the results of the above code? Or do you want to download the source code instead?