MooTact generates and displays a contact form on top of a mask over the rest of the page. It's a Lightbox Contact Form.
The user's input is submitted with Request.JSON and expects the server to respond with JSON. A simple PHP server script that leverages Swift Mailer is provided.
Instantiate a MooTact object and call show();
#JS
window.addEvent("domready", function(){
$("notify").set('highlight', {duration: 'long'});
$('mootact_button').addEvent("click", function(e){
e.stop();
$("notify").fade("out");
new MooTact( {
title : 'MooTact Contact Form',
url : "send.json.php",
onSuccess: function(){
(function(){
$("notify").set('html', 'E-mail sent ... Thank you!' ).fade("in");
(function(){$("notify").highlight(); }).delay(750);
}).delay(750);
}
}).show();
});
});
To change the markup for the form pass in an array of form-row objects when instantiating the MooTact object. Each form-row object must at least have an "html" member. Any other Element properties may also be defined as members of the form-row object.
#JS
new MooTact( {
...
"form-rows" : [
{ html : '<label for="mootact_name">Name</label><input type="text" id="mootact_name" name="mootact[name]" />'},
{ html : '<label for="mootact_email">E-mail</label><input type="text" id="mootact_email" name="mootact[email]" />'},
{ html : '<label for="mootact_subject">Subject</label><select id="mootact_subject" name="mootact[subject]"><option value="feature_request">Feature Request</option><option value="bug">Bug</option></select>'},
{ html : '<label for="mootact_message">Message</label><textarea id="mootact_message" name="mootact[message]" class="message" ></textarea>'},
{ html : '<input type="submit" id="mootact_send" value="Send"/>', "class" : "submit" }
],
...
}).show();
#JS
{
"form-rows" : [
{ html : '<label for="mootact_name">Name</label><input type="text" id="mootact_name" name="mootact[name]" class="name" />'},
{ html : '<label for="mootact_email">E-mail</label><input type="text" id="mootact_email" name="mootact[email]" class="email" />'},
{ html : '<label for="mootact_subject">Subject</label><input type="text" id="mootact_subject" name="mootact[subject]" class="subject" />'},
{ html : '<label for="mootact_message">Message</label><textarea id="mootact_message" name="mootact[message]" class="message" ></textarea>'},
{ html : '<input type="submit" id="mootact_send" value="Send"/>', "class" : "submit" }
]
}
See
- url : (string) The relative or absolute URL of the backend script
- class : (string) The class name to give the form
- prefix : (string) The prefix used when defining the ids of the input fields
- form-rows : (array) Ojects to that will be used to create each row of the form
- pelem : (string or Element)The parent element for the form defaults to document.body
- position : (object) Standard object used by Element.Position, e.g., { position: "center" },
- title : (string) The title to display at the top of the form
The backend script that handles the input must return a JSON object containing either a string-value pair indicating success, or an exception object indicating failure.
By default MooTact will POST the following URL parameters
- mootact[email]
- mootact[message]
- mootact[name]
- mootact[subject]
If the input is valid and the message is sent successfully return a JSON object with a success code: #JS { "success" : 1 }
If the input is invalid, or the message cannot be sent then return a JSON object detailing the errors: #JS
{ "exception" : {
'general' : "general error message",
'fields' : {
"name" : "Name is required",
"subject" : "Subject is required",
"email" : "A valid e-mail address is required"
etc,
}
} }
You can write your own backend script, or use send.json.php, which is provided in backend/web. To use send.json.php
- Drop it on your web server
- Place config.php and Swift Mailer outside of a web accessible directory
- Change $configFile and $swiftLoc variables to point to their appropriate spots
- Change config.php with your SMTP details, e.g., address, username, password