Understanding form structure

Basic HTML structure of core form

<form action="form-data/formdata.php" class="form-widget" data-popup="popup-contact">
	
	<input type="hidden" name="to" value="receiver@mail.com">

	<input class="form-control" 
		data-label="Name" 
		required
        data-msg="Please enter name." 
		type="text" 
		name="name" 
		placeholder="Enter your name">

	<input class="form-control" data-label="Email" required data-msg="Please enter email." type="email" name="email" placeholder="Enter your email">
	<textarea class="form-control" data-label="Message" required data-msg="Please enter your message." name="message" placeholder="Add your message" cols="30" rows="10"></textarea>
	<button type="submit" class="btn btn-primary"><i class="fa fa-envelope-o"></i> Submit</button>
</form>
  • In above code class=”form-widget” is hook of javascript to activate form functions. Form dose not work without “form-widget” class
  • Set receiver’s mail id in hidden field value as display in above code highlighted line no. 3. These settings also possible to set directly in formdata.php file if you do not wish to display email ID in HTML source.
  • data-label=”Name” represent custom labels of value which are use in mail content.
  • data-msg=”Please enter name.” is validation message if field is mandatory .
  • All other attributes are common form field’s attributes.

Validation rules in javascript

rgen.global_validation = {
	rules: { 
		email   : { required: true, email: true },
		name    : { required: true },
		message : { required: true },
		...
		...
		...
	},
	msg: {
		email: {email: "Please, enter a valid email"}
	},
	successMsg : "... SUCCESS MESSAGE ...",
	errorMsg   : "... ERROR MESSAGE ..."
}
  • R.Gen script include common validation rules which are used in all forms of landing pages. You can set your own validation rule according to requirement

Form PHP file settings

$to = $_POST['to']['val']; // <=== Set static email here.
  • As explain in above HTML structure section it is also possible to set receiver’s email directly in
    form-data / formdata.php file
  • Above is example code. Set your email ID in place of $_POST[‘to’][‘val’] code.

 

 

Related Articles