MooTact 0.1.2

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.



Details

Author
Caleb Crane
Current version
0.1.2
GitHub
simulacre/MooTact
Downloads
3120
Category
Forms
Tags
Report
GitHub Issues

Releases


Dependencies

  • core/1.2.1: Request.JSON
  • more/1.2.4: Element.Position, Spinner, Mask

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


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



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.

blog comments powered by Disqus