How to Create a Popup Form in Html, CSS And JavaScript: 4 Easy Steps

In this article, we will learn how to create a popup form in HTML, CSS and JavaScript.

We will start this by creating an HTML file or if you’re using an online code editor, simply use a button tag to get started.

Prerequisites

• Basic knowledge of HTML, CSS and JavaScript.
• Access to a code editor (online or offline)

How to Create a Popup Form in Html, CSS And JavaScript: Step-by-Step

Step 1: Create a Button for Opening the Form

<!-- A button to open the popup form -->
<button class="open-button" onclick="openForm()">Open Form</button>

class="open-button": We’ve created a CSS class to apply the styles on our button.

onclick="openForm()": The onclick event will occur when a user will click on the button element. This allows a programmer or code to execute a JavaScript function when an element gets clicked. This event can be used for validating a form, warning messages and many more. In our case, we’ll be using this event to open our popup form.

Step 2: Create an HTML Form

It is important that we use a <form> element to create and structure our HTML form.

The <form> element is an important part of HTML. It allows users to interact with a web page by submitting data to a server. This data can be used to do things like log in to a website, sign up for a newsletter, or make a purchase.

The <form> element has a number of attributes that control how it works. These attributes include:

• method: The method attribute specifies how the data in the form will be submitted to the server. The most common methods are "GET" and "POST".
• action: The action attribute in HTML specifies the URL that the data in the form will be submitted to when the user clicks on the submit button. The action attribute can be a relative or absolute URL.
• name: The name attribute specifies the name of the form. This name is used by the server to identify the form when it receives the data.
• id: The id attribute specifies the ID of the form. This ID can be used to style the form or to interact with it using JavaScript.

The <form> element can contain a variety of input elements, such as text fields, radio buttons, and checkboxes. These elements allow users to enter data into the form.

When a user submits a form, the data in the form is sent to the server. The server then processes the data and performs the desired action.

In a much simpler way, it is an extremely powerful tool that can be used to create interactive web pages. By understanding how the <form> element works, you can create forms that are easy to use and that collect the data you need.

Here are some additional benefits of using the <form> element:

• Forms can be used to collect data from users. This data can be used to improve the user experience, personalize content, or for marketing purposes.
• Forms can be used to create interactive web pages. This can make websites more engaging and user-friendly.
• Forms can be used to collect feedback from users. This feedback can be used to improve the website or product.

The HTML form we created, utilizes various HTML elements such as <form>, <h1>, <label>, <input> and <button>.

Furthermore, these elements also contain attributes and their values such as action="#", for="email", type="text", name="email", type="submit" and type="button" etc.

Note: The action attribute contains "#" as its value. If you want your form to interact with the server and the database to collect or send data, you need to replace the action attribute value with some .php file that contains action codes.

<!-- The form -->
<div class="form-popup" id="popUpForm">
  <form action="#" class="form-container">
    <h1>Login</h1>

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit" class="btn">Login</button>
    <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
  </form>
</div>

Step 3: Add CSS

Now, we need to give some style to our form for a better look and feel. To do that we need to write CSS for each HTML element and container.

*{box-sizing: border-box;}

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background-color: royalBlue;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

Step 4: Add JavaScript

Now, to control the display of the HTML form elements, we will use the style.display JavaScript property.

The style.display property in JavaScript is used to control the display of an element. The property can be set to one of the following values:

• block: The element will be displayed as a block-level element.
• inline: The element will be displayed as an inline element.
• none: The element will not be displayed.

The style.display property can be used to hide or show elements on a web page. In our example, the following code will hide the element with the ID "popUpForm":

function openForm() {
  document.getElementById("popUpForm").style.display = "block";
}

function closeForm() {
  document.getElementById("popUpForm").style.display = "none";
}

You may also like:

• How to Create CSS Button with Icon: 3 Easy Steps
• How to Create a 3D Button in HTML & CSS?

See the Popup Form in Action

See the Pen Popup Form in Html, CSS and JavaScript by Rajesh Rai (@WebsiteVidya) on CodePen.

Additional Tips

Here are some additional tips for creating popup forms:

• Use a consistent design for all of your popup forms. This will help to create a more professional and polished look for your website.
• Use clear and concise labels for all of your input elements. This will help users to understand what information they are requesting.
• Validate the data that users enter into your forms. This will help to prevent errors and ensure that you receive the data that you need.
• Use a popup form only when it is necessary. Popup forms can be disruptive and annoying, so use them sparingly.

You can learn more about HTML forms on MDN Web Docs.

Resources

Learn HTML, CSS and JavaScript:

• 50 Projects In 50 Days – HTML, CSS & JavaScript
• Build Responsive Real-World Websites with HTML and CSS
• 60 HTML CSS JS projects – HTML5, CSS3 and vanilla JavaScript

Conclusion

In conclusion, creating a popup form in HTML, CSS, and JavaScript is a relatively simple process. By following the steps outlined in this article, you can create a popup form that is both functional and visually appealing.

We hope you would find this tutorial “How to create a popup form in Html, CSS and JavaScript” useful.