Contact Form JQuery Plugin V0.1 Beta

Follow this link for the new version : link

Hello again, today i’ll be posting my beta version of a plugin i’ve been doing.

The Contact Form Plugin. What it does? Let me explain.

It receives an input with de ID of the form you want to control with it, then, you can set each fields you want to be required, letters only, numbers only, or email. When the user submits the data an error message appears for each field that was incorrectly filled. After this, the contact form disappears and its shown a warning like “Sending Message…”, when the script completes sending the contact form, this message disappears and its shown a message saying something like “Message Sent”.

It’s still a work in progress, but form now, you still need a little html coding for this to work.

                       

How to use it.

First of all, i’ll give you the basics. This is how the page will look like:

<div id="mainform">
    <form id="fcontacts" method="POST" action="example.php" onsubmit="return runForm('fcontacts',['name','phone','email','message']);">
    <div class="msgbox">
        <input class="required letters" placeholder="Name" type="text" id="name"/>
        <label for="name" class="error" id="name_error">
            <span class="rname">* Required field<br/></span>
            <span class="lname">* Letters only</span>
        </label>
    </div>
    <div class="msgbox">
        <input class="required numbers" placeholder="Phone Number" type="text" id="phone"/>
        <label for="phone" class="error" id="phone_error">
            <span class="rphone">* Required field<br/></span>
            <span class="nphone">* Numbers only</span>
        </label>
    </div>
    <div class="msgbox">
        <input class="required email" placeholder="Email" type="text" id="email"/>
        <label for="email" class="error" id="email_error">
            <span class="remail">* Required field<br/></span>
            <span class="iemail">* Invalid Email</span>
        </label>
    </div>
    <div class="msgbox">
        <textarea class="required" placeholder="Message" type="text" id="message"/>
        <label for="message" class="error" id="message_error">
            <span class="rmessage">* Required field<br/></span>
        </label>
    </div>
    <input type="submit" class="submit" value="Enviar" />
    </form>
</div>
<div id="loader">
    Sending Message...
</div>
<div id="result">
    Message Sent
</div>

The validation script will be called when you try to submit, through the runForm function, you see that it has 2 inputs, so it means it will run the ajax submission mode, if you only use the first input you will have a simple form with validation. I will explain the inputs right after this.

In this simple form we have 4 fields and a submit button. You can style them the way you like.

Now to make them “required, letters only, numbers only, or emai” you need to had it to the class of the object, for example, like in the input “name” we have class=”required letters” meaning this field is required and can only have letters.

In “phone” we have class=”required numbers”, so it’s required and only accepts numbers.

And so on.

The runForm function

The normal submission mode has 1 input – runForm(‘fcontacts’):

1. The name of the form you will be validating

The ajax submission mode has 2 inputs – runform(‘fcontacts’,[‘name’,’phone’,’email’,’message’]):

1. The name of the form you will be validating
2. The ID of the fields you wanna send (this is only required for ajax submission mode).

Now for the error message.

Has you can see, we have several label tags defined with span tags inside using some “weird” class names. Let me explain.

error – is the span group that’s shown on error

r – is for required

l – is for letters

n – is for numbers

i – is for invalid

Using the “name” input has an example we have:

<div class="msgbox">
    <input class="required letters" placeholder="Name" type="text" id="name"/>
    <label for="name" class="error">
        <span class="rname">* Required field<br/></span>
        <span class="lname">* Letters only</span>
    </label>
</div>

You can see here the class “error”, “rname” and “lname”.

So the items inside the “error” class will be show if an error occurs during the validation of the name input.

The “rname” states for the error to be shown if its empty ( r – required field) and the “lname” is to be shown if the field has something thats not a letter ( l – letter only field ).

Despite the strange code, it’s simple to understand.

The ajax submission replies

This will be divided in 2 parts.

1. The sending of the message.
2. The display that the message was sent.

1 – The sending of the message

This is where the “loader” div comes in. This one needs to have the css display config set to none.

This will be show with a slide effect, hiding the form and showing a message saying “Sending Message…”.

You can write anything you want in here, and style it with css, so it goes with your styles.

2 – The display that the message was sent

And for last the “result” div. This one also needs to have the css display config set to none.

Does the same has the “loader” div, but will be shown after the message was sent.

This one can also be edited and styled the way you like.