Feedback form html5 css3. A beautiful feedback form without images using pure CSS. Data submission form

So, we complete the series of lessons on verst site from scratch With flat design. Let me remind you that we designed the website header. On - a section with a picture on the entire screen. Here is a gallery with portfolio works. On - three-column layout. And as a final step, today we do layout of the feedback form and basement.

This is what we should get.

I won't show all the code here, it's too long. You can see the entire code and the finished result on jsfiddle.

My task is to show you the principles of layout, the logic, so to speak, of how a layout designer thinks when looking at a layout. First, he mentally breaks the entire layout into large sections. Then each section inside is divided into small blocks. See the screenshot below.

The feedback form itself is placed in the tag div with class part_2_of_3 and it occupies two-thirds of the width of the parent.

Then comes the second block in the tag div with class part_1_of_3. The width it occupies is correspondingly one third of the parent block.

IN CSS styles:

Con(
display: block;
float:left;
margin: 3% 0 3% 1.5%;
}
.con:first-child(
margin-left:0; /* pressing the block with the form to the left edge */
}
.part_2_of_3 (
width: 66%; /* width of the block with the form */
}
.part_1_of_3 (
width: 32%; /* width of the information block */
}
.cont-form(
padding-bottom: 25px; /* bottom indent from the block shape */
}
.cont-form div(
padding: 5px 0 15px;
}
.cont-form input,.cont-form input,.cont-form textarea(
width: 42%; /* width of fields for entering text and email */
padding: 15px;
display: block;
outline: none;
background-color: #fff; /* color of form cells */
color: #888282; /* color of the form text input */
font-size: 0.8em; /* font size of the entered form text */
float:left;
margin-right: 2em; /* right indentation */

font-style: italic; /* input text in italics */
border: 2px solid #cacaca; /* border of form cells */
}
.cont-form input(
margin-right: 0em; /* right indentation */
}
.cont-form textarea( /* values ​​for the form text area */
padding: 18px; /* all fields in the text area */
display: block;
width: 93%; /* width of the text area shape */
height:180px; /* height of text area shape */
background-color: #fff; /* wdtn of text area background */
outline: none;
color: #888282; /* color of text entered into the text area */
font-size: 0.8em; /* text area font size */
font-style: italic; /* italics for form text area */
border:2px solid #cacaca;
margin-bottom: 2em;
}
.cont-form input (
font-family: Verdana, sans-serif;
font-size: 1em;
color:#fff;
padding: 0.7em 1.4em;
margin-right: 2%;
background-color: #a97b7b;
border:none;
display: block;
cursor: pointer;
outline: none;
text-transform: uppercase; /* transform to capital letters */
float: right;
}
.comp_addp(
font-size:0.8em;
color:#525252;
line-height: 1.8em;
margin-bottom: 2%;
}
.comp_add a(
font-size:1.1em;
color:#525252;
line-height: 1.8em;
margin-bottom: 2%;
}
.list2 li img(
margin-top: 4px;
float:left;
}
.list2 li .icon(
float:left;
padding-left: 1em;
}

Basement layout

With the layout of the basement, the situation is much simpler. Inside a tag footer, there is a block div with copyright and link.

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.

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; background: rgba( 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%; height: 110px; border: 1px solid rgba(255,255,255,.6); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-background -clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; display: block; font-family: "Open Sans", sans-serif; font-size:18px; font-weight : 300; color:#fff; padding-left:25px; padding-right:20px; padding-top:12px; margin-bottom:20px; 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; background-clip: padding-box; display: block; font-family: "Open Sans", sans-serif; font -size:18px; font-weight: 300; color:#fff; padding-left:20px; padding-right:20px; margin-bottom:20px; ) input ( 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); 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); background: -o-linear-gradient (top, #6da5a3, #416b68); background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%); padding: 10. 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); 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); background: -ms-linear-gradient(top, #ffcc00, #ff6600); background: -o-linear-gradient(top, #ffcc00, #ff6600); background-image: -ms-linear -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.

CSS

When forming the basic sizes of 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; 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-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 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 want to explain, 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 of them 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))).

With all respect, Andrew.

In this short post, I'll show you step by step how to create a beautiful contact form using pure CSS without using images. The form will have fields with the following information: name, email, URL, subject, and message body. For cross-browser compatibility, we will use vendor prefixes, however, to shorten the code, here we will consider the layout without them. .

Creating a form in HTML

First, a little explanation of the form.

• Input type = email is used to indicate a field where the user can enter an email address. Browsers that support this field type will be able to determine whether the user entered a valid email address or not.
• Input type = url is used to check if a valid or valid URL is entered.
• Require = required specifies the state of the form element as required. Browsers that support this attribute block the form from being submitted until all required fields are completed.
• Placeholder This attribute provides a hint so that the user knows what and in what format to enter data. The placeholder disappears when you click on the field.

Creating a Striped Background

To create the envelope effect, start by filling the background with a striped gradient.

#content( position:relative; margin:50px auto; width:400px; min-height:200px; z-index:100; padding:30px; border:1px solid #383838; background: #D1D1D1; /* My stripped background * / background: repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px); border-radius:8px; box-shadow:0px 1px 6px #3F3F3F; )

The repeating-linear-gradient property allows you to create an infinitely repeatable linear gradient. First, we tilted the stripes at an angle of 45 degrees, and then sequentially colored the stripes and gave them a width in pixels. Now we have a gradient background. All that remains is to add a light gray background. Let's use the after pseudo-class:

/** my "fake" background that will hover the stripes **/ #content:after( background:#F9F9F9; margin:10px; position: absolute; content: " "; bottom: 0; left: 0; right: 0 ; top: 0; z-index: -1; border:1px #E5E5E5 solid; border-radius:8px; )

Making the H1 Header

For the H1 header, I chose the font Questrial, for the body of the contact form - Droid Sans, and for the ampersand - Alice. All these fonts are in Google's font directory, so all I need to do is use Google's API code:

Now let's create the title.

H1 ( font-family: "Questrial", Verdana, sans-serif; text-align:center; font-size:40px; padding:0; margin:0 0 20px 0; position:relative; color:#8C8C8C; ) / ** have a nice ampersand **/ h1:after ( font-size:25px; color:#D6CFCB; content: "&"; text-align:center; display:block; width:100%; font-family: " Alice", Verdana, serif; text-shadow: 0px 1px 0px #fff; ) /** create the gradient bottom **/ h1:before ( position:absolute; bottom:15px; content: " "; text-align:center ; display:block; height:2px; width:100%; background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 42%,rgba(180,178,178,0) 43%,rgba (168,166,166.0) 50%, RGBA (180,178,178.0) 57%, RGBA (182,180,180.0.7) 58%, RGBA (238,237,237.0.3) 90%, RGBA (255,255,255.0) 100%); / * w3c * / / / / / / / / / / / / / / / / / / / / / / / / / / )

Let's add icons without using images

We will do this using font icons. You can use the icon font that is in the attachment, or you can use any others, I like to create icon packs from the site flaticon.com. The benefits of using fonts in our context are obvious. We can manipulate the size, color and even animation of icons. The same cannot be said about ordinary images. In addition, we always benefit from display quality on retina displays.

/** adding our icon font !! */ @font-face ( font-family: "IconicStroke"; src: url("font/iconic_stroke-webfont.eot"); src: url("font/iconic_stroke-webfont.eot?#iefix") format(" embedded-opentype"), url("font/iconic_stroke-webfont.woff") format("woff"), url("font/iconic_stroke-webfont.ttf") format("truetype"), url("font/iconic_stroke -webfont.svg#IconicStrokeRegular") format("svg"); font-weight: normal; font-style: normal; ) .iconic:before( font-size:25px; font-family: "IconicStroke"; ) .iconic .link:before ( content: "/"; ) .iconic.quote-alt:before ( content: """; ) .iconic.comment:before ( content: "q"; ) .iconic.user:before ( content : "u"; ) .iconic.mail-alt:before ( content: "M"; )

Now we can design our data entry fields in an inactive and active state.

/** we remove the red glow around required fields since we are already using the red star */ input:required, textarea:required ( -moz-box-shadow:none; -webkit-box-shadow:none; -o- box-shadow:none; box-shadow:none; ) /** inputs and textarea**/ input:not(), textarea( outline:none; display:block; width:380px; padding:4px 8px; border:1px dashed #DBDBDB; color:#3F3F3F; font-family:"Droid Sans",Tahoma,Arial,Verdana sans-serif; font-size:14px; border-radius:2px; transition:background 0.2s linear, box-shadow 0.6 s linear; ) input:not():active, textarea:active, input:not():focus, textarea:focus( background:#F7F7F7; border:dashed 1px #969696; box-shadow:2px 2px 7px #E8E8E8 inset ; ) input:not() ( height: 20px; ) textarea( min-height:150px; resize: vertical ) /* placeholder */ ::-webkit-input-placeholder ( color:#BABABA; font-style:italic; ) input:-moz-placeholder, textarea:-moz-placeholder( color:#BABABA; font-style:italic; )

Design of the “Submit” button and signatures

For the Submit button, we use the field type type=submit . Unfortunately, to design this type of field, we will not be able to use the pseudo-classes:before and:after. So I implemented the special character directly into the HTML code. Of course, this is not the best solution, so you can simply remove it.

/** Styling the send button **/ input( margin-left:235px; cursor:pointer; background:none; border:none; font-family: "Alice",serif; color:#767676; font-size:18px ; padding:10px 4px; border:1px solid #E0E0E0; text-shadow: 0px 1px 1px #E8E8E8; background: rgb(247,247,247); background: linear-gradient(top, rgba(247,247,247,1) 1%,rgba(242,242,242 ,1) 100%); border-radius:5px; box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA; transition:all 0.2s linear; ) input:hover( color:#686868; border- color: #CECECE; background: linear-gradient(top, rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%); box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0; ) input:active, input:focus( position:relative; top:1px; color:#515151; background: linear-gradient(top, rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%); box -shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0; )

To make the form look complete, let's add some nice colors and transitions to the captions when hovering over them.

Label( color:#7F7E7E; -webkit-transition: color 1s ease; -moz-transition: color 1s ease; transition: color 1s ease; ) label:hover( color:#191919; ) label:before( color:#C1BFBD ; transition: color 1s ease; ) label:hover:before( color:#969696; transition: color 1s ease; ) p( margin-bottom:20px; ) .indication( color:#878787; font-size:12px; font -style:italic; text-align:right; padding-right:10px; ) .required( color:#E5224C; )

Instead of a conclusion

I hope this short post has helped you better understand the capabilities of HTML5 and CSS3. Let me emphasize once again that this is just a blank that you can use as a basis for your developments. In the attachment to the post, the feedback form is adaptive.

In this article, we will learn how to layout forms using feedback as an example and use semantic markup for them, look at several subtleties and nuances, and try to make our form display as identically as possible in different browsers, up to IE6.

This article was last updated on August 27, 2013.

Fast start

The tag is used to create the form

Let's try to add fields for filling in the username, email and a button to submit the form:

Tags are most often used to create strings

, in more complex forms a class is attached to them for styling:

your name

Email

You can use an option with a list of definitions, an unnumbered list or a table, which will also be semantically quite correct:

1. Form fields are organized using a list of definitions:

   your name

2. Unordered list option:
   • your name
3. Table as markup:

   your name

Note that we also set a name attribute for all fields so that we can access them later using scripts. name must be unique and it is advisable to assign it the same value as for id . We also explicitly set value to empty to protect against errors in browsers.

So here's what we have at the moment, without the CSS styling for now:

Feedback form

Now our form looks quite simple and boring, let's complicate it, add additional fields and make a design, for example like this:

Form design

As you can see, we have added here the ability to select an option from a list using tags And and the ability to enter a user message . To create two columns we use additional tags <div>with wrapping and now the markup will be like this:</p><p> <h2>Feedback</h2> <form action="#" class="user-form"> <div class="wrap-form-element"> <div> <label for="user-name">your name ^*</label> <input type="text" id="user-name" name="user-name" class="form-element" placeholder="user" value="" required/> </div> <div> <label for="email">Email ^*</label> <input type="email" id="email" name="email" class="form-element" placeholder="example@example.com" value="" required/> </div> <div> <label for="choice">Select an option</label> <select id="choice" name="choice" class="form-element"> <option value="Option 1">Option 1</option> <option value="Option 2">Option 2</option> <option value="Option 3">Option 3</option> </select> </div> </div> <div class="wrap-message"> <label for="message">Message</label> <textarea id="message" name="message" class="form-element" placeholder="Message text">

The code shows that HTML5 features are used, such as the email field type, the placeholder and required attributes (they allow you to do without JS form validation) - we will look at them a little later. For older browsers, we will allow partial graceful degradation, for example, we will omit text hints in the fields (although they can be implemented using jQuery and plugins), and we will validate the entered data using JS and PHP. To support IE below version 9 of CSS3 properties, let's connect the PIE script.

Form Validation in HTML5

Let's add validation to our form. With HTML5 this is quite easy to implement, so let’s consider this option.

For example, let's make the field mandatory.

As you can see, only one required attribute has been added. Now, when you try to submit a form with an empty field, a notification will appear:

The appearance of the message differs in browsers and, unfortunately, does not change.

We can also specify the email type for the email input field:

This means that this field implies an email address and the element will receive appropriate validation. Clearly demonstrated in the screenshot:

The situation is similar with the url , date and number fields:

Everything is very easy, without JS/PHP scripts.

Validation in HTML5 works by default, but it can also be disabled - let's add it to the element

Features of the layout of form elements

textarea

In browsers based on the webkit engine, you can resize , which can be quite convenient. But very often this property breaks the design, so you have to use the resize: none property to prevent resizing. It is also possible to allow the field to stretch only horizontally or vertically. <br>(for Safari and Chrome)</p> <p>IE for <textarea>adds a scroll bar; to remove it, you need to specify overflow: auto .</p> <h3>Highlighting fields in Chrome, Safari browsers</h3> <p>When you focus on fields in Chrome and Safari browsers, they begin to highlight. To remove this highlighting, you need to write the following CSS code:</p><p>Input, textarea ( outline: none; )</p><h3>Dotted border in Firefox</h3> <p>FF, when focusing on some fields, highlights them with a dotted frame, which does not always look beautiful. In order to remove them, we will write the following styles:</p><p>Button::-moz-focus-inner, input::-moz-focus-inner, input::-moz-focus-inner, input::-moz-focus-inner ( border: none; )</p><p>Of course, it is advisable to replace the absence of a dotted frame with another equivalent - for the convenience of the user.</p> <h3>Removing the clear text and display password button in IE10</h3> <p>IE10 by default adds a clear text button for text fields, and a show password button for password fields. Both of these functions are very useful, but sometimes they can spoil the designer's intention. Fortunately, they are very easy to remove; this small snippet will save you from this browser feature:</p><p>::-ms-clear ( display: none; )</p><h3>Non-standard form elements</h3> <p>Styling form elements is discussed in separate articles.</p> <p>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.</p><p>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 feedback form design styles 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.</p><p>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.</p><p>In the send.php file, edit the following lines: $to = "admin@site.ru"; $subject= "Message from site.ru"; $header="From: site.ru";;</p><p> <div class="outer"> <div class="middle"> <div class="inner"> <div class="login-wr"> <h2>Write a letter</h2> <div class="form"> <form action="send.php" method="POST"> <input type="text" id="name" placeholder="Name" required> <input type="email" id="email" placeholder="Email" required> <textarea id="message" required>

* All fields are required