I am building a multi-stage form in vanilla HTML/CSS/JS and bootstrap.
I would like assistance amending my codepen so that:
- On the first step/tab, the previous button is not displayed. Currently, it appears if you press the previous button and return to the first page.
- On the final step/tab, a submit button is dynamically added and replaces the next button (which is redundant on this final step).
- Make the placeholder styling in the textarea go to the top of the box (not center as it is now).
The styling is wrong on the codepen as it hasn’t come through properly, but it is functional nonetheless so it doesn’t matter for the purposes of these questions.
Codepen is here:
https://codepen.io/trusaiyan/pen/eYLOaja
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PAGE</title>
<!-- font awesome cdn link -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<!-- BOOTSTRAP cdn link -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>
<!-- custom css file link -->
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<!-- header section starts -->
<header class="header">
<nav id="navbar" class="nav">
<img src="images/logo2.png" alt="" />
</nav>
</header>
<!-- END NAV -->
<main>
<!-- START CARD -->
<div class="card-container">
<div class="card-header pa-5">
<h1>DEMO SURVEY</h1>
</div>
<div class="card-progress">
<div class="progress">
<div
class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar"
aria-valuenow="1"
aria-valuemin="0"
aria-valuemax="7"
style="width: 0%"
id="progress"
></div>
</div>
<p class="progress-text">
Step <span id="tabNo">1</span> of <span>7</span>
</p>
</div>
<div class="card-content pa-5">
<h2 id="title">YOUR DETAILS</h2>
<p id="description">Please enter your details</p>
<form action="">
<div class="page active-page" id="page1">
<div class="form-inputs-text">
<div class="columns">
<label for="firstName">First Name</label> <br />
<input
type="text"
id="firstName"
name="firstName"
placeholder="Enter first name"
/>
</div>
<div class="columns">
<label for="lastName">Last Name</label> <br />
<input
type="text"
id="lastName"
name="lastName"
placeholder="Enter last name"
/>
</div>
</div>
<div class="form-inputs-text">
<div class="columns">
<label for="emailAddress">Email</label> <br />
<input
type="email"
id="emailAddress"
name="emailAddress"
placeholder="Enter email address"
/>
</div>
<div class="columns">
<label for="position">Position</label> <br />
<input
type="text"
id="position"
name="position"
placeholder="Enter position"
/>
</div>
</div>
<div class="form-inputs-text">
<div class="columns">
<label for="Title">Title</label> <br />
<input
type="text"
id="title"
name="title"
placeholder="Enter title"
/>
</div>
<div class="columns">
<label for="phoneNumber">Phone Number</label> <br />
<input
type="tel"
id="phoneNumber"
name="phoneNumber"
placeholder="Enter phone number"
/>
</div>
</div>
<div class="form-inputs-text">
<div class="columns">
<label for="country">Country</label> <br />
<select name="country" id="country">
<option value="Albania">Albania</option>
<option value="Andorra">Andorra</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Belgium">Belgium</option>
<option value="Bosnia and Herzegovina">
Bosnia & Herzegovina
</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Canada">Canada</option>
<option value="Croatia">Croatia</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Estonia">Estonia</option>
<option value="Faroe Islands">Faroe Islands</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Greece">Greece</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="Ireland">Ireland</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Latvia">Latvia</option>
form-group
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macedonia, The Former Yugoslav Republic of">
North Macedonia
</option>
<option value="Malta">Malta</option>
<option value="Moldova, Republic of">Moldova</option>
<option value="Montenegro">Montenegro</option>
<option value="Netherlands">Netherlands</option>
<option value="Norway">Norway</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Romania">Romania</option>
<option value="Serbia">Serbia</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Spain">Spain</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Turkey">Turkey</option>
<option value="Ukraine">Ukraine</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
</div>
<div class="columns">
<label for="company">Company</label> <br />
<input
type="tel"
id="company"
name="company"
placeholder="Enter company name"
/>
</div>
</div>
<div class="form-inputs-text">
<div class="columns">
<label for="Title">Company Website</label> <br />
<input
type="text"
id="website"
name="title"
placeholder="Enter website URL"
/>
</div>
</div>
</div>
<div class="page" id="page2">
<div class="input-labels-radio">
<label for="rating">Very poor</label>
<label for="rating">Poor</label>
<label for="rating">OK</label>
<label for="rating">Good</label>
<label for="rating">Very good</label>
</div>
<div class="form-inputs-radio">
<input type="radio" id="rating1" name="rating" />
<input type="radio" id="rating2" name="rating" />
<input type="radio" id="rating3" name="rating" />
<input type="radio" id="rating4" name="rating" />
<input type="radio" id="rating5" name="rating" />
</div>
</div>
<div class="page" id="page3">
<div class="input-labels-radio">
<label for="rating">Very unclear</label>
<label for="rating">Unclear</label>
<label for="rating">Acceptable</label>
<label for="rating">Clear</label>
<label for="rating">Very clear</label>
</div>
<div class="form-inputs-radio">
<input type="radio" id="rating1" name="rating" />
<input type="radio" id="rating2" name="rating" />
<input type="radio" id="rating3" name="rating" />
<input type="radio" id="rating4" name="rating" />
<input type="radio" id="rating5" name="rating" />
</div>
</div>
<div class="page" id="page4">
<div class="input-labels-radio">
<label for="rating">Very easy</label>
<label for="rating">Easy</label>
<label for="rating">OK</label>
<label for="rating">Difficult</label>
<label for="rating">Very difficult</label>
</div>
<div class="form-inputs-radio">
<input type="radio" id="rating1" name="rating" />
<input type="radio" id="rating2" name="rating" />
<input type="radio" id="rating3" name="rating" />
<input type="radio" id="rating4" name="rating" />
<input type="radio" id="rating5" name="rating" />
</div>
</div>
<div class="page" id="page5">
<div class="form-inputs-text">
<!-- <label for="Title">Input</label> <br /> -->
<input
type="text"
id="message"
name="message"
placeholder="Enter your text here"
/>
</div>
</div>
<div class="page" id="page6">
<div class="input-labels-radio">
<label for="rating">Very poor</label>
<label for="rating">Quite poor</label>
<label for="rating">Acceptable</label>
<label for="rating">Good</label>
<label for="rating">Extremely good</label>
</div>
<div class="form-inputs-radio">
<input type="radio" id="rating1" name="rating" />
<input type="radio" id="rating2" name="rating" />
<input type="radio" id="rating3" name="rating" />
<input type="radio" id="rating4" name="rating" />
<input type="radio" id="rating5" name="rating" />
</div>
</div>
<div class="page" id="page7">
<div class="input-labels-radio">
<label for="rating">Very poor</label>
<label for="rating">Quite poor</label>
<label for="rating">Acceptable</label>
<label for="rating">Good</label>
<label for="rating">Extremely good</label>
</div>
<div class="form-inputs-radio">
<input type="radio" id="rating1" name="rating" />
<input type="radio" id="rating2" name="rating" />
<input type="radio" id="rating3" name="rating" />
<input type="radio" id="rating4" name="rating" />
<input type="radio" id="rating5" name="rating" />
</div>
</div>
</form>
</div>
<div class="card-actions pa-5">
<!-- <p>You have spent 2 mins doing this form</p> -->
<div>
<button onclick="prevTab()" class="btn btn-primary" id="prevBtn">
Previous
</button>
<button onclick="nextTab()" class="btn btn-primary" id="nextBtn">
Next
</button>
</div>
</div>
</div>
</main>
<!-- footer section ends -->
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<!-- custom js file link -->
<script src="js/script.js"></script>
</body>
</html>
const info = [
{
title: "YOUR DETAILS",
description: "Please enter your details",
},
{
title: "SYSTEM CHECK",
description: "How was the overall System Check experience?",
},
{
title: "SYSTEM CHECK",
description: "How clear were the System Check instructions?",
},
{
title: "SYSTEM CHECK",
description: "How easy to complete were the System Check steps?",
},
{
title: "SYSTEM CHECK",
description:
"Did you have any issues during the System Check? If yes, please state below:",
},
{
title: "SYSTEM CHECK",
description: "How effective do you think the environment checks were?",
},
{
title: "SYSTEM CHECK",
description: "How user-friendly was the System Check user interface?",
},
];
let index = 0;
let currentTab = 1;
const prevBtn = document.querySelector("#prevBtn");
const nextBtn = document.querySelector("#nextBtn");
document.querySelector("#prevBtn").style.display = "none";
//nextTab function for clicking the button (with onclick on button)
function nextTab() {
if (currentTab == 1) {
//select the h2 and p tags innerhtml and set it to the info arrays currentab's h2 or p tag
document.querySelector("#title").innerHTML = info[currentTab].title;
document.querySelector("#description").innerHTML =
info[currentTab].description;
//select the first 2 pages set the active-page class
document.querySelector("#page1").classList.remove("active-page");
document.querySelector("#page2").classList.add("active-page");
document.querySelector("#prevBtn").style.display = "inline-block";
//increase the tab number each time after doing this codeblock
currentTab++;
//set the tab number span display to the currenttab number
document.querySelector("#tabNo").innerHTML = currentTab;
let progress = document.querySelector("#progress");
progress.setAttribute("aria-valuenow", currentTab);
progress.setAttribute("style", `width: ${14.3}%`);
} else {
document.querySelector("#title").innerHTML = info[currentTab].title;
document.querySelector("#description").innerHTML =
info[currentTab].description;
document
.querySelector(`#page${currentTab}`)
.classList.remove("active-page");
document
.querySelector(`#page${currentTab + 1}`)
.classList.add("active-page");
currentTab++;
document.querySelector("#tabNo").innerHTML = currentTab;
let progress = document.querySelector("#progress");
progress.setAttribute("aria-valuenow", currentTab);
progress.setAttribute("style", `width: ${currentTab * 14.3}%`);
}
}
function prevTab() {
if (currentTab != 1) {
document.querySelector("#title").innerHTML = info[currentTab].title;
document.querySelector("#description").innerHTML =
info[currentTab].description;
document
.querySelector(`#page${currentTab}`)
.classList.remove("active-page");
document
.querySelector(`#page${currentTab - 1}`)
.classList.add("active-page");
currentTab--;
document.querySelector("#tabNo").innerHTML = currentTab;
let progress = document.querySelector("#progress");
progress.setAttribute("aria-valuenow", currentTab);
progress.setAttribute("style", `width: ${currentTab * 14.3}%`);
}
}
/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Roboto:ital,wght@0,100;0,300;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
/*=============== VARIABLES CSS ===============*/
:root {
/*========== COLOURS ==========*/
/*Color mode HSL(hue, saturation, lightness)*/
--white: #fff;
--trans: all 0.3s ease-in-out;
/*========== FONT + TYPOGRAPHY ==========*/
/*.5rem = 8px | 1rem = 16px ...*/
--body-font: "Poppins", sans-serif;
--big-font-size: 2rem;
--h1-font-size: 1.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1rem;
--normal-font-size: 0.938rem;
--small-font-size: 0.813rem;
--smaller-font-size: 0.75rem;
--slightly-large: 1.475rem;
/*========== FONT WEIGHT ==========*/
--font-medium: 500;
--font-semi-bold: 600;
/*========== MARGINES BOTTOM ==========*/
/*.5rem = 8px | 1rem = 16px ...*/
--mb-0-5: 0.5rem;
--mb-0-75: 0.75rem;
--mb-1: 1rem;
--mb-1-5: 1.5rem;
--mb-2: 2rem;
--mb-2-5: 2.5rem;
/*========== Z INDEX ==========*/
--z-tooltip: 10;
--z-fixed: 100;
}
/* RESPONSIVE TYPOGRAPHY */
@media screen and (min-width: 968px) {
:root {
--big-font-size: 3.5rem;
--h1-font-size: 2.25rem;
--h2-font-size: 1.5rem;
--h3-font-size: 1.25rem;
--normal-font-size: 1rem;
--small-font-size: 0.875rem;
--smaller-font-size: 0.813rem;
}
}
/*=============== BASE ===============*/
/* Custom properties/variables */
:root {
--main-white: #fff;
--main-blue: lightblue;
--main-red: #7d4561;
--main-gray: #000000;
}
/* Base reset */
* {
margin: 0;
padding: 0;
}
/* box-sizing and font sizing */
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 62.5%;
scroll-behavior: smooth;
}
/* 1200px / 16px = 75em */
@media (max-width: 75em) {
html {
font-size: 60%;
}
}
/* 980px / 16px = 61.25em */
@media (max-width: 61.25em) {
html {
font-size: 58%;
}
}
/* 460px / 16px = 28.75em */
@media (max-width: 28.75em) {
html {
font-size: 55%;
}
}
/*=============== BASE ===============*/
body {
font-family: "Poppins", sans-serif;
font-size: 1.8rem; /* 18px */
font-weight: 400;
line-height: 1.4;
color: var(--main-black);
}
/*=============== NAV ===============*/
.nav {
display: flex;
width: 100%;
/*background: var(--main-blue);*/
/*box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);*/
}
.nav img {
width: 250px;
padding: 5px;
margin-left: 20px;
}
@media (max-width: 28.75em) {
}
/*=============== CARD SECTION ===============*/
main {
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
}
.card-container {
/*box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;*/
/*box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;*/
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
rgba(0, 0, 0, 0.07) 0px 16px 16px;
margin: 0 auto;
width: 600px;
border-radius: 2rem;
overflow-x: hidden;
}
.card-header {
background: rgb(131, 58, 180);
background: linear-gradient(
90deg,
rgba(131, 58, 180, 1) 0%,
rgba(234, 91, 12, 1) 50%,
rgba(252, 176, 69, 1) 100%
);
padding: 50px;
color: white;
}
.card-content h2,
.card-content p {
padding-bottom: 15px;
}
.card-content h2 {
font-weight: bold;
}
.progress {
border-radius: 0px;
}
.progress-text {
padding-left: 25px;
padding-top: 10px;
}
.pa-5 {
padding: 25px;
}
form {
margin-right: ;
}
.card-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.card-actions p {
font-size: var(--h3-font-size);
margin-right: 10px;
}
.card-actions button {
width: 12rem;
height: 3rem;
margin: 0.5rem;
font-size: var(--h2-font-size);
letter-spacing: 1px;
border-radius: 3rem;
}
.card-actions button:hover {
transform: scale(1.04);
transition: 0.2s ease-out;
}
/*=============== CARD TABS ===============*/
.page {
display: none;
}
.active-page {
display: block !important;
}
.columns {
margin: 5px 0px;
}
.input-labels-radio {
display: flex;
justify-content: space-around;
padding-bottom: 10px;
font-size: var(--slightly-large);
}
.form-inputs-radio {
display: flex;
justify-content: space-around;
}
.form-inputs-text {
display: flex;
justify-content: space-between;
}
input[type="text"] {
border: 1px solid rgb(126, 125, 125);
margin-bottom: 1rem;
margin-top: 0.5rem;
padding: 2px;
border-radius: 3rem;
background-color: #e9ecef;
}
input[type="radio"] {
transform: scale(1.75);
cursor: pointer;
}
input[type="tel"] {
margin-bottom: 1rem;
margin-top: 0.5rem;
padding: 2px;
border-radius: 3rem;
background-color: #e9ecef;
}
input[type="email"] {
border: 1px solid rgb(126, 125, 125);
margin-bottom: 1rem;
margin-top: 0.5rem;
padding: 2px;
border-radius: 3rem;
background-color: #e9ecef;
}
input[type="email"]:focus {
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
input {
padding-left: 10px !important;
}
input[type="radio"]:hover {
transform: scale(2);
transition: 0.2s ease-out;
}
select[name="country"] {
border-radius: 3rem;
border: 1px solid rgb(126, 125, 125);
margin-bottom: 1rem;
margin-top: 0.5rem;
padding: 2px;
background-color: #e9ecef;
}
label {
font-weight: 600;
}
#message{
width: 100%;
height: 200px;
max-height: 350px;
overflow-x: hidden;
overflow-y: auto;
}
Thanks
I’ve tried various methods but unsure on the correct way to do this, so any help appreciated.