Sign In & Sign Up Forms

  1. Home
  2. Sign In & Sign Up Forms
  3. How To Use

How To Use

Sign In Form –

To ensure form styling is the same as the design, copy the following code. This will provide consistency across all form designs, creating a seamless form-filling experience for users.

 
        
<section class="ib_sign_in">
<div class="container">
<div class="row align-items-center justify-content-center ib_frms">
<div class="col-md-8 frm_sec_sign_in">
<form action="" class="ib_main_form">
<h2>Sign In</h2>
<input required type="email" placeholder="Enter your email " class="ib_mail" id="email">
<input required type="password" placeholder=" Enter Password " class="ib_password"
id="password">
<button class="mt-2 ib_signin" type="button" id="signin">signin</button>
<p class="ib_options">Or sign in with:</p>
<div class="ib_social">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-google" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</div>
</form>
</div>
</div>
</section>
        
        

– Background and Text Section

Changing the background color of the section with a class name can be done quickly and easily. All you need to do is, locate the section with the class name, and then add background-color to the CSS code. By doing so, you can customize the background color of the section

 
        
section.ib_sign_in {
background-color: ”your color goes here”;
}
        
        

– Changing the form heading

Copy the code below and paste it into your HTML form where you would like to place your form heading. You will then need to edit the css to adjust the font size, font color and other css attributes.

 
        
<form action="" class="ib_main_form">
<h2>”your form heading goes here”</h2>
</form>
        
        

To customize the form heading, you need to apply CSS to the HTML element.

 
        
.ib_main_form h2 {
color: ”your color goes here”;
font-size: ”your font-size goes here”;
font-weight: ”your font-weight goes here”;
line-height: ”your line-height goes here”;
}
        
        

– Changing the input tags field

The html input tags can be easily customized to fit your unique website design needs. With just a few simple steps, you’ll be able to change the input tags field to match your desired look and feel.

 
        
<input required type="email" placeholder="Enter your email " class="ib_mail" id="email">
<input required type="password" placeholder=" Enter Password " class="ib_password" id="password">
        
        

Using css, it is possible to modify and customize the way input tags appear on a webpage. As a powerful styling language, CSS gives you the ability to change the appearance of elements on your website, including input tags. With CSS you can alter everything from font size and color to line height and margins.

 
        
.ib_name input[type=text] {
padding: 8px 16px;
margin-bottom: 30px;
width: 100%;
border: 0;
border-radius: 5px;
background-color: transparent;
border: 1px solid #ffffff;
color: #ffffff;
}
.ib_name input[type=text]:first-child {
margin-right: 15px;
}
input.ib_mail,
input.ib_password {
width: 100%;
padding: 8px 16px;
margin-bottom: 30px;
border: 0;
border-radius: 5px;
background-color: transparent;
border: 1px solid #ffffff;
color: #ffffff;
}
input::-moz-placeholder {
color: #ffffff;
}
input::placeholder {
color: #ffffff;
}
        
        

– Changing the button

Using html, you can change the text of a button by editing the html code.

 
        
<button class="mt-2 ib_signin" type="button" id="signin">”your button text goes here”</button> 
        
        

Making changes to the button style of your website or application is easier than ever. By using CSS, you can customize the look and feel of your buttons to match the aesthetic of your brand.

 
        
.ib_signin {
background-color: #ffffff;
color: #0A2463;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
width: 100%;
border: 0;
padding: 12px;
cursor: pointer;
transition: all 0.3s ease-in-out;
border-radius: 5px;
}
.ib_signin:hover {
color: #ffffff;
background-color: #06BA63;
}
        
        

– Changing the social icons and their links

To change the html code for your social icons, simply go to fontawesome 4 and copy the icon you need. Paste it over the area mentioning “your icon goes here”. Then, to change the social link, simply put your social link inside the html href=”your social link goes here”. With this html code, you can easily update the icons and links for your website to match your individual needs.

 
        
<div class="ib_social">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#">”your icon goes here”</a>
<a href="#">”your icon goes here”</a>
<a href="#">”your icon goes here”</a>
</div>
        
        

Customizing the style of your social media icons is a cinch with CSS. With just a few lines of code, you can change the color, size, and shape of your icons. CSS is also a great way to add animations and hover effects to your social media icons.

 
        
.ib_social a {
color: #ffffff;
position: relative;
z-index: 1;
transition: all 0.3s ease-in-out;
color: #ffffff;
font-size: 25px;
margin-right: 60px;
}
.ib_social a:last-child {
margin-right: 0;
}
.ib_social a::before {
position: absolute;
top: -3px;
left: -13px;
background: transparent;
width: 45px;
height: 45px;
content: "";
z-index: -1;
border-radius: 50%;
visibility: hidden;
opacity: 1;
transition: all 0.3s ease-in-out;
}
.ib_social a:hover::before {
visibility: visible;
opacity: 1;
background-color: #06BA63;
}
        
        

– Remove transparency from the form background

In CSS, transparency is controlled by the “background” property. To remove transparency from a form background, you will need to set the value of background.

 
        
.ib_main_form {
padding: 50px;
border-radius: 10px;
/* backdrop-filter: blur(50px); */ In case you need a blurry background like reference design.
border: 1px solid #ffffff4a; 
background: ”your form background color goes here”;
}
        
        

– To change the background shapes

To change the background shapes of your website, you can use css. Simply add a css style to your HTML file and replace the .png image with an image of your choice. This css style will then be applied to the background shapes of your website.

 
        
.ib_form_section {
position: relative;
z-index: 1;
}
.ib_form_section::before {
position: absolute;
top: -90px;
left: -25%;
background: ”your form background image url goes here”;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
z-index: -1;
width: 53%;
height: 60%;
content: "";
}
.ib_form_section::after {
position: absolute;
bottom: -80px;
right: -19%;
background: ”your form background image url goes here”;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
z-index: -1;
width: 53%;
height: 60%;
content: "";
}
        
        

Sign Up Form –

To ensure form styling is the same as the design, copy the following code. This will provide consistency across all form designs, creating a seamless form-filling experience for users.

 
        
<section class="ib_sign_in">
<div class="container">
<div class="row align-items-center justify-content-center ib_frms">
<div class="col-md-8 frm_sec_sign_in">
<form action="" class="ib_main_form">
<h2>Sign In</h2>
<input required type="email" placeholder="Enter your email " class="ib_mail" id="email">
<input required type="password" placeholder=" Enter Password " class="ib_password"
id="password">
<button class="mt-2 ib_signin" type="button" id="signin">signin</button>
<p class="ib_options">Or sign in with:</p>
<div class="ib_social">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-google" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</div>
</form>
</div>
</div>
</section>       
        
        

– Changing the background and text

Changing the background color of the section with a class name can be done quickly and easily. All you need to do is, locate the section with the class name, and then add background-color to the CSS code. By doing so, you can customize the background color of the section.

 
        
section.ib_sign_up {
background-color: ”your background color goes here”;
} 
        
        

– Changing the form heading

Copy the code below and paste it into your HTML form where you would like to place your form heading. You will then need to edit the css to adjust the font size, font color and other css attributes.

 
        
<form action="" class="ib_main_form">
<h2>”your form heading goes here”</h2>
</form> 
        
        

Customise the form heading as you like and to do that just follow the below code.

 
        
.ib_main_form h2 {
color: ”your color goes here”;
font-weight: ”your font-weight goes here”;
line-height: ”your line-height goes here”;
} 
        
        

– Changing the input tags field

The html input tags can be easily customized to fit your unique website design needs. With just a few simple steps, you’ll be able to change the input tags field to match your desired look and feel.

 
        
<input type="text" placeholder="First Name" id="fname">
<input type="text" placeholder="Last Name" id="lname">        
<input required type="email" placeholder="Enter your email" class="ib_mail" id="email">
<input required type="password" placeholder=" Enter Password " class="ib_password" id="password">
<input required type="password" placeholder=" Confirm Password " class="ib_confirm_password" id="confirm_password"> 
        
        

Using css, it is possible to modify and customize the way input tags appear on a webpage. As a powerful styling language, CSS gives you the ability to change the appearance of elements on your website, including input tags. With CSS you can alter everything from font size and color to line height and margins.

 
        
.ib_name input[type=text] {
padding: 8px 16px;
margin-bottom: 30px;
width: 100%;
border: 0;
border-radius: 5px;
background-color: transparent;
border: 1px solid #ffffff;
color: #ffffff;
}
.ib_name input[type=text]:first-child {
margin-right: 15px;
}        
input:-internal-autofill-selected {
background-color: transparent !important;
}      
input.ib_mail,
input.ib_password,
input.ib_confirm_password {
width: 100%;
padding: 8px 16px;
margin-bottom: 30px;
border: 0;
border-radius: 5px;
background-color: transparent;
border: 1px solid #ffffff;
color: #ffffff;
}
input::-moz-placeholder {
color: #ffffff;
}
input::placeholder {
color: #ffffff;
} 
        
        

– Changing the button

Using html, you can change the text of a button by editing the html code.

 
        
<button class="mt-2 ib_signup" type="button" id="signup">”your button text goes here”</button>
        
        

Making changes to the button style of your website or application is easier than ever. By using CSS, you can customize the look and feel of your buttons to match the aesthetic of your brand.

 
        
.ib_signup {
background-color: #ffffff;
color: #0A2463;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
width: 100%;
border: 0;
padding: 12px;
cursor: pointer;
transition: all 0.3s ease-in-out;
border-radius: 5px;
}
.ib_signin:hover {
color: #ffffff;
background-color: #06BA63;
}

        
        

– Changing the social icons and their links

To change the html code for your social icons, simply go to fontawesome 4 and copy the icon you need. Paste it over the area mentioning “your icon goes here”. Then, to change the social link, simply put your social link inside the html href=”your social link goes here”. With this html code, you can easily update the icons and links for your website to match your individual needs.

 
        
<div class="ib_social">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#">”your icon goes here”</a>
<a href="#">”your icon goes here”</a>
<a href="#">”your icon goes here”</a>
</div>
        
        

Customizing the style of your social media icons is a cinch with CSS. With just a few lines of code, you can change the color, size, and shape of your icons. CSS is also a great way to add animations and hover effects to your social media icons.

 
        
.ib_social a {
color: #ffffff;
position: relative;
z-index: 1;
transition: all 0.3s ease-in-out;
color: #ffffff;
font-size: 25px;
margin-right: 60px;
}
.ib_social a:last-child {
margin-right: 0;
}
.ib_social a::before {
position: absolute;
top: -3px;
left: -13px;
background: transparent;
width: 45px;
height: 45px;
content: "";
z-index: -1;
border-radius: 50%;
visibility: hidden;
opacity: 1;
transition: all 0.3s ease-in-out;
}
.ib_social a:hover::before {
visibility: visible;
opacity: 1;
background-color: #06BA63;
}
        
        

– Remove transparency from the form background

In CSS, transparency is controlled by the “background” property. To remove transparency from a form background, you will need to set the value of background.

 
        
.ib_main_form {
padding: 50px;
border-radius: 10px;
/* backdrop-filter: blur(50px); */ In case you need a blurry background like reference design.
border: 1px solid #ffffff4a; 
background: ”your form background color goes here”;
} 
        
        
Was this article helpful to you? Yes No

How can we help?