MooTact

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.

How to use

Instantiate a MooTact object and call show();

      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();
         });
      });
      

Changing the Form

Markup

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.

      new MooTact( {
          ...
          "form-rows"    : [
               { html : 'Name
'},
               { html : 'E-mail
'},
               { html : 'Subject
Feature RequestBug

'},
               { html : 'Message'},
               { html : '
', "class" : "submit" }
           ],
          ...
          }).show();
      

Default “form-rows”

      {
       "form-rows"    : [
          { html : 'Name
'},
          { html : 'E-mail
'},
          { html : 'Subject
'},
          { html : 'Message'},
          { html : '
', "class" : "submit" }
        ]
      }
      

CSS

See

• mootact-nc.css
• mootact-ie6-nc.css

Options

• 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

Backend Script

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.

Post Parameters

By default MooTact will POST the following URL parameters

• mootact[email]
• mootact[message]
• mootact[name]
• mootact[subject]

Valid Input

If the input is valid and the message is sent successfully return a JSON object with a success code:

      { "success" : 1 }
      

Invalid Input

If the input is invalid, or the message cannot be sent then return a JSON object detailing the errors:

      {
      	"exception" : {
      	'general'   : "general error message",
      	'fields'    : {
      	                    "name"      : "Name is required",
      	                    "subject"   : "Subject is required",
      	                    "email"     : "A valid e-mail address is required"
      	                    etc,
      	              }
      	}
      }
      

Installing the Backend Script

You can write your own backend script, or use send.json.php, which is provided in backend/web. To use send.json.php:

1. Drop it on your web server
2. Place config.php and Swift Mailer outside of a web accessible directory
3. Change $configFile and $swiftLoc variables to point to their appropriate spots
4. Change config.php with your SMTP details, e.g., address, username, password

Demo

• MooTact Demo
• Custom MooTact Demo