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 (more…)

Continue ReadingPopup Contact Form using HTML and CSS (Free Code)
Responsive Checkout Form using HTML CSS

Responsive Checkout Form using HTML CSS (Free Code)

Responsive Checkout Form using HTML CSS

In this article, you will learn how to create a Responsive Checkout Form using HTML and CSS. Earlier I shared with you the tutorials of different types of checkout form CSS. This is the first time I have created a Responsive Checkout Form tutorial using HTML and CSS.

I use payment forms in different places. This type of check-out form is also used for a variety of e-commerce platforms, online products, or service platforms. This Responsive Form I created only with HTML and CSS. 

Everything contained in a professional payment form is provided here. Although it is not functional as it is only designed by HTML CSS here.

Responsive Checkout Form

Checkout form HTML CSS is fully responsive so you can use it directly in any of your projects. Below I have given a preview that will help you to know how it works (Responsive Checkout Form using HTML CSS).

You can use the download button below the article to get the required source code.

See the Pen
CHECKOUT FORM HTML CSS by Foolish Developer (@foolishdevweb)
on CodePen.

I made a box on the webpage as you saw above. I used black as the background color of the webpage. The background of the entire checkout page has been whitewashed. First I used a heading with blue in the background. 

There are four inputs here. To input the first input box card number, to input the name of the second input box cardholder. Then there are two input boxes to input Expire date and CVC code. There is a button at the end of all that will submit this information.

How To Create a Checkout Form with CSS

Below I have shown a step-by-step tutorial on how to create a Responsive Checkout Form. If you only want the source code, you can use the download button below the article.

Step 1: Basic structure of checkout form

I have created the basic structure of this check-out form and designed the webpage using the following HTML codes. Its max-width of background 500px and height will depend on the amount of content.

<div class=”container”>
  <div class=”title”>Checkout Form</div>
   <div class=”input-form”>
   </div>
</div>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: ‘Open Sans’, sans-serif;
}
body{
background: rgb(12, 18, 27);
background-size: cover;
width: 100%;
height: 100vh;
font-size: 16px;
}
.container{
max-width: 500px;
height: auto;
margin: 60px auto;
background: #fff;
padding: 20px 40px 30px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top: 5px solid #5f6c7d;
}
Basic structure of checkout form

Step 2: Design the title in the form (more…)

Continue ReadingResponsive Checkout Form using HTML CSS (Free Code)