Loading...

Envelope Template HTML5 and CSS3 contact

View: 644    Dowload: 0   Comment: 0   Post by: admin   Category: HTML-CSS template   Fields: Other

To attract visitors to your Blog or web, you need a cool sample contact form to keep in touch with the user. In this article, I will share with you a sample contact form is designed as an envelope, you will not be able to use this template for your site, but you will learn a lot more from CSS3 properties as well as the HTML5 element in the design of the form.

HTML

We just need to build simple html standard framework as follows:

<div id="form-wrapper">
    <form>
        <div id="form-inner">
 
            <label for="name">Name:</label>
            <input type="text" class="input" id="name" placeholder="John Doe">
 
            <label for="email">Email:</label>
            <input type="email" class="input" id="email" placeholder="john.doe@email.com">
 
            <label for="message">Message:</label>
            <textarea class="input textarea" id="message" placeholder="Your message here"></textarea>    
 
             <input type="submit" class="button" value="Send message">
 
        </div>
    </form>
</div>

CSS

We will use the attributes CSS3 box shadows and gradients to create the effect of packaging message with the following code:

#form-wrapper {
    width: 700px;
    height: 400px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    border: 1px solid #ddd;
    background-color: #fff;
    background-image: repeating-linear-gradient
                        (135deg,#844049,#844049,
                        #fff 50px, #fff 150px,
                        #3e4996 100px, #3e4996,
                        #fff 200px, #fff 300px);
}
 
#form-wrapper:before, #form-wrapper:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width:300px;
    background: rgba(0, 0, 0, 0.7);
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    transform: rotate(-3deg);
}
 
#form-wrapper:after {
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}

Next is formatted to buttons.

#form-wrapper .button {
    float: right;
    margin: 10px 0 0 0;
    padding: 7px 15px;
    cursor: pointer;
    color: #fff;
    font: bold 13px Tahoma, Verdana, Arial;
    text-transform: uppercase;
    overflow: visible; /* IE6/7 fix */
    border: 0;
    background-color: #7089b3;
    background-image: linear-gradient(#a5b8da, #7089b3);
    border-radius: 3px;
    text-shadow: 0 1px 0 rgba(0,0,0,.3);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7);
}
 
#form-wrapper .button:hover {
    background-color: #a5b8da;
    background-image: linear-gradient(#7089b3, #a5b8da);
}
 
#form-wrapper .button:active {
    background: #64799e;
    position: relative;
    top: 2px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
}

Đó là tất cả những gì mà chúng ta cần làm để có được một mẫu form liên hệ như ý muốn. Mình hy vọng các bạn sẽ học được nhiều qua bài viết này.

Chúc các bạn thành công !

Envelope Template HTML5 and CSS3 contact

To attract visitors to your Blog or web, you need a cool sample contact form to keep in touch with the user. In this article, I will share with you a sample contact form is designed as an envelope, you will not be able to use this template for your site, but you will learn a lot more from CSS3 properties as well as the HTML5 element in the design of the form.

Posted on 02-12-2015 

Comment:

To comment you must be logged in members.

Files with category

  • Business/Consulting HTML & CSS Template

    Business/Consulting HTML & CSS Template

    View: 17    Download: 1   Comment: 0

    Category: HTML-CSS template     Fields: none

    It's elegant Business HTML Template. You can use it for creating Business, Finance, Corporate, Consulting websites or promoting your services. Looks perfect in all major browsers, tablets, and phones. Clean and commented code lets you customize it...

  • Photography Portfolio HTML/CSS Template

    Photography Portfolio HTML/CSS Template

    View: 21    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    Portfolio and Photography HTML5/CSS template build with latest bootstrap framework , best suited for photographers. Features 3 HTML5/CSS3 Templates Video background for the homepage (YouTube Only) Supersized slideshow for the homepage Built on...

  • Creative Login Form with Validation

    Creative Login Form with Validation

    View: 29    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    Upturn customized LOGIN FORM & INPUT STYLES is ready for Desktop, tablet and mobile devices. Simple to implement. Just copy the HTML and link to the CSS,JS file. You can easily edit, change and customize them for yourself. For students or anyone else...

  • Login Form Like Facebook

    Login Form Like Facebook

    View: 27    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    This is a simple Facebook form that can be imported to your site with ease. Please don't forget to give credit to original developer because I really worked hard to develop this project and please don't forget to like and share it if you found it...

  • Custom-able Invoice: Easy to Use

    Custom-able Invoice: Easy to Use

    View: 20    Download: 1   Comment: 0

    Category: HTML-CSS template     Fields: none

    Make billing easy with Free Invoice Template. Professional invoices for your business: Proforma, Service, Sales, Freelance. Please don't forget to give credit to original developer because I really worked hard to develop this project and please don't...

  • Awsome Responsive HTML Pages

    Awsome Responsive HTML Pages

    View: 17    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    A responsive html pages. The site have self sliding images on the index page. There are drop down menu with icons on them. The site have bootstrap that makes it responsive to different devices .

  • How To Create an Animated Search Form

    How To Create an Animated Search Form

    View: 258    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    How To Create an Animated Search Form, Learn how to create an animated search form with CSS.

  • How to reset / remove chrome's input highlighting / focus border? used CSS

    How to reset / remove chrome's input highlighting / focus border? used CSS

    View: 210    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    You have seen that chrome puts a thicker border on :focus but it kind of looks off in my case where I've used border-radius also. Is there anyway to remove that?

 
File suggestion for you
Loading...
File top downloads
Loading...
Loading...
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd