Responsive Contact Form Design using HTML, CSS, and JavaScript: Step-by-Step with Source Code

By Faraz - January 26, 2024

Discover the art of creating a user-friendly contact page using HTML, CSS, and JavaScript. Follow our step-by-step guide with source code for a seamless web development experience.

Join us on Telegram

Responsive Contact Form Design using html, css, and javascript Step-by-Step with Source Code.jpg

Read Also Creating Words, Paragraph, and Character Counter with HTML, CSS, and JavaScript.jpg

Create Word & Character Counter with HTML, CSS, JavaScript (Source Code)

Welcome to our comprehensive guide on designing an interactive contact page using HTML, CSS, and JavaScript. In the digital landscape, a well-crafted contact page is more than just a form—it's an essential element for user interaction and engagement. In this tutorial, we'll take you through each step of the process, ensuring you not only create a functional contact form but also elevate the user experience on your website.

Join My Telegram Channel to Download the Project Source Code: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

Creating a solid foundation is crucial. We'll delve into the HTML structure necessary for a contact form. Understanding the purpose of each element will set the stage for seamless integration with CSS and JavaScript.

How to Implement:

Open your preferred text editor.
Start with the <form> tag and define the necessary fields like name, email, and message.

Let's break down the code step by step:

1. <!DOCTYPE html>: Declares the document type and version of HTML (HTML5 in this case).

2. <html lang="en">: The root element of the HTML document. The lang attribute specifies the language of the document as English.

3. <head>: Contains meta-information about the HTML document, including character set, viewport settings, title, and links to external resources.

<meta charset="UTF-8">: Specifies the character encoding of the document as UTF-8.
<meta http-equiv="X-UA-Compatible" content="IE=edge">: Instructs Internet Explorer to use the latest rendering engine.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Defines the viewport properties for responsive design.
<title>Contact Page Design</title>: Sets the title of the webpage to "Contact Page Design".
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css'>: Links to the Font Awesome CSS file, providing icons for social media.
<link rel="stylesheet" href="styles.css">: Links to an external stylesheet named "styles.css" for additional styling.

4. <body>: Contains the content of the HTML document.

<div class="container">: A container for the main content of the webpage.
<h2>Get in touch</h2>: Heading indicating the purpose of the contact page.
<p>...</p>: Paragraph with a message encouraging users to contact about web development.
<form class="contact-form">: A form with the class "contact-form" for users to input their details.
<div class="input-area">: Container for an input field.
Various input fields for name, email, subject, and a textarea for a message.
<button class="sendbtn">Send</button>: A button to submit the form.
<div class="social-container">: Container for social media links.
<div class="custom-social-container">: Inner container for styling.
<p>Contact me on</p>: A heading indicating the purpose of the social links.
<button class="cross-btn">...</button>: A button with a Font Awesome times icon to potentially close the social links.
<ul>...</ul>: An unordered list containing social media links with Font Awesome icons.
<button class="connect-btn">Get Connected</button>: A button with the class "connect-btn" encouraging users to get connected.

5. <script src="script.js"></script>: Links to an external JavaScript file named "script.js" for additional scripting.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contact Page Design</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <h2>Get in touch</h2>
      <p>Feel free to contact me about anything related to Web Development.</p>
      <form class="contact-form">
        <div class="input-area">
          <input type="text" placeholder="Your name" />
        </div>
        <div class="input-area">
          <input type="email" placeholder="Email address" />
        </div>
        <div class="input-area">
          <input type="text" placeholder="Subject" />
        </div>
        <div class="input-area h-80">
          <textarea placeholder="Your message"></textarea>
        </div>
        <button class="sendbtn">Send</button>
      </form>
    </div>
    <div class="social-container">
      <div class="custom-social-container">
        <p>Contact me on</p>
        <button class="cross-btn"><i class="fas fa-times"></i></button>
        <ul>
          <li>
            <a
              href="https://instagram.com/codewithfaraz"
              target="_blank"
              rel="nofollow"
            >
              <i class="fab fa-instagram"></i>
            </a>
          </li>
          <li>
            <a
              href="https://www.youtube.com/@codewithfaraz"
              target="_blank"
              rel="nofollow"
            >
              <i class="fab fa-youtube"></i>
            </a>
          </li>
          <li>
            <a
              href="https://facebook.com/codewithfaraz"
              target="_blank"
              rel="nofollow"
            >
              <i class="fab fa-facebook"></i>
            </a>
          </li>
          <li>
            <a
              href="https://twitter.com/codewithfaraz"
              target="_blank"
              rel="nofollow"
            >
              <i class="fab fa-twitter"></i>
            </a>
          </li>
          <li>
            <a
              href="https://linkedin.com/in/farazc60"
              target="_blank"
              rel="nofollow"
            >
              <i class="fab fa-linkedin"></i>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <button class="connect-btn">Get Connected</button>
    <script src="script.js"></script>
  </body>
</html>

Read Also

Create a Glassmorphism Calendar with HTML, CSS, and JavaScript

Step 2 (CSS Code):

Aesthetics play a pivotal role in user engagement. We'll guide you through styling the contact form using CSS, ensuring a visually appealing and cohesive design.

How to Implement:

Create a new CSS file and link it to your HTML document.
Define styles for form elements, ensuring consistency and readability.
Consider using modern design principles for an enhanced visual experience.

Let's break down the code step by step:

1. Font Import:

Imports the Poppins font from Google Fonts with specified weights (400, 600, 700, 800, 900).

2. Universal Box Sizing:

Sets the box-sizing property to border-box for all elements.

3. Body Styling:

Set the background color to lavender (#E6E6FA).
Utilizes Flexbox to center content vertically and horizontally.
Applies Poppins font as the default font for the body.
Ensures a minimum height of 100% of the viewport height.

4. Container Styling:

Styled container with a white background, a dark purple border, border-radius, and box shadow.
Uses Flexbox to center content vertically and horizontally within the container.
Sets padding, text alignment, and width properties.
Adjusts styling for smaller screens using media query.

5. Paragraph Styling Inside Container:

Sets color, and letter-spacing for paragraphs inside the container.

6. Form Styling Inside Container:

Sets a fixed width for the form inside the container.

7. Input Area Styling Inside Container:

Defines styling for an input area, including position, margin, height, and width.

8. Input and Textarea Styling Inside Container:

Applies styling for input and textarea elements, including font, padding, height, width, border, and border-radius.

9. Send Button Styling Inside Container:

Styles the send button with background color, text color, font size, padding, border, and border-radius.
Adds hover effect with a different background color.

10. Media Query for Small Screens:

Adjusts container padding for screens with a maximum width of 600 pixels.

11. Social Container Styling:

Fixes the position to the right bottom of the viewport.
Applies a transition effect for smoother visibility changes.
Sets a higher z-index to ensure visibility over other elements.

12. Visible Class for Social Container:

Defines a class to make the social container visible by changing its transform property.

13. Custom Social Container Styling:

Styles a container for social media links with a white background, rounded corners, box shadow, border, and font.
Defines the size limits for the container.

14. Cross Button Inside Social Container:

Creates a cross button with styling for color, cursor, font size, and position.

15. Paragraph Inside Social Container:

Styles a paragraph with background color, border-radius, color, font size, line height, padding, position, top, left, margin, and transform properties.

16. Unordered List Inside Social Container:

Sets styling for an unordered list with flex display, zero padding, and a top margin.

17. List Items Inside Social Container:

Defines margin for list items.

18. Social Media Links Inside Social Container:

Styles links with border, border-radius, color, font size, flex display, height, width, and text decoration.

19. Hover Effect for Social Media Links:

Changes border color and applies a box shadow on hover.

20. Connect Button Styling:

Styles a connect button with border-radius, background color, border, box shadow, color, cursor, font size, line height, padding, position, bottom, right, and z-index properties.

21. Hover Effect for Connect Button:

Changes background color on hover.

22. Media Query for Extra Small Screens:

Adjusts the position of the social container and connect button for screens with a maximum width of 480 pixels.

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800;900&display=swap");

* {
	box-sizing: border-box;
}

body {
	background: #E6E6FA;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: "Poppins", sans-serif;
	min-height: 100vh;
}

.container {
	background-color: #fff;
	border: 3px solid #660033;
	border-radius: 10px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 30px 60px;
	text-align: center;
	width: 600px;
	max-width: 100%;
}

.container p {
	color: rgb(136, 136, 136);
	letter-spacing: 0.4px;
}

.container form {
	width: 100%;
}

.container .input-area {
	position: relative;
	margin: 10px 0;
	height: 44px;
	width: 100%;
}

.container .h-80 {
	height: 80px;
}

.container input, .container textarea {
  position: absolute;
	display: block;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	padding: 12px;
	height: 100%;
	width: 100%;
  border: 1px solid #999;
  border-radius: 4px;
  outline: none;
  resize: none;
}

.container .sendbtn {
  display: block;
  width: 100%;
	background: #660033;
	color: #fff;
	font-size: 18px;
	padding: 11px;
  border: none;
	border-radius: 4px;
  cursor: pointer;
}

.container .sendbtn:hover {
  background-color: #993366;
}

@media screen and (max-width: 600px) {
	.container {
		padding: 20px 30px;
	}
}

.social-container {
	position: fixed;
	right: 0;
	bottom: 80px;
	transform: translateX(100%);
	transition: transform 0.4s ease-in-out;
  z-index: 10;
}

.social-container.visible {
	transform: translateX(-10px);
}

.custom-social-container {	
	background-color: #fff;
	border-radius: 16px;
	box-shadow: 0 16px 31px -17px rgba(248, 4, 77, 0.6);
	border: 5px solid #660033;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-family: "Poppins", sans-serif;
	position: relative;
	height: 169px;	
	width: 370px;
	max-width: calc(100% - 10px);
}

.custom-social-container button.cross-btn {
	border: 0;
	color: #660033;
	cursor: pointer;
	font-size: 20px;
	position: absolute;
	top: 5px;
	right: 5px;
}

.custom-social-container p {
	background-color: #660033;
	border-radius: 0 0 10px 10px;
	color: #fff;
	font-size: 14px;
	line-height: 28px;
	padding: 2px 17px 6px;
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0;
	transform: translateX(-50%);
	text-align: center;
	width: 215px;
}

.custom-social-container ul {
	display: flex;
	list-style-type: none;
	padding: 0;
  margin-top: 58px;
}

.custom-social-container ul li {
	margin: 0 10px;
}

.custom-social-container ul li a {
	border: 1px solid #999;
	border-radius: 50%;
	color: #660033;
	font-size: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	width: 50px;
	text-decoration: none;
}

.custom-social-container ul li a:hover {
	border-color: #ffd791;
	box-shadow: 0 9px 12px -9px #ffd791;
}

.connect-btn {
	border-radius: 26.5px;
	background-color: #660033;
	border: 1px solid #660033;
	box-shadow: 0 16px 22px -17px #660033;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	line-height: 20px;
	padding: 12px 20px;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 999;
}

.connect-btn:hover {
	background-color: #993366;
}

@media screen and (max-width: 480px) {

	.social-container.visible {
		transform: translateX(0px);
	}
	
	.connect-btn {
		right: 10px;
	}
}

Step 3 (JavaScript Code):

Now it's time to make your contact page dynamic. We'll introduce JavaScript to add interactive elements, making the user experience more engaging.

How to Implement:

Incorporate JavaScript into your HTML document or link an external script.
Ensure seamless interaction without compromising on performance.

Let me break down the code for you:

1. Contact Form Section:

It selects the HTML element with the class 'contact-form' and 'container'.
It attaches an event listener to the contact form for the 'submit' event.
When the form is submitted, it prevents the default form submission (preventing a page reload).
It then replaces the content of the container with a message thanking the user for their message.

2. Social Media Buttons Section:

It selects HTML elements with the classes 'connect-btn', 'cross-btn', and 'social-container'.
It attaches an event listener to the 'connect-btn' button for the 'click' event.
When the 'connect-btn' is clicked, it toggles the 'visible' class on the 'social-container', meaning it shows/hides the social media buttons.
It attaches an event listener to the 'cross-btn' button for the 'click' event.
When the 'cross-btn' is clicked, it removes the 'visible' class from the 'social-container', hiding the social media buttons.

const contactform = document.querySelector('.contact-form');
const container = document.querySelector('.container');

contactform.addEventListener('submit', (event) => {
	event.preventDefault();
	container.innerHTML = '<p>Thanks for your message. <br /> I\'ll respond to you shortly</p>';
});

const connectbtn = document.querySelector('.connect-btn');
const crossbtn = document.querySelector('.cross-btn');
const socialcontainer = document.querySelector('.social-container');

connectbtn.addEventListener('click', () => {
	socialcontainer.classList.toggle('visible')
});

crossbtn.addEventListener('click', () => {
	socialcontainer.classList.remove('visible')
});

Final Output:

Responsive Contact Form Design using html, css, and javascript Step-by-Step with Source Code.gif

See the Pen Simple JavaScript Contact Page by Faraz (@codewithfaraz) on CodePen.

Read Also how to create a responsive product showcase carousel using html, css and javascript.png

Create a Responsive Product Showcase Carousel

Conclusion:

In conclusion, you've embarked on a journey to master the art of designing an interactive contact page using HTML, CSS, and JavaScript. By following our comprehensive guide, you've acquired the skills to not only create a functional form but also enhance the overall user experience on your website. Implement these steps on your website, and watch as user engagement flourishes.

To facilitate your implementation process, we've provided the complete source code for download. Feel free to customize and integrate it into your website effortlessly. Happy coding!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊