Skip to main content

Simplest Contact Form Design Using Html Css Only

by Rustcode
simplest-contact-form-design-using-html-css-only

Simplest Contact Form Design Using Html Css Only

Designing the simplest contact form using just HTML and CSS offers an efficient way to incorporate a direct communication tool into your website. This article explores the art of creating a straightforward and user-friendly contact form with no need for complex coding or third-party tools. By harnessing HTML for structure and CSS for style, you can effortlessly fashion a clean, functional contact form that allows your website visitors to easily reach out. In this uncomplicated approach, we'll keep the process streamlined and effective, ensuring a seamless user experience on your website.

This contact form's simplicity doesn't just enhance user engagement but also simplifies website maintenance. The absence of external libraries or scripts means less loading time and response time, making it an excellent choice for those seeking a hassle-free yet effective way to connect with their audience.


Table Of Contents

Read Also:

HTML:

Let's begin with the foundational structure of an HTML document, as depicted below.

<!DOCTYPE html>
<html>
 <head>
   <title>Simplest Contact Form Design Using Html Css Only</title>
 </head>
 <body>
	// Content
 </body>
</html>


You can incorporate all the required links and dependencies into the HTML document using the code snippet provided below. 

<link href="https://fonts.googleapis.com/css?family=Montserrat:500,700,900|Work+Sans:300" rel="stylesheet">   
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Berkshire+Swash&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;0,6..96,800;0,6..96,900;1,6..96,400;1,6..96,500;1,6..96,600;1,6..96,700;1,6..96,800;1,6..96,900&family=Oswald&display=swap" rel="stylesheet">


Now that we have established the basic HTML structure and ensured that all necessary dependencies are included in the HTML document, it is time to proceed with writing the HTML code, which is provided below. 

<!DOCTYPE html>
<html>
<head>
  <title>Simplest Contact Form Design | Rustcode</title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:500,700,900|Work+Sans:300" rel="stylesheet">   
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Berkshire+Swash&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;0,6..96,800;0,6..96,900;1,6..96,400;1,6..96,500;1,6..96,600;1,6..96,700;1,6..96,800;1,6..96,900&family=Oswald&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="contact">
     <div class="head">
       <h1>Say Hello!</h1>
      <p>Lorem ipsum dolor sit amet, consectetur esad adipiscing elitigh.</p>
    </div>

      <form>
        <input type="text" placeholder="Name">
        <input type="email" placeholder="Email">
        <textarea name="message" placeholder="Message"></textarea>
        <button type="button" class="button" name="button">Send Message</button>
      
      </form>
  </div>

</body>
</html>
  • The HTML document starts with defining its document type.
  • It includes a title for the page and links to various font styles from Google Fonts for text appearance.
  • The webpage contains a "Say Hello!" heading, a brief description, and a contact form.
  • The form includes fields for "Name," "Email," and a "Message" as well as a "Send Message" button.
  • This setup provides the foundation for a basic contact form to collect user information and messages on a web page.

Output:

output-html-code

Read Also:

CSS:

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  overflow: hidden;
  font-family: "Montserrat", sans-serif;
}

html,
body {
  height: 100vh;
  background: #e5e5e5;
}

.contact {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  box-shadow: 0px 0px 9px 3px rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  background: #1A1C1E;
}

.contact .head {
  padding: 50px 30px 30px 30px;
  background: #1A1C1E;
  overflow: hidden;
  text-align: center;
  color: white;
}

.head h1 {
  font-size: 40px;
  font-weight: 400;
  font-family: 'Berkshire Swash', cursive;
}

.contact p {
  text-align: center;
  font-size: 14px;
  letter-spacing: .04em;
  width: 100%;
  padding: 25px 20px;
  padding-top: 10px;
  line-height: 24px;
  font-weight: 500;
}

form {
  padding: 30px;
  padding-top: 10px;
}

.contact form>input,
.contact form>textarea {
  width: 100%;
  padding: 6px 2px;
  font-weight: 500;
  color: whitesmoke;
  margin-bottom: 50px;
  background: transparent;
  border: 0px;
  border-bottom: 1px solid #e0d8d8;
}

.contact form>textarea {
  resize: none;
  margin-bottom: 60px;
  padding: 0px;
  height: 24px;
}

.contact form>input:focus,
.contact form>textarea:focus {
  outline: 0;
}

.button {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 18px;
  letter-spacing: 1px;
  background: #5E6061;
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 20px;
}

.button:hover {
  background: #4E5051;
}

.button:focus {
  outline: 0;
}
  • The code begins with setting some common styles for all elements, such as margin, padding, and the box-sizing model. It also hides overflow and specifies the "Montserrat" font.
  • It styles the HTML and body elements, setting a background color and ensuring the page takes up the full viewport height.
  • The "contact" class styles the contact form, positioning it in the center of the page, applying a box shadow and border-radius, and setting the background color.
  • The "head" class styles the form header with padding, background color, and text styling.
  • The form and its input fields are styled with various properties, including width, padding, border, and background, to create a consistent and visually appealing design.
  • The "button" class defines the appearance of the form submission button, specifying its size, color, and hover effect.

Output:

Read Also:

Output:

Read Also:

Youtube Video:

We also made a youtube video for "Simplest Contact Form Design Using Html Css Only", if you want to watch demo you can click on below video.

Read Also:


Comments

Post a Comment