Animated contact form


Animated contact form effect created with only CSS and HTML. Created with slide effect for label with no experimental techniques, supported by every browser.

No CommentsCode Buckets,
  • Article
  • Comments
  • Related

There are plenty of forms on the web and we all know that sometimes they are not so interesting and we hate populating them.

Animated contact form

Today we want to share the approach we took for our contact form in the footer of this website.

Idea is to use a little extra HTML to animate the labels of the form, and make it a little more interesting. Let’s examine the HTML of our animated contact form.

The HTML

First let’s examine the markup for the whole contact form.


    <div id="contact_form">
        <div class="col-2">
            <label>
                <input type="text" tabindex="1" name="name">
                <span>Name:</span>
            </label>
            <label>
                <input type="email" tabindex="2" name="email">
                <span>Email:</span>
            </label>
            <label>
                <input type="text" tabindex="3" name="subject">
                <span>Subject:</span>
            </label>
        </div>
        <div class="col-2">
            <label>
                <textarea tabindex="4" name="message"></textarea>
                <span>Message:</span>
            </label>
        </div>
        <input type="submit" tabindex="5" value="Send">
    </div>


 

Nothing unusual there and as you can tell it’s the simple markup. The important part is that span element should be inside the label. Again, the whole structure for one field should be like this:

 

<label>
    <textarea tabindex="4" name="message"></textarea>
    <span>Message:</span>
</label>

 

The CSS

After you made that change, in order for everything to work correctly we need to add CSS.

Below is the basic CSS that you can add to your form style in order for this to work. You will need to make some minor changes since not all forms are the same.

 


/* RESET */
#contact_form * { box-sizing: border-box; }

/* GRID */
.col-2 {
    float: left;
    padding: 0 20px;
    width: 50%;
}

/* BASIC CONTACT FORM CSS */
#contact_form input,
#contact_form textarea {
    height: 45px;
    line-height: 1.4em;
    padding-left: 20px; /* Change this to fit your label text width */
    width: 100%;
}
#contact_form textarea {
    padding: 20px;
}
#contact_form label {
    display: inline-block;
    height: 45px;
    line-height: 1.4em;
    margin-bottom: 20px;
    position: relative;
    width: 100%;
}
#contact_form label input {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#contact_form label span {
    background-color: #fff;
    font-size: 14px;
    font-weight: 200;
    position: absolute;
    left: 10px;
    top: 13px;
    padding: 0 8px;
    pointer-events: none;
}
#contact_form .populated {
    padding-left: 70px;
}
#contact_form input:focus + span,
#contact_form input:active + span,
#contact_form textarea:focus + span,
#contact_form textarea:active + span {
    top: -9px; /* Change this to fit your label text width */
}
#contact_form input[type="submit"] {
  clear: both;
  display: block;
  height: auto;
  padding: 0;
  width: auto;
}
/* ANIMATION */
#contact_form label input {
    transition: padding 0.3s ease 0s;
}
#contact_form label span {
    transition: top 0.3s ease 0s, color 0.3s ease 0s;
}
#contact_form input:focus,
#contact_form textarea:focus {
    transition: all 0.3s ease;
}

 

The jQuery

After you added the CSS let’s examine the JavaScript part. Having a function for pre-populated inputs is good idea because they are easier to call as you can see on the bottom part of the script.

So, the class=”populated” is added if the user inserts something in the input field. This allows the CSS to animate the labels.


/* ----------------------------------------
- Function
------------------------------------------- */
    function creativeinputs() {
        $("#contact_form input, #contact_form textarea").each(function() {
            $(this).addClass('populated');
        });
    }
/* ----------------------------------------
- Focus - Animating the labels on input focus
------------------------------------------- */
    $("#contact_form input, #contact_form textarea").focusin(function() {
        $(this).removeClass('populated');
    });

    $("#contact_form input, #contact_form textarea").focusout(function() {
        if ($(this).val() != '') {
            $(this).addClass('populated');
        } else {
            $(this).removeClass('populated');
        }
    });

/* ----------------------------------------
- On load
------------------------------------------- */
    creativeinputs();

/* ----------------------------------------
- On Document ready
------------------------------------------- */
    $(document).ready(function() {
        creativeinputs();
    });

 

That is it, copy the code, alter it to your suiting and enjoy it with the rest of the users.

We hope you enjoyed reading and exploring our code, leave us a comment, ask, we are here to help.

Code Buckets,
Author:
Creative Brackets

We are striving to get the best content to you and provide information that might be interesting for you. Let us know what you think, what you want to learn about.

Leave a Reply

Share the article

with your friends