Responsive Contact Form with recaptcha using HTML and CSS only

Last Updated on October 1st, 2021 by Codevo
Responsive Contact Form with recaptcha using HTML and CSS only

Hello, today in this blog you'll learn how to create a responsive contact form with recaptcha using html and css only.

In my previous article, we built a complete vanilla javascript blog .

If you haven't checked it out then do so because you are going to learn pure javascript that is you will build the blog without using any framework.

On this contact form, we have four input fields namely name, email, tel, website and a textarea for the message. Underneath the input and textarea fields, we have a reCAPTCHA and a submit button.

One thing to note is the reCAPTCHA must be checked before the form can be submitted.

If you’re finding it difficult to understand what I am saying then you can watch a full video tutorial on this contact form (Responsive Contact Form with reCAPTCHA using html and css only).

Video Tutorial of Contact Form with reCAPTCHA

In the video, you've seen how to build a responsive contact form with reCAPTCHA using HTML and CSS only. I hope you understood the basic codes behind creating this form.

I did my best to show every output in the browser without wasting a lot of time.

reCAPTCHA

we used this google site to create the reCAPTCHA for the contact form.

Real quick, the reCAPTCHA can only work with the domains you specify while creating it. Also, you include as many domains as you want.

You might like this:

  1. Complete Blog with Vanilla Js
  2. Sidebar Menu with html css
  3. Shopping Cart with Js
  4. Portfolio Website

To create this form (Login and Registration Form in HTML). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file.

First, create an HTML file with the name index.html and paste the given codes into it.

<!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" />
<link rel="stylesheet" href="styles.css" />
<title>Responsive Contact Form</title>
</head>
<body>
<div class="wrapper">
<form class="form">
<h2 class="heading">Responsive Contact Form</h2>
<div class="form-controls">
<div class="field">
<div class="control">
<input type="text" placeholder="Name" />
<ion-icon name="person"></ion-icon>
</div>
<div class="control">
<input type="email" placeholder="Email" />
<ion-icon name="mail"></ion-icon>
</div>
</div>
<div class="field">
<div class="control">
<input type="tel" placeholder="Phone Number" />
<ion-icon name="call"></ion-icon>
</div>
<div class="control">
<input type="text" placeholder="Website" />
<ion-icon name="globe"></ion-icon>
</div>
</div>
<div class="message">
<textarea name="message" placeholder="Enter Message"></textarea>
<ion-icon name="chatbubble-ellipses"></ion-icon>
</div>
<div class="buttons">
<div
class="g-recaptcha"
data-sitekey="6Lfjd-8bAAAAAAqo03Qu4kVIpeRh7Xwik1-CBDVt"
></div>
<input type="submit" value="Send Message" />
</div>
</div>
</form>
</div>
<script src="https://www.google.com/recaptcha/api.js"></script>
<script
type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
></script>
</body>
</html>
index.html

Second, create a CSS file with the name of style.css and paste the given codes in it.

:root {
--primary: #0d6efd;
}
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
body {
font-family: "Roboto", sans-serif;
font-size: 1.6rem;
min-height: 100vh;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--primary);
padding: 3rem;
}
.wrapper {
width: 70rem;
margin: 0 auto;
background-color: #fff;
padding: 2rem;
border-radius: 5px;
}
.wrapper .heading {
text-align: center;
font-size: 3.5rem;
background-color: #222;
background-image: linear-gradient(45deg, #ff00b3, #0d6efd);
background-clip: text;
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.wrapper .form-controls {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid #ddd;
}
.wrapper .field {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2rem;
}
.wrapper .control {
position: relative;
width: 100%;
}
.wrapper .control:not(:last-child) {
margin-right: 1rem;
}
.wrapper .field input,
.wrapper .message textarea {
font-family: "Roboto", sans-serif;
width: 100%;
height: 100%;
outline: none;
border: 1px solid #ddd;
border-radius: 5px;
padding: 1.3rem 0;
text-indent: 3.5rem;
color: #444;
font-size: 1.6rem;
}
.wrapper .field ion-icon {
position: absolute;
top: 50%;
left: 1rem;
font-size: 1.6rem;
transform: translateY(-50%);
color: #444;
pointer-events: none;
}
.wrapper .message {
position: relative;
}
.wrapper .message textarea {
min-height: 15rem;
text-indent: 4rem;
padding: 1rem 0;
resize: vertical;
}
.wrapper .message ion-icon {
position: absolute;
top: 1.3rem;
left: 1.5rem;
font-size: 1.6rem;
color: #444;
pointer-events: none;
}
.wrapper .buttons {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 3rem;
}
.wrapper .buttons input[type="submit"] {
width: calc(100% / 2);
background-image: linear-gradient(45deg, #ff00b3, #0d6efd);
border: none;
outline: none;
padding: 1.5rem 0;
border-radius: 5px;
color: #fff;
font-size: 1.7rem;
cursor: pointer;
}
@media (max-width: 567px) {
.wrapper .heading {
font-size: 2.5rem;
}
.wrapper .field {
flex-direction: column;
margin-bottom: 1rem;
}
.wrapper .control:not(:last-child) {
margin-right: 0rem;
margin-bottom: 1rem;
}
.wrapper .buttons {
flex-direction: column;
}
.wrapper .buttons input[type="submit"] {
margin-top: 2rem;
padding: 1rem 0;
font-size: 1.5rem;
}
.wrapper .field input,
.wrapper .message textarea {
padding: 1rem 0;
text-indent: 3.5rem;
font-size: 1.5rem;
}
}
styles.css

If your code doesn’t work or you’ve faced any error/problem then feel free to comment down or contact us from the contact page.

Also, download the full source code below.

Github link

Download Code Files

0 COMMENTS

Congratulations, you have the opportunity to be the first commenter on this article. Have a question or suggestion? Please leave a comment to start the discussion.

LEAVE A REPLY