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 : '<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();

Default "form-rows"

{
    "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" }
                  ]
}

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: #JS { "success" : 1 }

Invalid Input

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,
                          } 
        } }

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

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.