Contact Form JQuery Plugin – New Version 0.2 beta

And here come the version 0.2 for my Contact Form Jquery Plugin.

The changes:

  • Code has been simplified
  • Easier Implementation

Small Description

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:

<form id=”fcontactos” action=”/frame/scripts/enviarmail.php” method=”POST” onsubmit=”return send(‘fcontactos’,true);”>

<div id="mainform">
    <form id="fcontacts" method="POST" action="example.php" onsubmit="return send('fcontacts',true);">
    <div class="msgbox">
        <input class="required letters fcontacts" 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 fcontatcs" 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 fcontacts" 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 fcontacts" 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="Send" />
    </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 send function, you can also use the validate function for non-ajax submission like you will see later.

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.

Also you need to had the class name equals to the form ID, for example:

In “phone” you will be having class=”required numbers fcontacts”, cause fcontacts is the ID of the form.

And so on.

The send and validate function

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

  1. The ID of the form you will be validating

The send function (ajax submission) mode has 2 inputs – send(‘fcontacts’,boolean):

  1. The ID of the form you will de using
  2. True for validating before sending, false if you don’t need it validated

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" id="name_error">
        <span class="rname">* Required field<br/></span>
        <span class="lname">* Letters only</span>
    </label>
</div>

You can see here the ID “name_error” and the classes “rname” and “lname”.

So the items inside the “name_error” ID 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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s