Create contact form css

h2>Contact Formh2> div form action="/form/submit" method="POST"> label for="fname">Namelabel> input type="text" name="name" placeholder="Type your name.."> label for="lname">Last Namelabel> input type="text" name="surname" placeholder="Type your last name.."> label for="mail">E-mail Addresslabel> input type="text" name="e-mail" placeholder="Type your e-mail.."> label for="country">Countrylabel> Italy Spain France  label for="message">Messagelabel> textarea name="message" placeholder="Type your message.." style="height: 200px"> submit" value="Send"> 

Add CSS

• Style and by setting the width, padding, margin-top and margin-bottom properties.
• Make the border a little bit rounded with the border-radius property.
• Make the textarea resize only vertically with the resize property.
• Style the «Send» button with the background-color, color, padding, and border-radius properties.
• Define the type of cursor.
• Set a background-color , which will change when you hover.

input[type=text], select, textarea < width: 100%; padding: 8px; border: 1px solid #eeeeee; border-radius: 4px; box-sizing: border-box; margin-top: 8px; margin-bottom: 16px; resize: vertical; > input[type=submit] < background-color: #4cd9c6; color: #ffffff; padding: 12px 20px; border: none; border-radius: 7px; cursor: pointer; > input[type=submit]:hover < background-color: #6fe8d7; >

Here’s the full code of contact form.

Example of creating a contact form:

html> html> head> title>Title of the document title> style> body < font-family: Arial, Helvetica, sans-serif; > * < box-sizing: border-box; > input[type=text], select, textarea < width: 100%; padding: 8px; border: 1px solid #eeeeee; border-radius: 4px; box-sizing: border-box; margin-top: 8px; margin-bottom: 16px; resize: vertical; > input[type=submit] < background-color: #4cd9c6; color: #ffffff; padding: 12px 20px; border: none; border-radius: 7px; cursor: pointer; > input[type=submit]:hover < background-color: #6fe8d7; > .container < border-radius: 8px; background-color: #e6e6e6; padding: 15px; > style> head> body> h2>Contact Form h2> div class="container"> form action="/form/submit" method="POST"> label for="fname">Name label> input type="text" id="fname" name="name" placeholder="Type your name.."> label for="lname">Last Name label> input type="text" id="lname" name="surname" placeholder="Type your last name.."> label for="lname">E-mail Address label> input type="text" id="mail" name="e-mail" placeholder="Type your e-mail.."> label for="ci">Country label> select id="country" name="country"> option value="italy">Italy option> option value="spain">Spain option> option value="france">France option> select> label for="message">Message label> textarea id="message" name="message" placeholder="Type your message.." style="height:200px"> textarea> input type="submit" value="Send"> form> div> body> html>

Result

Example of styling a contact form:

html> html> head> title>Title of the document title> style> label < font-family: 'Open Sans' sans-serif; color: #fff; margin: 0; > .container < display: block; border: 8px solid #414178; border-radius: 10px; margin: 0 auto; padding: 0 0 10px 10px; max-width: 330px; background-color: #ac9dd1; > .title < display: inline-block; > .title h2 < padding: 0 10px 0 0px; margin: 5px 0; color: #FBFBFB; > form < padding: 10px 10px 0 0; > hr < width: 100%; display: block; margin: 5px 0; height: 5px; border: 0; background-color: #ffffff; > input, textarea < width: 100%; border: 5px solid #FFFFFF; border-radius: 3px; resize: none; padding: 0 5px; box-sizing: border-box; font-family: 'Open Sans' sans-serif; font-size: 16px; color: #000000; > input[type="text"], input[type="email"] < padding: 0 1px; height: 40px; width: 100%; > input:focus, textarea:focus < outline: none; > .form-input < margin: 5px 0 10px 0; > .form-textarea < margin: 5px 0; width: 100%; height: 100px; > input[type="submit"] < width: 100%; height: 50px; background-color: #414178; border: 0; color: #fff; border: 5px solid #414178; border-radius: 8px; margin: 10px 0 0 0; font-family: 'Open Sans' sans-serif; font-size: 22px; > style> head> body> div class="wrapper"> div class="container"> div class="title"> h2> Contact Us hr> h2> div> form class="form" action="/form/submit" method="POST"> label for="name">Name label> input class="form-input" type="text" name="name" id="name"> label for="email">Email label> input class="form-input" type="email" name="email" id="email"> label>Message label> textarea class="form-textarea" type="text"> textarea> input type="submit" value="Submit"> form> div> div> body> html>

Источник

How TO — Contact Form

Use a element to process the input. You can learn more about this in our PHP tutorial. Then add inputs (with a matching label) for each field:

Example

Step 2) Add CSS:

Example

/* Style inputs with type=»text», select elements and textareas */
input[type=text], select, textarea width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
>

/* Style the submit button with a specific background color etc */
input[type=submit] background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
>

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover background-color: #45a049;
>

/* Add a background color and some padding around the form */
.container border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
>

Tip: Go to our HTML Form Tutorial to learn more about HTML Forms.

Tip: Go to our CSS Form Tutorial to learn more about how to style form elements.

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Источник

How to Create a Contact Form with CSS

First we create the HTML elements — input fields for First Name, Last Name, Email and a Text Area for the message.

Later we apply CSS styles to make the form visually appealing.

The HTML part

The HTML section has a div with class container with the heading h3 ”Contact Form”

The form with name contact_form contains input fields for:

A div with class center to align the items center. An input type submit to submit the form.
The required attribute in the text fields are checked for value on submission.

 
Contact Form
 First Name  
Last Name  
Email  
Message 

The CSS part

/* Importing the Roboto font from Google Fonts. */ @import url("https://fonts.googleapis.com/css?family=Roboto:400"); /* Set font of all elements to 'Roboto' */ * < font-family: 'Roboto', sans-serif; font-weight: 400; >/* Remove outline of all elements on focus */ *:focus < outline: 0; >body < background: #263238; /* Set background color to #263238*/ >h3 < text-align: center; >/* Add styles to 'container' class */ .container < padding: 12px 24px 24px 24px; margin: 48px 12px; background: #E3F2FD; border-radius: 4px; >/* Add styles to 'label' selector */ label < font-size: 0.85em; margin-left: 12px; >/* Add styles to 'input' and 'textarea' selectors */ input[type=text],input[type=email], textarea < width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; >/* Add styles to show 'focus' of selector */ input[type=text]:focus,input[type=email]:focus, textarea:focus < border: 1px solid green; >/* Add styles to the submit button */ input[type=submit] < background: #64B5F6; margin: 0 auto; outline: 0; color: white; border: 0; padding: 12px 24px; border-radius: 4px; transition: all ease-in-out 0.1s; position: relative; display: inline-block; text-align: center; >/* Add styles for 'focus' property */ input[type=submit]:focus < background: #A5D6A7; color: whitesmoke; >/* Style 'hover' property */ input[type=submit]:hover < background: #2196F3; >/* Align items to center of the 'div' with the class 'center' */ .center

Источник