Popup Contact Form using HTML and CSS

Popup Contact Form using HTML and CSS (Free Code)

Popup Contact Form using HTML and CSS

In this article, you will learn how to create Popup Contact Form using HTML and CSS. Earlier I shared with you the tutorials of different types of Simple Contact Forms. However, this HTML Contact Form is a complete pop-up. 

This means that under normal circumstances this form is hidden. A button is available. When you click on that button, you can see the complete contact form.

This type of form is used on various websites to save a lot of space. This Popup Contact Form is very easy to create if you have an idea about Basic HTML CSS. I didn’t use any javascript or jQuery here. Earlier I shared tutorials on a pop-up login form, popup registration forms, etc. You can see those designs. 

Popup Contact Form Html

Below I have given a preview that will help you to know how this Popup Contact Form HTML CSS works. Below you will find tutorials and source codes. If you want to download the source code, use the download button at the bottom of the article.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

As you can see above, the contact form is completely hidden. Instead, a small button is found inside the webpage. When you click on that popup button, you can see the complete contact form. 

I used HTML’s checkbox to make this button work. So there is no need to use JavaScript here. There is a cancel button in the contact form which if clicked will hide the HTML Popup Contact Form.

How to create a popup contact form in HTML

The form has a heading used first and then there are three input boxes for input. The input boxes are for inputting names, emails, and messages, respectively. At the end of all, there is a submit button on which the messages can be sent by clicking.

I created this contact form according to the neomorphic design. I have already shared tutorials on many elements such as login form, analog clock, digital clock, etc. using Neumorphism. If you want to create this popup contact form then follow the tutorial below.

Step 1: Html code of contact form

Below is the HTML code needed to create this popup contact form. However, each code has given the required information so that you can understand which code I have used for which purpose. 

First I created the button on the homepage then created an area of ​​the contact form. That area has three input boxes, first the heading, the cancel button, and then the input. At the end of it all, I have a submit button.

<div class=”center”>
<!–Popup button on the homepage–>
  <input type=”checkbox” id=”click”>
  <label for=”click” class=”click-me”>Contact Us</label>
<!–popup login form area–>
  <div class=”content”>
    <div class=”wrapper”>
<!–The heading of the login form–>
    <h3>Contact Us</h3>
<!–Button to close the form–>
    <label for=”click” id=”times”>x</label>
    <div class=”form”>
<!–Place to input the name–>
      <div class=”input_field”>
        <input type=”text” placeholder=”Name”>
      </div>
<!–Place to input the email–>
      <div class=”input_field”>
        <input type=”text” placeholder=”Email”>
      </div>
<!–Place to input the message–>
      <div class=”input_field”>
        <textarea placeholder=”Message”></textarea>
      </div>
<!–Submit button–>
     <div class=”btn”>
       <a href=”#”>Send</a>
     </div>
   </div>
  </div>
 </div>
</div>

Step 2: Design the webpage with CSS

I designed the webpage using the following CSS codes. The background color of the webpage is used here.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  outline: none;
}
body{
  margin:0;
  padding:0;
  font-family:sans-serif;
  background: #dde1e7;
  min-height: 100vh;
}
.center,.content{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
Html code of contact form

Step 3: Design the popup button

I have designed the popup button using the following tips. This button’s width: 160px, height: 50px and background: # dde1e7 have been used.

.click-me{
  display:block;
  width:160px;
  height:50px;
  background: #dde1e7;
  text-align:center;
  font-size:22px;
  line-height:50px;
  cursor:pointer;
  box-shadow: -3px -3px 7px #fffdfdcc,
              3px 3px 5px rgba(94, 104, 121, 0.342);
}
.click-me:hover{
  color: #08adef;
  box-shadow: inset 2px 2px 5px #babecc,
              inset -5px -5px 10px #ffffff73;
}

The following little code has been used to hide the checkbox. I have used display: none here so the checkbox will be hidden.

#click{
  display:none;
}
Design the popup button

Step 4: Basic structure of Popup Contact Form

I have created the basic structure of the popup contact form using the following CSS. I mentioned earlier that this contact form is designed according to the Neumorphism design. So here both the color of the webpage and the background color of the element is the same. 

However, box-shadow has been used to determine the size of the element. The width of the simple popup contact form: 330px and height depend on the amount of content.

.content{
  opacity:0;
  visibility:hidden;
  width: 330px;
  height: auto;
  background: #dde1e7;
  padding: 30px 35px 40px;
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8),
               6px 6px 10px rgba(0, 0, 0, 0.2);
}

Here I have used opacity: 0 so the basic structure of this form cannot be seen. The result of the image below cannot be seen now. This image will help you to understand what will change after using these codes.

Basic structure of Popup Contact Form

Step 5: Design the cancel button

The following codes have been used to design the cancel button.

#times{
  position:absolute;
  right:10px;
  top:20px;
  font-size:25px;
  background: #dde1e7;
  padding: 3px;
  padding-left: 11px;
  padding-right: 11px;
  border-radius: 50%;
  box-shadow: -4px -4px 7px #fffdfdb7,
              3px 3px 5px rgba(94, 104, 121, 0.24);
  cursor:pointer;
}

The popup has been executed using the following CSS. The following code has activated the popup button on the homepage.

Above we used opacity: 0 to hide the contact form. Now opacity: 1 has been used using checked. This means that when you click on the button, you will see the popup contact form.

#click:checked~.content{
  opacity:1;
  visibility:visible;
}
Design the cancel button

Step 6: Design the headings by CSS

I have designed the heading using the following css. If you look you will understand that a heading has been used here to enhance the beauty. The following CSS has been used to design it. 

.wrapper h3{
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 23px;
  margin-bottom: 25px;
  text-align: center;
}
Design the headings by CSS

Step 7: Design the input spaces

I have used the following codes to design the input spaces. Here height: 43px, width: 100% of each input box is used. In general, looking at the input boxes, it seems that it is slightly inward. For this, I have used shadow.

.wrapper .input_field{
  margin-bottom: 15px;
}
.wrapper .input_field input[type=”text”],
.wrapper .input_field textarea{
  width: 100%;
  padding: 12px;
  border: 0;
}
input,textarea{
    display: block;
    height: 43px;
    width: 100%;
    background-color: rgba(255,255,255,0.07);
    border-radius: 3px;
    border: none;
    box-shadow: inset 2px 2px 5px #babecc,
              inset -5px -5px 10px #ffffff73;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 300;
}
.wrapper .input_field textarea{
  resize: none;
  height: 100px;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #656a6c;
  text-transform: uppercase;
}
Design the input spaces

Step 8: Design the Popup Contact Form button

The following CSS has helped to design the button in the popup contact form. Padding has helped to increase the size of this button.

.wrapper .form .btn{
  margin-top: 25px;
  background: linear-gradient(170deg,#e8207f,#f23ebc);
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: bold;
}
.wrapper .form .btn a{
  color: #fff;
  display: block;
}
Popup Contact Form using HTML

Hopefully, you have learned from the above tutorial how I created this popup contact form using HTML and CSS. If you have any problems you can let me know by commenting. 

I have created many more types of pop-up elements before. The source code required to create this popup contact form is in the button below.