Contact Us Page Design Using Html and Css

Contact Us Page Design Using Html and Css is a website design tutorial that helps you to create an awesome contact page for your website. The contact us page is a crucial part of any website. It is the first thing that visitors see when they visit your site. And it is the last thing that they see before leaving. So it's important to make sure that you have a good contact us page design and layout on the website.

A contact page of your website should be simple and easy to use . It is where visitors come to find out how they can get in touch with you or the company. There are many different ways to design a Contact Us Page, but it's important to make sure that it's easy for people to find what they're looking for and that they are able to use the form easily. we will show you one easiest and simple method. This article will give you source code also how you can do this and also show you some output of Contact Us Pages along with a youtube video.

Interview Questions:

The first step to designing a contact us page for your website is to decide what type of content you want on the page. What kind of information do you want to take from users like email, phone number etc? So start this article without any further ado. If want to read more articles related to web development you can visit this playlist.

For more gsap animations you can follow the gsap playlist.

Read Also:

HTML:

Let's start with the boilerplate of html document. A boilerplate is just the basic code of html document that help us and the browser understand the structure of html document. Apart from this, it helps to place content and metadata in the right way. Which you can see below.

<!DOCTYPE html>
<html>
<head>
 <title>Contact Us Page Design | Rustcode</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>

Body Content 

<script src="script.js"></script>
</body>
</html>

For this form development, we are using "font-family" that gave good look to contact us form design. We are using the "Montserrat" font-family, the link is given below.

 <link href="https://fonts.googleapis.com/css?family=Montserrat:500,700,900|Work+Sans:300" rel="stylesheet">

We are using some social media icons to beautify the contact form. There are many libraries available in the market but the most popular is the "font-awesome" icon library. The link icon library link is given below to include in html document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Now let's include the gsap javascript library. This library helps us to apply animation to the form element. The link to gsap is given below. You include this library using a script tag at the bottom of html document.

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>

One by one we added all the dependencies of the HTML document now it's time to write HTML code. But before going to jump on Html code just go through the contact form design. So Let's try to understand the design of this contact form. First, we will divide this contact form into two parts.

Information Container
Contact Form

1. Information Container:

This container contains welcome messages, social media links and website honor contact details(like Address, Mobile Number, Email Address etc). You can change all these details at your convenience.

2. Contact Form:

This is the main container of the contact form that asks for user details in Html form. There are some inputs like Name, Email, Message etc and one submit button. All the inputs are mandatory to fill in this form, you can change that thing also. If you are using this form on your website please use proper input validation. You can ask for more details as per your requirement.

Below is the complete Html code, there has been no css applied till now. In the next part, we will add css.

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <link href="https://fonts.googleapis.com/css?family=Montserrat:500,700,900|Work+Sans:300" rel="stylesheet">
 <link rel="stylesheet" href="style.css">
 <title>Contact Us Page In Html Css | Rustcode</title>
</head>
<body>

<div class="contact-container">
  <div class="contact-inner-container">

    <div class="contact-info-container">
      <h1 class="contact-heading">Say Hello!</h1>
      <p class="contact-description">
        We're open for any suggestion or just to have a chat.
      </p>
      <div class="line"></div>

      <div class="contact-details">
        <h3><i class="fa fa-map-maker"></i> Address</h3>
        <p>198 Balistreri Extension Apt. 678, New Jersey, USA-328135</p>
      </div>
      <hr />

      <div class="contact-details">
        <h3><i class="fa fa-envelope"></i> Email</h3>
        <p>contactus@mail.com</p>
      </div>
      <hr />

      <div class="contact-details">
        <h3><i class="fa fa-phone"></i> Lets Talk</h3>
        <p>+91 9876543210</p>
      </div>
      <hr />

      <div class="social-link-container">
        <i class="fa fa-instagram"></i>
        <i class="fa fa-facebook"></i>
        <i class="fa fa-twitter"></i>
        <i class="fa fa-linkedin"></i>
      </div>
    </div>

    <div class="contact-form">
      <form class="form">
        <div class="form-group">
          <input type="text" name="name" class="input-field form-input" placeholder="Name" >
        </div>
        <div class="form-group">
          <input type="email" name="email" class="input-field form-input" placeholder="Email" >
        </div>
        <div class="form-group">
          <textarea name="message" rows="5" class="input-field form-input" placeholder="Message"></textarea>
        </div>
        <div class="form-group">
          <input type="submit" class="input-field submit-btn" value="Submit" >
        </div>
      </form>
    </div>

  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>

Output: Contact Form Output without css.

Read Also:

CSS:

CSS beautifies the Html document, so now the basic design is already designed. Now we will add CSS to align contact form components like inputs, social media buttons, welcome messages and all.

*{
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

body{
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.4;
  background: #F9F9F9;
  overflow-x: hidden;
}

.contact-container{
  width: 90%;
  height: 100vh;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.contact-inner-container{
  padding: 0px;
  width: 96%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: lightsteelblue;
  border-radius: 4px;
}

.contact-info-container{
  width: 50%;
  text-align: left;
  padding: 50px;
  background: #7925C7;
}

.contact-form{
  width: 50%;
  background: lightsteelblue;
  padding: 50px;
  border-radius: 0px 4px 4px 0px;
}

.contact-heading{
  font-family: inherit;
  font-size: 4rem;
  font-weight: 700 !important;
  line-height: 4rem;
  color: #F6F7A9;
}

.contact-description{
  font-family: inherit;
  font-weight: 700;
  color: #F6F7A9;
  line-height: 1.6rem;
  text-align: justify;
  font-size: 16px;
  margin-top: 20px;
}

.line{
  width: 100%;
  height: 8px;
  border-radius: 8px;
  background: #F6F7A9;
  margin: 24px 0px;
}

.contact-details{
  padding-top: 24px;
}

.contact-details h3{
  font-weight: 600;
  color: #F6F7A9;
}

.contact-details p{
  color: whitesmoke;
  font-weight: 500;
  margin-bottom: 6px;
}

.social-link-container{
  display: flex;
  margin-top: 30px;
}

.social-link-container .fa{
  margin-right: 20px;
  cursor: pointer;
  color: #F6F7A9;
  transition: all 0.2s;
}

.social-link-container .fa:hover, .submit-btn:hover{
  transform: translateY(-4px);
}

.form{
  display: flex;
  flex-direction: column;
  width: 100%;
}

.form-group{
  width: 100%;
  text-align: left;
  margin-top: 2px;
}

.form-group:not(:last-child){
  margin-bottom: 1rem;
}

.input-field{
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  outline: none;
  border: none;
  border-radius: 2px;
  padding: 18px;
  background: #F2F2F2;
}

.form-input{
  height: auto;
}

.form-group textarea{
  height: 200px;
}

.submit-btn{
  padding: 1rem 2.4rem;
  font-weight: 700;
  text-align: center;
  color: #F6F7A9;
  background: #7925C7;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.2s;
}

Output: Contact Form output after applying css.

Read Also:

SCRIPT:

TweenMax.staggerFrom(".form-group", 1, {
  delay: 0.2,
  opacity: 0,
  y: 20,
  ease: Expo.easeInOut
}, 0.2);

TweenMax.staggerFrom(".contact-info-container > *", 1, {
  delay: 0,
  opacity: 0,
  y: 20,
  ease: Expo.easeInOut
}, 0.1);

Output:

Read Also:

Youtube Video:

We also made a youtube video for "Preloader Loading Animation Using Html, Css And Gsap", if you want to watch and want to learn every step of this design.

Source Code:

Before jumping in to download the source code. First, write this code yourself and then you can cross-check it with reference code.

Read Also:

Archive

Contact Us Page Design | Html, Css And Gsap

Contact Us Page Design Using Html and Css

Table Of Content

HTML:

1. Information Container:

2. Contact Form:

CSS:

SCRIPT:

Output:

Youtube Video:

Source Code:

Comments

Post a Comment