Contact information html css

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 in HTML and CSS

A contact form requires/ needs to collect atleast three things a name, an email address, and a message. Instead of an email address you can collect a phone number or both.

Let us start building the contact form.

Creating a Contact Us Form in HTML

We are going to start with a basic HTML page.

    charset="utf-8">  name="viewport" content="width=device-width"> Contact Us Form   Contact Us   

Name Text Box

You can start by creating a form item for the name. You are going to use HTML tag which creates a text box that occupies a single line.

  Contact Us  name="readername" type="text" placeholder="Jane Smith"/>  

The name attribute should be unique for each input on the form.

The placeholder is used to display text suggestion of what you want the readers to fill in the textbox.

Email Text Box

Next, you can make the email text box. Use the input html element, but this time change the type to email.

  Contact Us  name="readername" type="text" placeholder="Jane Smith"/>  name="readeremail" type="email" placeholder="janesmith@mail.com"/>  

Message Text Box

Next, create a text box for the message. You will use textarea that is meant for multiline text form boxes.

  Contact Us  name="readername" type="text" placeholder="Jane Smith"/>  name="readeremail" type="email" placeholder="janesmith@mail.com"/>  name="message" rows="5" cols="30" placeholder="Message">  

Submit Button

Once the reader completes filling the form, they need a way to send the data. The submit button allows them to send the data.

  Contact Us  name="readername" type="text" placeholder="Jane Smith"/>  name="readeremail" type="email" placeholder="janesmith@mail.com"/>  name="message" rows="5" cols="30" placeholder="Message">  type="submit">Send Message  

When you press the button, nothing happens. You first need to wrap the form elements in a container.

Form Container

When you are creating a form in HTML, you need to put it inside HTML tags. So, wrap all your form elements with the form tags.

  Contact Us  name="readername" type="text" placeholder="Jane Smith" />  name="readeremail" type="email" placeholder="janesmith@mail.com" />  required>   type="submit">Send Message   

A form needs two attributes: a method and action.

When sending forms content, there are two methods you can use. The get method and the post method. The post method is more secure compared to the get method.

You also need to setup where the form will submit the data. The action attribute tells your contact form where to send the data.

  method="post" action="/contact-form-data/">  name="readername" type="text" placeholder="Jane Smith" />  name="readeremail" type="email" placeholder="janesmith@mail.com" />  name="message" rows="5" cols="30" placeholder="Message">  type="submit">Send Message   

If you press the button, the form will submit the form data even if all the textboxes are empty.

To make filling the textboxes mandatory before a form can submit data, use the required attribute on the input and textarea elements.

  Contact Us  method="post" action="/contact-form-data/">  name="readername" type="text" placeholder="Jane Smith" required/>  name="readeremail" type="email" placeholder="janesmith@mail.com" required/>  name="message" rows="5" cols="30" placeholder="Message" required>  type="submit">Send Message   

Bonus: Styling a Contact Form Using CSS

You can make your form look great by using CSS. Look at some of the form templates for some ideas.

You are designing your form with style similar to this design.

Start by adjusting the size of text on the form.

input, textarea, button  font-size: 1.4rem; > 

input, textarea, button  font-size: 1.4rem; padding: 10px; > 

Then remove the border on all the form items. Then add a background color to the input and textarea.

input, textarea, button  font-size: 1.4rem; padding: 10px; border: none; > input, textarea  background-color: #ccc; > 

Then, making sure that each item on the form occupies its own line.

input, textarea, button  width: 100%; > 

Add spacing between the form items.

input, textarea, button  margin-bottom: 15px; > 

Now add spacing around the form. Correct the form spacing to be equal on all sides.

form  margin-left: -20px; padding: 40px; > 

The form looks great on small screens like smartphones. To make the form look good on desktop use media queries. Add a div to cover the whole form.

@media(min-width: 48em)  div  max-width: 850px; > > 

@media(min-width: 48em)  div  max-width: 850px; margin-left: auto; margin-right: auto; > > 

Result

You will note that the button appears to be shorter than the input elements. Add box-sizing property to sort out the problem.

input, textarea, button  width: 100%; font-size: 1.4rem; margin-bottom: 15px; padding: 10px; border: none; box-sizing: border-box; > 

Also center the heading on the contact us page.

Hi there! I am Avic Ndugu.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.

Front End Developer Newsletter

Receive a monthly Frontend Web Development newsletter.
Never any spam, easily unsubscribe any time.

About

If you are just starting out you can test the waters by attempting the project-based HTML tutorial for beginners that I made just for you.

Okay, you got me there, I made it because it was fun and I enjoy helping you on your learning journey as well.

You can also use the HTML and CSS projects list as a source of projects to build as you learn HTML, CSS and JavaScript.

Start understanding the whole web development field now

Stop all the confusion and start understanding how all the pieces of web development fit together.

Never any spam, easily unsubscribe any time.

Recent Posts

Copyright © 2018 — 2023 DevPractical. All rights reserved.

Источник

Contact Us Page in HTML & CSS with Cool Animations

Hello readers, Today in this blog you’ll learn how to create a contact us page using HTML & CSS. Earlier, you learned to Create a responsive navigation bar using HTML & CSS. I have also created a blog on other cool stuff about web designing.

The contact us page is a web page containing all the contact information regarding the organization or company to whom the particular website belongs to. It is one of the very essential pages for every website.

What Contact Us page includes?

• Social media links and contact number/email.
• Contact Form.
• Company Address (either on google Maps or in text format).

3 Tips to make Contact Us page better

• Make user-friendly neat and simple designs.
• Add some animations.
• Do not make the google map’s width 100%.

Today I will show you how you can create your own contact us page using HTML & CSS with awesome animation. On this page, I haven’t used any plugin or library to animate it. It is animated with pure CSS. I have created a ‘main’ div at first and then a ‘container’ div inside the ‘main’ div. All the information/contents are inside the ‘container’ div. Inside the container, I have used other two div_s, one for images and another for contact forms and social media links.

As you can see in the above image, the ‘container’ div has a box shadow which makes its design look much better. The whole page is completely responsive i.e. it can be used on each and every device with different screen widths. I have also added the entrance animation on the page load with pure CSS. When you reload the page the container will slide down from the top to its exact position and the contact form will slide left from right to its exact position.

I have given the official color of each social media icon. The round-shaped blue background at the top left of the screen is created with the “before” pseudo-element and the arrow typed shape at the background of the image is created with a CSS clip-path. If you are going to use the pseudo-element without writing any content be sure that you have included the “position” property in both parent and child div.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Contact Us page in HTML & CSS).

Video Tutorial of Contact Us page in HTML & CSS

All this page design and animation are based on CSS. If you’re a beginner you can also create this type of contact us page. If you like this program ( Contact Us page in HTML & CSS ) and want to get source code. You can easily get the source code of this program. To get the source codes you just need to scroll down.

Contact Us page in HTML & CSS [Source Codes]

To create this program ( Contact Us page in HTML & CSS ). First, you need to create two files one HTML File and another one is CSS File. After creating these files just paste the following code into your file. Remember, you have to download the image yourself. I have used the SVG image but you can use images of other formats too. First, create an HTML file with the name index.html and paste the given codes into your HTML file. Note it, you’ve to create a file with a .html extension.

HTML

Note: In the tag, i have added some unnecessary text. So, remove that after pasting the code.

Second, create a CSS file with the name style.css and paste the given code into your CSS file. Note it, you’ve to create a file with a .css extension.

CSS

That’s all, now you’ve successfully created a contact us page using HTML & CSS. If your code does not work or you’ve faced any errors/problems then please comment down. If you feel this article had helped you, please share it with your friends.

Источник

21 CSS Contact Forms

See the Pen Contact Form by Aina Requena (she/her) (@ainarela) on CodePen.

Dev: Aina Requena

Contact Form

Dev: Leena Lavanya

Responsive Contact Form

Dev: Lisa Wagner

Expanding Contact Form

Dev: Joe Harry

Responsive Contact Form

Dev: Bobby Korec

Elegant Contact Form

Dev: Grandvincent Marion

MINIMALISTIC FORM

Dev: Matheus Marsiglio

Contact Form Template

Dev: Chris Holder

RESPONSIVE MATERIAL DESIGN CONTACT FORM

Dev: Nikhil Krishnan

Elegant Contact Form

Dev: Mark Murray

HTML5 Contact Form

Dev: ssbalakumar

Latest Post

55 Cool CSS Calendars

19 Barcodes in CSS

25 CSS Masonry Layout Examples

23 CSS Card Layouts

27 CSS Subscribe Forms

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Ok

Источник