HTML Form Structure

Each line is placed in a DIV container, so it is much more convenient to place labels next to the input field. The entire form is placed in a 660px wide DIV in the center of the page.

CSS Form Structure

All animation is made with new CSS 3 properties. All backgrounds are made with ordinary gradients. Pay attention to the animation of the button. Hover shadows are also done in CSS3.

/* form styles */
form.row(
display: block;
padding: 7px 8px;
margin-bottom: 7px;
}
form .row:hover (
background: #f1f7fa;
}

Form label (
display: inline-block;
font-size: 1.2em;
font-weight: bold;
width: 120px;
padding: 6px 0;
color: #464646;
vertical-align: top;
}
form .req ( color: #ca5354; )

Form.note(
font-size: 1.2em;
line-height: 1.33em;
font-weight: normal;
padding: 2px 7px;
margin-bottom: 10px;
}

Form input:focus, form textarea:focus ( outline: none; )

/* placeholder styles: http://stackoverflow.com/a/2610741/477958 */
::-webkit-input-placeholder ( color: #aaafbd; font-style: italic; ) /* WebKit */
:-moz-placeholder ( color: #aaafbd; font-style: italic; ) /* Mozilla Firefox 4 to 18 */
::-moz-placeholder ( color: #aaafbd; font-style: italic; ) /* Mozilla Firefox 19+ */
:-ms-input-placeholder ( color: #aaafbd; font-style: italic; ) /* Internet Explorer 10+ */

Form.txt(
display: inline-block;
padding: 8px 9px;
padding-right: 30px;
width: 240px;
font-family: "Oxygen", sans-serif;
font-size: 1.35em;
font-weight: normal;
color: #898989;
}

In conclusion, I would like to say that with the development of CSS3 and HTML5, creating a feedback form with animation, shadows, etc. became not such a difficult task. I hope this lesson will help you in creating your own forms for your website.

In this article we will talk about a dynamic feedback form, which, when the window size changes, will become adaptive to viewing. That is, the feedback form will be available for viewing on all types of devices, on personal computers, laptops, smartphones and tablets.

The feedback form will consist of 3 data entry fields - name, email address and text of the letter. All fields will be required, and you will not be able to send a blank email. The email address entry field will additionally be validated for correctness of entry. The data will be presented in html code, the design styles of the feedback form will be written in a separate CSS file. Based on the principle of this script, it is possible to create, by analogy, a larger or smaller number of input fields.

The advantages of using this form are the continuous operation of the site and dynamic submission of data from the form, without reloading the page. It should also be noted that it is easy to view on mobile devices.

In the send.php file, edit the following lines: $to = " [email protected]"; $subject= "Message from site.ru"; $header="From: site.ru";;

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); html, body ( height: 100%; padding: 0; margin: 0; ) body ( background: #d3dce1; font-family: "Roboto", sans-serif; font-size: 14px; ) .outer ( display: table ; width: 100%; height: 100%; text-align: center; .middle ( display: table-cell; vertical-align: middle; ) .inner ( text-align: center; width: auto; padding: 0 15px; ) .login-wr ( position: relative; margin: 0 auto; background: #fff; max-width: 550px; box-shadow: 3px 3px 24px #999; padding: 15px 15px 15px 15px; ) h2 ( text- align: left; font-size: 1.6em; padding: 0 0 10px 0; border-bottom: 1px solid #474747; -top: 20px; text-align: left; ) input, input ( margin-bottom: 25px; height: 40px; outline: 0; -moz-outline-style: none; ) button ( height: 40px; outline: 0; -moz-outline-style: none; ) input ( background: url("img/user.png") no-repeat left 10px center; ) input ( background: url("img/email.png") no-repeat left 10px center; ) textarea ( background: url("img/pencil.png") no-repeat left 10px top 10px; ) textarea ( width: calc(100% - 55px); height: 120px; border: 1px solid #bbb; padding: 10px 10px 10px 45px; font-size: 14px; ) input, input ( width: calc(100% - 45px); max-width: 250px; border: 1px solid #bbb; padding: 0 0 0 45px; font-size: 14px ; ) input:focus, input:focus ( border: 1px solid #2196f3; ) p ( padding-bottom: 10px; ) button ( width: 100%; max-width: 150px; background: #e6ebee; border:none; border -bottom: 5px solid #d3dce1; font-size: 14px; font-weight: 200; transition: box-shadow .4s ease)

$(function() ( $("#loader").hide(); $("form").submit(function(e) ( var name = $("#name").val(); var email = $("#email").val(); var message = $("#message").val(); var data = "name=" + name + "&email=" + email + "&message=" + message ; if(data) ( $.ajax(( type: "POST", url: "./send.php", data: data, beforeSend: function(html) ( $("#loader").show(); $("#submit").hide(); ), success: function(html)( $("#loader").hide(); $("#result").html(html); ) )); ) return false; ));

1. Plugin for creating online forms “jFormer”

Creation of contact forms: feedback, comments, login form, registration form with checking the correctness of information entered.

2. Step-by-step registration form using jQuery

A neat form with step-by-step filling. Below is a form completion indicator.

3. Step by step form

Filling out the form in several steps and checking that it is filled out correctly.

4. Contact form for the site

Validation of the correctness of the entered information is carried out on the fly before sending the message using javascript.

5. Animated switching between forms using jQuery

Animated switching from using jQuery between the site login form, the registration form and the password recovery field. On the demo page, click on the yellow link to see the effect.

6. Departure PHP feedback form

A similar solution can be used to give a visitor the opportunity to quickly contact the site owner from any page. On the demo page, click on the arrow below to open the form.

7. PHP registration form using jQuery and CSS3

Form with verification of correctness of information entered.

8. PHP registration form in Facebook style

Nice registration form implemented with using CSS, PHP and jQuery.

9. jQuery contact form “SheepIt”

The ability to add new fields before sending a message has been implemented.

10. Fancy AJAX Contact Form

Nice neat PHP form feedback to check the correctness of information entered. Technologies: CSS, PHP, jQuery.

11. Authorization/registration system on the site

12. Data submission form

With verification of correct filling.

13. jQuery “Contactable” plugin

To implement an outgoing feedback form for quickly sending a message.

The feedback form, or to put it another way, is one of the most important elements of any website. And of course, like all other elements of the user interface, contact elements must be somehow externally stylized and designed in order to attract the attention of users and encourage communication.
I offer for your consideration a couple of options for styles of feedback forms, exclusively by means of 3, without the use of additional images in the design. Nothing superfluous, just short code fragments (snippets) for contact forms, made in light and dark colors.

1. Contact form in dark colors

Depending on the color of the main background of the page, the basic background color of the form itself will visually change. The size of the form depends on the size of the container in which the form will be placed.

The Html form framework is standard, the necessary input fields and a “Submit” button are required for linking with CSS, each form element is assigned a specific class, nothing complicated, it won’t be difficult to understand.

< form> < input name= "name" placeholder= "Indicate your name!" class = "name" required />< input name= "emailaddress" placeholder= "Enter your Email!" class = "email" type="email" required />< textarea rows= "4" cols= "50" name= "subject" placeholder= "Enter your message:" class = "message" required> < input name= "submit" class = "btn" type= "submit" value= "Send" />

CSS

I won’t go into much detail about the styles, I’ll just note one thing: I used some CSS3 properties in the design, a linear gradient, a shadow effect, slightly rounded corners, etc., I tried to achieve some cross-browser compatibility for these properties, but in older versions of browsers, the form will be still look a little different ((.

/* Basic form style */ form ( margin: 0 auto; max- width: 95 %; padding: 30px 30px 6px 30px; border: 1px solid rgba(0 , 0 , 0 , .2 ) ; - moz- border- radius: 5px; - webkit- border - radius: 5px; border- radius: 5px; - moz- background- clip: padding; - webkit- background- clip: padding- box; background- clip: padding- box; ) ; - moz- box- shadow: 0 0 13px 3px rgba(0 , 0 , 0 , .5 ) ; - webkit- box- shadow: 0 0 13px 3px rgba(0 , 0 , 0 , .5 ) ; shadow: 0 0 13px 3px rgba(0 , 0 , 0 , .5 ) ; overflow: hidden ) /* Message field */ textarea( background: rgba(255 , 255 , 255 , 0.4 ) ; width: 100%; height: 110px; border: 1px solid rgba(255 , 255 , 255 , .6 ) ; - moz- border- radius: 4px; - webkit- border- radius: 4px; - moz- background- clip: padding; - webkit- background- clip: padding- box; "Open Sans" sans-size: font-weight: 300; padding-left: 25px; padding-top: 12px; overflow: hidden; ) /* Input fields */ input ( width: 100%; height: 48px; border: 1px solid rgba(255 , 255 , 255 , .4 ) ; - moz- border- radius: 4px; - webkit- border- radius: 4px; - moz- background- clip: padding; - webkit- background- clip: padding- box; Sans" , sans-serif; font-size: 18px; font-weight: 300; color: #fff; padding-left: 20px; padding- right: 20px; margin- bottom: 20px; ) input[ type= submit] ( cursor: pointer; ) input. name ( background: rgba(255 , 255 , 255 , 0.4 ) ; padding- left: 25px; ) input. email ( background: rgba(255 , 255 , 255 , 0.4 ) ; padding- left: 25px; ) input. message ( background: rgba(255 , 255 , 255 , 0.4 ) ; padding- left: 25px; ) ::- webkit- input- placeholder ( color: #fff; ) :- moz- placeholder( color: #fff; ) : :- moz- placeholder ( color: #fff; ) :- ms- input- placeholder ( color: #fff; ) input: focus, textarea: focus ( background- color: rgba(0 , 0 , 0 , 0.2 ) ; - moz-box-shadow: 0 0 5px 1px rgba(255, 255, 255, .5) ; - webkit-box-shadow: 0 0 5px 1px rgba(255, 255, 255, .5) ; 0 5px 1px rgba(255, 255, 255, .5) ; overflow: hidden; /* Styles for the submit button */ . btn ( width: 138px; height: 44px; - moz- border- radius: 4px; - webkit- border- radius: 4px; border- radius: 4px; float: right; border: 1px solid #253737; background: #416b68; background: - webkit- gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68)); background: - webkit- linear- gradient(top, #6da5a3, #416b68); - linear- gradient(top, #6da5a3, #416b68); - ms- linear- gradient(top, #6da5a3, #416b68); background: - o- linear- gradient(top, #6da5a3, #416b68); background- image: - ms- linear- gradient(top, #6da5a3 0%, #416b68 100%); - radius: 6px; - webkit- box- shadow: rgba(255, 255, 255, 0.1) 0 1px 0, inset rgba(255, 255, 255, 0.7) 0 1px 0; - moz- box- shadow: rgba( 255 , 255 , 255 , 0.1 ) 0 1px 0 , inset rgba(255 , 255 , 255 , 0.7 ) 0 1px 0 ; box-shadow: rgba(255 , 255 , 255 , 0.1 ) 0 1px 0 , inset rgba(255 , 255, 255, 0.7) 0 1px 0; text-shadow: #333333 0 1px 0; color: #e1e1e1; ) . btn: hover ( border: 1px solid #253737; text- shadow: #333333 0 1px 0; background: #416b68; background: - webkit- gradient(linear, left top, left bottom, from(#77b2b0), to(# 416b68)); background: - webkit- linear- gradient(top, #77b2b0, #416b68); background: - moz- linear- gradient(top, #77b2b0, #416b68); background: - ms- linear- gradient(top , #77b2b0, #416b68); background: - o- linear- gradient(top, #77b2b0, #416b68); background- image: - ms- linear- gradient(top, #77b2b0 0%, #416b68 100%); color: #fff; ) . btn: active ( margin- top: 1px; text- shadow: #333333 0 -1px 0; border: 1px solid #333333; background: #ffCC00; background: - webkit- gradient(linear, left top, left bottom, from( #ffCC00), to(#ff6600)); background: - webkit- linear- gradient(top, #ffcc00, #ff6600); background: - moz- linear- gradient(top, #ffcc00, #ff6600); ms- linear- gradient(top, #ffcc00, #ff6600); - o- linear- gradient(top, #ffcc00, #ff6600); , #ff6600 100%); color: #fff; - webkit-box-shadow: rgba(255, 255, 255, 0) 0 1px 0, inset rgba(255, 255, 255, 0.7) 0 1px 0; - box-shadow: rgba(255, 255, 255, 0) 0 1px 0, inset rgba(255, 255, 255, 0.7) 0 1px 0; box-shadow: rgba(255, 255, 255, 0) 0 1px 0 , inset rgba(255 , 255 , 255 , 0. 7) 0 1px 0; outline: none; )

/* Basic form style */ form ( margin: 0 auto; max-width: 95%; padding: 30px 30px 6px 30px; border: 1px solid rgba(0,0,0,.2); -moz-border-radius : 5px; -webkit-border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; 0, 0, 0, 0.5); -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5); -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0 ,.5); box-shadow: 0 0 13px 3px rgba(0,0,0,.5); overflow: hidden; ) /* Message field */ textarea( background: rgba(255, 255, 255, 0.4) ; width: 100%; border: 1px solid rgba(255,255,255,.6); -moz-border-radius: 4px; -clip: padding; -webkit-background-clip: padding-box; font-family: "Open Sans", font-size: 18px; : 300; padding-left:25px; padding-top:12px; overflow:hidden; ) /* Input fields */ input ( width: 100%; height: 48px; border: 1px solid rgba(255,255,255,.4); -moz-border-radius: 4px; -webkit-border-radius: 4px; border- radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; display: "Open Sans", sans-serif; -size:18px; font-weight: 300; padding-left:20px; margin-bottom:20px; 255, 255, 255, 0.4); padding-left:25px; ) input.email ( background: rgba(255, 255, 255, 0.4); padding-left:25px; ) input.message ( background: rgba(255, 255, 255, 0.4); padding-left:25px; ) ::-webkit-input-placeholder ( color: #fff; ) :-moz-placeholder( color: #fff; ) ::-moz-placeholder ( color: #fff; ) :-ms-input-placeholder ( color: #fff; ) input:focus, textarea:focus ( background-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5); -webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5); box-shadow: 0 0 5px 1px rgba(255,255,255,.5); overflow: hidden; ) /* Styles for the submit button */ .btn ( width: 138px; height: 44px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; float:right; border: 1px solid #253737; background: #416b68; background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68)); background: -webkit-linear-gradient(top, # 6da5a3, #416b68); background: -moz-linear-gradient(top, #6da5a3, #416b68); background: -ms-linear-gradient(top, #6da5a3, #416b68); (top, #6da5a3, #416b68); background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%); 5px 21px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; text-shadow: #333333 0 1px 0; color: #e1e1e1; ) .btn:hover ( border: 1px solid #253737; text-shadow: #333333 0 1px 0; background: #416b68; background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to (#416b68)); background: -webkit-linear-gradient(top, #77b2b0, #416b68); background: -moz-linear-gradient(top, #77b2b0, #416b68); (top, #77b2b0, #416b68); background: -o-linear-gradient(top, #77b2b0, #416b68); background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100% ); color: #fff; ) .btn:active ( margin-top:1px; text-shadow: #333333 0 -1px 0; border: 1px solid #333333; background: #ffCC00; background: -webkit-gradient(linear , left top, left bottom, from(#ffCC00), to(#ff6600)); background: -webkit-linear-gradient(top, #ffcc00, #ff6600); background: -moz-linear-gradient(top, #) ffcc00, #ff6600); background: -ms-linear-gradient(top, #ffcc00, #ff6600); background: -o-linear-gradient(top, #ffcc00, #ff6600); -gradient(top, #ffcc00 0%, #ff6600 100%); color: #fff; -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; outline: none; )

Maybe this will be interesting to you:

2. Contact form in light colors

The second design option for the feedback form is presented in light colors; the dimensions of the form (width, height), as in the first option, are not fixed, and will easily fit into the dimensions of the container where this form will be located.

HTML

As in the first option, the Html structure of the contact form is standard, form elements with certain classes corresponding to the classes in CSS.

< form> < input name= "name" placeholder= "Indicate your name!" class = "textbox" required />< input name= "emailaddress" placeholder= "Enter your Email!" class = "textbox" type="email" required />< textarea rows= "4" cols= "50" name= "subject" placeholder= "Enter your message:" class = "message" required> < input name= "submit" class = "button" type= "submit" value= "Send" />

CSS

When forming the basic dimensions of the forms and internal elements, I used percentage values ​​for the width, thanks to which the form can easily be adjusted to the dimensions of the container in which it will be located. The color scheme of the “Submit” button, its size and location can be easily changed; just experiment with certain values.

/* Basic form styles */ form( margin: 0 auto; max- width: 95%; box- sizing: border- box; padding: 40px; border- radius: 5px; background: RGBA(255, 255, 255, 1) ; - webkit- box- shadow: 0px 0px 15px 0px rgba(0 , 0 , 0 , .45 ) ; box-shadow: 0px 0px 15px 0px rgba(0 , 0 , 0 , .45 ) ; /* Input field styles */. textbox( height: 50px; width: 100%; border- radius: 3px; border: rgba(0 , 0 , 0 , .3 ) 2px solid; box- sizing: border- box; font- family: "Open Sans" , sans-serif; font-size: 18px; padding: 10px; : 30px ; } . message : focus , . textbox : focus { outline : none ; border : rgba (24 , 149 , 215 , 1 ) 2px solid ; color : rgba (24 , 149 , 215 , 1 ) ; } /* Text field styles */ . message { background : rgba (255 , 255 , 255 , 0.4 ) ; width : 100 %; height : 120px ; border : rgba (0 , 0 , 0 , .3 ) 2px solid ; box - sizing : border - box ; - moz - border - radius : 3px ; font - size : 18px ; font - family : "Open Sans", sans - serif ; - webkit - border - radius : 3px ; border - radius : 3px ; display : block ; padding : 10px ; margin - bottom : 30px ; overflow : hidden ; } /* Basic button styles */ . button { height : 50px ; width : 100 %; border - radius : 3px ; border : rgba (0 , 0 , 0 , .3 ) 0px solid ; box - sizing : border - box ; padding : 10px ; background : #90c843; color : #FFF; font - family : "Open Sans", sans - serif ; font - weight : 400 ; font - size : 16pt ; transition : background . 4s ; cursor : pointer ; } /* Change button background on hover */ . button : hover { background : #80b438;}

/* Basic form styles */ form( margin:0 auto; max-width:95%; box-sizing:border-box; padding:40px; border-radius:5px; background:RGBA(255,255,255,1); -webkit -box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .45); box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .45); textbox( height:50px; width:100%; border-radius:3px; border:rgba(0,0,0,.3) 2px solid; box-sizing:border-box; font-family: "Open Sans", sans-serif; font-size:18px; margin-bottom:30px; .message:focus, .textbox:focus( outline:none; border:rgba(24,149,215,1) 2px solid; color:rgba( 24,149,215,1); ) /* Text field styles */ .message( background: rgba(255, 255, 255, 0.4); width:100%; height: 120px; border:rgba(0,0,0,.3 ) 2px solid; box-sizing:border-box; -moz-border-radius: 3px; font-family: "Open Sans", sans-serif; -radius: 3px; display:block; padding:10px; overflow:hidden) /* Basic button styles */ .button( height:50px; width:100%; border-radius:3px; border:rgba(0,0,0,.3) 0px solid; box-sizing:border-box; padding:10px; background:#90c843; color:#FFF; font-family: "Open Sans", sans-serif; font-weight:400; font-size: 16pt; transition:background .4s; cursor:pointer; ) /* Change the button background on hover */ .button:hover( background:#80b438; )

There are a lot of design options for contact forms, the main thing is to have a little imagination and basic knowledge of CSS. On the pages of my blog, you can find others and examples of the style of feedback forms.
For those who are especially inattentive, I would like to clarify, once again: the forms presented in the article are just an outer shell; in order for the forms to actually perform their functions, you need to attach a script handler to them, of which there are plenty scattered on the Internet, so it’s convincing Please do not write in the comments that the forms do not work, etc., everything works great, you just need to understand what, where and why))).

Best regards, Andrey.