How to create a responsive Modal Sign-Up form for a Website ? Last Updated : 30 Jul, 2024 Comments Improve Suggest changes Like Article Like Report The Sign-Up form for a website is required to be responsive as it helps to easily render the form on different display sizes which make the website compatible with different screen widths. Follow the steps to create a responsive sign up form using CSS.Step 1: Adding HTML Use a "form" element to process the input.Then add inputs (with a matching label) for each fieldStep 2: Adding CSSAdd the required CSS to design the login page try to keep the design as simple as possible.Example: In this example, we will implement the above approach html <!DOCTYPE html> <html> <style> /*add full-width input fields*/ input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 2px solid #ccc; box-sizing: border-box; } /* set a style for all buttons*/ button { background-color: Green; color: white; padding: 15px 20px; margin: 8px 0; cursor: pointer; width: 100%; } /*set styles for the cancel button*/ .cancelbtn { padding: 15px 20px; background-color: #FF2E00; } /*float cancel and signup buttons and add an equal width*/ .cancelbtn, .signupbtn { float: left; width: 50%; } /*add padding to container elements*/ .container { padding: 16px; } /*clear floats*/ .clearfix::after { content: ""; clear: both; display: table; } /*styles for cancel button and signup button on extra small screens*/ @media screen and (max-width: 600px) { .cancelbtn, .signupbtn { width: 100%; } } </style> <body> <h2>Signup Form</h2> <!--Step 1:Adding HTML--> <form action="/action_page.php" style="border:1px solid #ccc"> <div class="container"> <label><b>Email</b></label> <input type="text" placeholder="Enter Email" name="email" required> <label><b>Password</b></label> <input type="password" placeholder="Enter Password" name="psw" required> <label><b>Repeat Password</b></label> <input type="password" placeholder="Repeat Password" name="psw-repeat" required> <input type="checkbox" checked="checked"> Remember me <p>To create an account you have to agree our <a href="#">Terms & Privacy</a>. </p> <div class="clearfix"> <button type="button" class="cancelbtn">Cancel</button> <button type="submit" class="signupbtn">Sign Up</button> </div> </div> </form> </body> </html> Output: Follow the steps to create a responsive Modal Sign Up pageStep 1: Adding HTML. Use a "form" element to process the input. Then add inputs (with a matching label) for each field.Step 2:Adding CSS. Using the same CSS as the above example with certain Modal modifications:Example: html <!DOCTYPE html> <html> <style> /*add full-width input fields*/ input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 2px solid #ccc; box-sizing: border-box; } /* set a style for all buttons*/ button { background-color: green; color: white; padding: 14px 20px; margin: 8px 0; cursor: pointer; width: 100%; } /*set styles for the cancel button*/ .cancelbtn { padding: 14px 20px; background-color: #FF2E00; } /*float cancel and signup buttons and add an equal width*/ .cancelbtn, .signupbtn { float: left; width: 50% } /*add padding to container elements*/ .container { padding: 16px; } /*define the modal’s background*/ .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.4); padding-top: 60px; } /*define the modal-content background*/ .modal-content { background-color: #fefefe; margin: 5% auto 15% auto; border: 1px solid #888; width: 80%; } /*define the close button*/ .close { position: absolute; right: 35px; top: 15px; color: #000; font-size: 40px; font-weight: bold; } /*define the close hover and focus effects*/ .close:hover, .close:focus { color: red; cursor: pointer; } .clearfix::after { content: ""; clear: both; display: table; } @media screen and (max-width: 600px) { .cancelbtn, .signupbtn { width: 100%; } } </style> <body> <h2>Modal Signup Form</h2> <!--Step 1:Adding HTML--> <button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Sign Up</button> <div id="id01" class="modal"> <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span> <form class="modal-content animate" action="/action_page.php"> <div class="container"> <label><b>Email</b></label> <input type="text" placeholder="Enter Email" name="email" required> <label><b>Password</b></label> <input type="password" placeholder="Enter Password" name="psw" required> <label><b>Repeat Password</b></label> <input type="password" placeholder="Repeat Password" name="psw-repeat" required> <input type="checkbox"> Remember me <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p> <div class="clearfix"> <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button> <button type="submit" class="signupbtn">Sign Up</button> </div> </div> </form> </div> <!--close the modal by just clicking outside of the modal--> <script> var modal = document.getElementById('id01'); window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> </body> </html> Output: Comment More infoAdvertise with us Next Article HTML Responsive full page image using CSS S Shubrodeep Banerjee Follow Improve Article Tags : Misc Technical Scripter JavaScript Web Technologies HTML javascript-form JavaScript-Questions +3 More Practice Tags : Misc Similar Reads Most Commonly Used Tags in HTML HTML tags are the fundamental building blocks of web development, providing the structure and organization necessary for creating web pages.They include tags for headings, paragraphs, links, images, and more.Commonly used tags like <html>, <head>, and <body> are essential for creat 4 min read Difference Between HTML and ASP HTML and ASP are two very common aspects in the web programming world. HTML stands for HyperText Markup Language used to develop web pages and specifically web design. Primarily written using HTML elements, they consist of tags, an opening, and a closing tag. The data between these tags is usually t 2 min read How to create a responsive Modal Sign-Up form for a Website ? The Sign-Up form for a website is required to be responsive as it helps to easily render the form on different display sizes which make the website compatible with different screen widths. Follow the steps to create a responsive sign up form using CSS.Step 1: Adding HTML Use a "form" element to proc 4 min read HTML Responsive full page image using CSS Responsive Web design (RWD), is a design strategy developed to cope with the amazing popularity of mobile devices for viewing the Web. Responsive images are an important component of responsive Web design (RWD), Responsive web design is a new approach to website design that ensures users have a good 2 min read Creating A Range Slider in HTML using JavaScript Range Sliders are used on web pages to allow the user specify a numeric value which must be no less than a given value, and no more than another given value. That is, it allows one to choose the value from a range which is represented as a slider. A Range slider is typically represented using a slid 3 min read getAttribute() - Passing data from Server to JSP Suppose some data at the Server side has been created and now in order to pass that information in a JSP page, there is a need of request.getAttribute() method. This, in fact differentiates the getAttribute() and getParameter() methods. The latter is used to pass Client side data to a JSP. Implement 3 min read How to align Placeholder Text in HTML ? The placeholder attribute specifies a short hint that describes the expected value of an input field/text area. The short hint is displayed in the field before the user enters a value. In most of the browsers, placeholder texts are usually aligned on the left. The selector uses the text-align proper 2 min read Convert an Image into Grayscale Image using HTML/CSS A grayscale image is an image that displays only shades of gray, without any color, representing varying levels of light intensity. You can easily convert an image to grayscale in HTML/CSS by applying the filter: grayscale(100%) property to desaturate the colors.The grayscale() filter in CSS can tak 2 min read Hide elements in HTML using display property Hiding elements in HTML is a common technique used to control the visibility of content on a webpage. This approach allows developers to dynamically show or conceal elements based on user interactions, the display property involves setting display: none in CSS. This completely removes the element fr 2 min read JavaScript Form Validation JavaScript form validation checks user input before submitting the form to ensure it's correct. It helps catch errors and improves the user experience.What we are going to CreateIn this article, we will guide you through creating a form validation application. This application will validate essentia 10 min read Like