The content on this website, including videos and code examples, is for educational purposes only. All demonstrations and designs are fictional and created to illustrate coding techniques. Any resemblance to existing websites or brands is purely coincidental.
The creators and administrators of this website do not claim ownership or affiliation with any existing websites or companies. Users are encouraged to use the information responsibly for learning purposes. Liability for any misuse of the content provided is not accepted.
Below is the html code for this video.
index.html
<!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>Circular Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>This is a circular form.<span>Press Tab to input details and Enter to send.</span></h3>
<div class="circular-form-container closed">
<form onsubmit="return false;">
<ul>
<li>
<label class="sent-label">Submitted!</label>
<input type="text" name="input 1" placeholder="Input 1" tabIndex="1">
</li>
<li>
<input type="text" name="input 2" placeholder="Input 2" tabIndex="2">
</li>
<li>
<input type="text" name="input 3" placeholder="Input 3" tabIndex="3">
</li>
<li>
<input type="text" name="input 4" placeholder="Input 4" tabIndex="4">
</li>
<li>
<input type="text" name="input 5" placeholder="Input 5" tabIndex="5">
</li>
<li>
<input type="text" name="input 6" placeholder="Input 6" tabIndex="6">
</li>
<li>
<input type="text" name="input 7" placeholder="Input 7" tabIndex="7">
</li>
<li>
<input type="text" name="input 8" placeholder="Input 8" tabIndex="8">
</li>
</ul>
<input type="submit">
</form>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>
Below is the css code for this video.
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: relative;
height: 100vh;
width: 100%;
background-color: #93e9be;
background-image: radial-gradient(#93e9be, #2e8b57, #095859);
font-family: serif;
font-size: 18px;
overflow: hidden;
}
h3 {
position: absolute;
top: 2.5%;
transform: translateY(-2.5%);
width: 100%;
font-family: 'Times New Roman', Times, serif;
font-size: 24px;
color: #dddddd;
text-align: center;
text-shadow: 2px 2px 5px #000000bf;
}
h3 span {
display: block;
font-family: 'Courier New', Courier, monospace;
font-size: 16px;
margin-top: 1%;
text-shadow: 1px 1px 2.5px #000000;
}
.circular-form-container {
position: absolute;
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -250px;
height: 500px;
width: 500px;
transform: rotate(-22.5deg);
border-radius: 50%;
transition: transform 0.5s ease-in-out;
transform-origin: 50% 50%;
}
ul>li {
position: absolute;
top: 0;
left: 0;
display: block;
height: 250px;
width: 250px;
list-style-type: none;
border-top-left-radius: 250px;
border-top-right-radius: 0;
transform-origin: 100% 100%;
transition: transform 3s ease-in-out;
pointer-events: none;
}
ul>li:nth-child(1), ul>li:nth-child(2), ul>li:nth-child(3), ul>li:nth-child(4),
ul>li:nth-child(5), ul>li:nth-child(6), ul>li:nth-child(7), ul>li:nth-child(8) {
background-size: 100%;
*zoom: 1;
}
ul>li:nth-child(1) {
background-image: linear-gradient(45deg, #0096bb 178px, transparent 179px);
transform: rotate(0deg);
z-index: 8;
}
ul>li:nth-child(2) {
background-image: linear-gradient(45deg, #009cc3 178px, transparent 179px);
transform: rotate(45deg);
z-index: 7;
}
ul>li:nth-child(3) {
background-image: linear-gradient(45deg, #00a3cc 178px, transparent 179px);
transform: rotate(90deg);
z-index: 6;
}
ul>li:nth-child(4) {
background-image: linear-gradient(45deg, #00a9d4 178px, transparent 179px);
transform: rotate(135deg);
z-index: 5;
}
ul>li:nth-child(5) {
background-image: linear-gradient(45deg, #00b0dc 178px, transparent 179px);
transform: rotate(180deg);
z-index: 4;
}
ul>li:nth-child(6) {
background-image: linear-gradient(45deg, #00b7e4 178px, transparent 179px);
transform: rotate(225deg);
z-index: 3;
}
ul>li:nth-child(7) {
background-image: linear-gradient(45deg, #00bdec 178px, transparent 179px);
transform: rotate(270deg);
z-index: 2;
}
ul>li:nth-child(8) {
background-image: linear-gradient(45deg, #00c4f4 178px, transparent 179px);
transform: rotate(315deg);
z-index: 1;
}
ul>li>input, ul>li>.sent-label {
position: absolute;
top: 75%;
left: 0;
display: block;
width: 250px;
background: none;
color: #ffffff;
font-family: serif;
padding-left: 20px;
text-shadow: 1px 1px 2.5px #00000080;
border: 0;
outline: none;
pointer-events: auto;
transform: rotate(22.5deg);
transform-origin: 50%;
}
ul>li>.sent-label {
display: none;
opacity: 0;
font-size: 24px;
}
.closed li:nth-child(1), .closed li:nth-child(2), .closed li:nth-child(3), .closed li:nth-child(4),
.closed li:nth-child(5), .closed li:nth-child(6), .closed li:nth-child(7), .closed li:nth-child(8),
.sent li:nth-child(1), .sent li:nth-child(2), .sent li:nth-child(3), .sent li:nth-child(4),
.sent li:nth-child(5), .sent li:nth-child(6), .sent li:nth-child(7), .sent li:nth-child(8) {
transform: rotateX(0deg);
}
input::-webkit-input-placeholder {
color: #dadada;
opacity: 1;
}
input:not(:focus)::-webkit-input-placeholder {
opacity: 0.5;
}
[type="submit"] {
opacity: 0;
pointer-events: none;
}
.circular-form-container button.submit {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
display: block;
height: 100px;
width: 100px;
color: #ffffff;
font-family: serif;
border-radius: 50%;
border: 0;
outline: none;
z-index: 100;
box-shadow: 0 0 5px #00000080;
opacity: 0;
pointer-events: none;
transition: opacity 1s, box-shadow 0.25s;
}
.circular-form-container button.submit:focus {
opacity: 1;
pointer-events: auto;
}
.circular-form-container button.submit:hover {
box-shadow: 0 0 10px #ffffff80;
}
.sent.circular-form-container {
left: 150%;
transition: transform 1s ease-in-out, left 0.5s ease-in 3s;
}
.sent input {
pointer-events: none;
opacity: 0;
transition: opacity 1s;
}
.sent input::-webkit-input-placeholder {
opacity: 0;
}
.sent .sent-label {
display: block;
transition: opacity 1s;
opacity: 1;
}
Below is the javascript code for this video.
index.js
$(document).ready(function () {
$(".circular-form-container").removeClass("closed");
firstInputField().focus();
});
function firstInputField() { return $(".circular-form-container li:first-child > input"); }
$("input").on("focus", function () {
var index = $(this).parent().index();
var rotation = -22.5 - 45 * index;
setFormRotation(rotation);
});
function setFormRotation(rotation) { $(".circular-form-container").css("transform", "rotate(" + rotation + "deg)"); }
$("[tabIndex]").on("keydown", function (e) {
if (e.keyCode == 9) {
e.preventDefault();
var currentElement = $(this).get(0);
var currentIndex = currentElement.tabIndex;
var lastTabIndex = $("[tabIndex]").length;
if (e.shiftKey) {
if (currentIndex == 1) {
return;
} else {
currentIndex--;
}
} else {
if (currentIndex == lastTabIndex) {
return;
} else {
currentIndex++;
}
}
$("[tabIndex=" + currentIndex + "]").focus();
}
});
$("form").on("submit", function () { onSubmit(); });
function onSubmit() {
$(".circular-form-container").addClass("sent");
setFormRotation(697.5);
setTimeout(function () {
$(".circular-form-container").removeClass("sent");
$("input").val("");
firstInputField().focus();
}, 5000);
return false;
}
Thanks for visiting