we can add the pop form for those who dint login if they what to buy the product they can create account directly with the popup form or any sceniory we can create a pop using javascript
for this we are going to html, Css and javascript
html
<button class=”open-button” onclick=”openForm()”>Open Form</button>
<div class=”form-popup” id=”myForm”>
<form action=”/action_page.php” 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>
CSS
{box-sizing: border-box;}
.open-button {
background-color: #555;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 28px;
width: 280px;
}
.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
}
.form-container {
max-width: 300px;
padding: 10px;
background-color: white;
}
.form-container input[type=text], .form-container input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
background-color: #ddd;
outline: none;
}
.form-container .btn {
background-color: #04AA6D;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
}
.form-container .cancel {
background-color: red;
}
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}
javascript
function openForm() {
document.getElementById(“myForm”).style.display = “block”;
}
function closeForm() {
document.getElementById(“myForm”).style.display = “none”;
}
we create like this in the website and we can change according to requirement.