The Power of CSS in Styling-up Forms
Tags: webdev, html, css, javascript
Published: 2024-05-25 18:06:59

This is the second part of our mini project on creating an Online Flipping Form. Here is the link for Part 1,  (https://dev.to/george_kingi/how-to-create-an-online-flipping-form-using-plain-html-and-css-4ka5.) 

In part 1, we focused on the  HTML and created the structure of the Front and Back sides of the online form. In this section, we will dive deep into CSS, introduce unique styling on our forms, and give some highlights on Javascript. 


## Harnessing the Power of CSS in Styling-up Forms

Remember, we created a CSS file and linked it with the HTML file, Let's journey together in making the form flip; We affect changes on all elements on the webpage, and we select the elements using the Universal Selector (`*`) as below.

We then style up the container as below: as we style the container, notice that the output affects the contents and background of our webpage.

```
*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}


.container{
    height: 100vh;
    background: #f53207;
    color: #340707;
    display: flex;
    align-items: center;
    justify-content: center;
}

```



Output:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r71jbcag4k73sxsely4t.PNG)

We additionally select the card for further styling. Remember to include the. (dot)

```
*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}


.container{
    height: 100vh;
    background: #f53207;
    color: #340707;
    display: flex;
    align-items: center;
    justify-content: center;
}


.card{
    width: 350px;
    height: 550px;
    box-shadow: 0 0 20px 20px #16010142;
    border-radius: 50px;
}

```

Output:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/04h3kmadobrf81c9sw9f.PNG)

As we wind up styling our form, we apply some styling on the inner-card, card-front, card-back, and so on as below.

```
.card{
    width: 350px;
    height: 550px;
    box-shadow: 0 0 20px 20px #16010142;
    border-radius: 50px;
}


.inner-card{
    height: 100%;
    transform: rotateY(180deg);
    transform-style: preserve-3d;
}


.card-front, .card-back{
    position: absolute;
    height: 100%;
    padding: 50px;
    background-color: #931c02;
    box-sizing: border-box;
    backface-visibility:hidden;
    border-radius: 50px;
}


.card-back{
    transform: rotateY(180deg);
   
}


.card h2{
    font-weight: normal;
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
}


.input-button{
    width: 100%;
    background: transparent;
    border: 1px solid #5e0b0b;
    margin: 6px 0;
    height: 32px;
    border-radius: 20px;
    padding: 5px;
    box-sizing: border-box;
    text-align: center;
}


::placeholder{
    color: #fff;
    font-size: 12px;
}


button{
    width: 100%;
    background: transparent;
    border: 1px solid #fff;
    margin: 25px 0 10px;
    height: 32px;
    font-size: 20px;
    border-radius: 20px;
    padding: 2px;
    box-sizing: border-box;
    outline: none;
    color: white;
    cursor: pointer;
}


.submit-btn{
    position: relative;
}


.submit-btn::after{
    content: '\27a4';
    color: #333;
    line-height: 32px;
    font-size: 12px;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    right: -1px;
    top: -1px;


}


span{
    font-size: 20px;
    margin-left: 10px;
}


.card .btn{
    margin-top: 10px;
}


.card a{
    color: #fff;
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 13px;
    margin-top: 8px;


}

```
To learn more about CSS selectors, properties, colors, and more visit   https://www.w3schools.com/css/default.asp

The Output:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7v8h72d1fn8mfook09b.PNG)

We need to introduce some Javascript in our form to provide some interactivity, as such, locate the last div and input the script below, 

Here are the final HTML and CSS codes that will indeed make our form flip on click as below

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Flipping Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="inner-card" id="card">
                <div class="card-front">
                    <h2>LOGIN</h2>
               
                <form>
                    <input type="email" class="input-box" placeholder="Email" required>


                    <input type="number" class="input-box" placeholder="Phone Number" required>


                    <input type="password" class="input-box" placeholder="password" required>


                    <button type="submit" class="submit-btn">Submit</button>


                    <input type="checkbox"><span>Remember me</span>


                    <button type="button" class="button" onclick="openLOGIN()">I am New Here</button>


                    <a href="">Forgot password</a>
                </div>


                </form>


                <div class="card-back">
                    <h2>REGISTER</h2>


                    <form>
                        <input type="text" class="input-box" placeholder="Full Name" required>


                        <input type="email" class="input-box" placeholder="email" required>


                        <input type="number" class="input-box" placeholder="Phone Number" required>


                        <input type="password" class="input-box" placeholder="password" required>


                        <input type="date" class="input-box" placeholder="DOB" required>


                        <button type="submit" class="submit-btn">Submit</button>


                    <input type="checkbox"><span>Remember me</span>


                    <button type="button" class="button" ondblclick="openREGISTER()">I have an Account</button>


                    <a href="">Forgot password</a>


                    </form>
           
                </div>
            </div>
        </div>
    </div>
    <script>
        var card =document.getElementById("card");


        function openLOGIN(){
            card.style.transform = "rotateY(-180deg)";
        }


        function openREGISTER(){
            card.style.transform = "rotateY(0deg)";
        }
    </script>
</body>
</html>


```
Our Final CSS File should have the below code.

```

*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}


.container{
    height: 100vh;
    background: #f53207;
    color: #340707;
    display: flex;
    align-items: center;
    justify-content: center;
}


.card{
    width: 350px;
    height: 550px;
    box-shadow: 0 0 20px 20px #16010142;
    border-radius: 50px;
}


.inner-card{
    height: 100%;
    transform: rotateY(180deg);
    transform-style: preserve-3d;
    transition: transform 2s;
}


.card-front, .card-back{
    position: absolute;
    height: 100%;
    padding: 50px;
    background-color: #931c02;
    box-sizing: border-box;
    backface-visibility:hidden;
    border-radius: 50px;
}


.card-back{
    transform: rotateY(180deg);
   
}


.card h2{
    font-weight: normal;
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
}


.input-box{
    width: 100%;
    background: transparent;
    border: 1px solid #5e0b0b;
    margin: 6px 0;
    height: 32px;
    border-radius: 20px;
    padding: 5px;
    box-sizing: border-box;
    text-align: center;
    color: white;
}


::placeholder{
    color: #fff;
    font-size: 12px;
}


button{
    width: 100%;
    background: transparent;
    border: 1px solid #fff;
    margin: 25px 0 10px;
    height: 32px;
    font-size: 20px;
    border-radius: 20px;
    padding: 2px;
    box-sizing: border-box;
    outline: none;
    color: white;
    cursor: pointer;
}


.submit-btn{
    position: relative;
}


.submit-btn::after{
    content: '\27a4';
    color: #333;
    line-height: 32px;
    font-size: 12px;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    right: -1px;
    top: -1px;


}


span{
    font-size: 20px;
    margin-left: 10px;
}


.card .btn{
    margin-top: 10px;
}


.card a{
    color: #fff;
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 13px;
    margin-top: 8px;


}

```




The output will be as below: 

(Never mind the quality 🤭😀)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3maa2fszsv1i2ds7lfi5.gif)