Online LearningTutorialsWeb Designing

Learn to create a sign up form in 5 minutes

Let’s build s simple sign up form under 5 minutes!

Create folder and inside this folder create 2 files ‘index.html’ and ‘style.css’

Download any of your desired image and place it inside the folder you just created.

Now Open the ‘index.html’ file and place the following html code inside the file.

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Sign up  Form | Prolonged Worker</title>
</head>

<body>
 
    <!-- Form Code Here -->
    
</body>

</html>

Now we will add the div and some markup inside the body

 <div class="container">
        <div class="row">
            <div class="col-md-4 col-10 mx-auto form-box">
                <div class="text-center">
                    <h1>Signup</h1>
                </div>
                
                <!--Form starts-->
                
                <!--Form Ends-->
                
            </div>
        </div>
    </div>

Now we will add the form element just after the comment <!–Form starts–> in “index.html’

<form action="" class="">
                    <div class="form-group">
                        <label for="uname">Email:</label>
                        <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
                    </div>
                    <div class="form-group">
                        <label for="pwd">Password:</label>
                        <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
                    </div>
                    <div class="form-group">
                        <label for="pwd">Confirm Password:</label>
                        <input type="password" class="form-control" id="confirm-pwd" placeholder="Confirm password" name="confirm-pswd" required>
                    </div>
                    <div class="form-group form-check">
                        <label class="form-check-label">
                            <input class="form-check-input" type="checkbox" name="remember" required> Remember Me
                        </label>
                    </div>
                    <div class="text-center">
                        <button type="submit" class="btn btn-custom">Login</button>
                    </div>
                </form>

Congrats! You have completed the html part of the code.

Now it’s time to add some style to the page. Open “style.css” file and we will write the css code.

First of all we will set the background of the body and set the screen height to 100%;

body{
    background: url('bg.jpg');
    background-repeat:no-repeat;
    background-size: cover;
    height:100vh;
    padding-top: 20vh;
}

Now let’s add the white background for form area.

.form-box{
    background-color: rgba(255,255,255,0.7);
    padding:30px 20px;
    color:#000;
    border-radius: 10px;
}

Button on the form should also be unique. Let’s style it:

.btn-custom,
.btn-custom:hover
{
    background-color: chocolate;
    color:#fff;
    width:50%;
    border-radius: 20px;
}

As, we are desinging the responsive form which should look better too on small devices like mobile screens.

Let’s add the css style for small screen:

@media only screen and (max-width: 600px) {
    body{
        padding-top:100px;
    }
}

Congratulations! You have designed your own signup form!

I will be sharing more tutorials for web design! Stay in touch!

Tags

Awais Ahmad

I am a Digital evangelist and have been working with different web technologies and Digital Marketing scenarios.

Related Articles

Leave a Reply

Back to top button
Close
Close

Adblock Detected

Please whitelist our site from the adblocker to read the content.