- Code with Ahsan - Newsletter
- Posts
- Memexplanation: Adding a Playful Twist to Form Submission: The Rotating Form
Memexplanation: Adding a Playful Twist to Form Submission: The Rotating Form
Nawazish challenged me to rotate the form. So I did it. See the code, the meme, and the explanation
Memexplanation: Adding a Playful Twist to Form Submission: The Rotating Form
Note: This is an update to my previous tutorial on which someone commented that they expected the page to rotate instead.
So in this quick tutorial, we'll inject some fun into a standard web form. Imagine a submit button that, upon click, doesn't just blandly submit your form but instead takes a spin—literally. It's a simple trick, but it adds a memorable touch to the user's experience. Let's dive in.
Setup
You'll need:
A basic understanding of HTML, CSS, and JavaScript.
An environment to write and test web code (e.g., a text editor and a browser).
Step 1: HTML Structure
First, let's set up the form. Create an HTML file and paste the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fun Button</title>
<style>
/* CSS styles will go here */
</style>
</head>
<body>
<div class="container">
<form id="myForm" onsubmit="rotateButton(event)">
<label for="name">Name</label>
<input type="text" id="name" name="name" value="Ahsan" />
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
value="[email protected]"
/>
<button id="funButton">
<div class="loader" id="loader"></div>
Submit
</button>
</form>
</div>
<script>
// JavaScript will go here
</script>
</body>
</html>
Step 2: Styling with CSS
Within the <style>
section of the HTML head, add:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
/* Additional CSS for form and inputs omitted for brevity */
@keyframes rotateButtonInfinitely {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
This CSS centers the form on the page and styles the inputs and button.
Step 3: JavaScript Magic
Replace the JavaScript placeholder in the HTML file with:
function rotateButton(ev) {
ev.preventDefault();
var btn = document.getElementById("myForm");
// Apply infinite rotation animation to the form
btn.style.transformOrigin = "117px 257px";
btn.style.animation = "rotateButtonInfinitely 0.5s linear infinite";
setTimeout(() => {
btn.style.animation = '';
}, 2000); // Stop the animation after 2 seconds
}
This function gets called when the form is submitted, preventing the default action and instead applying a rotation to the button.
Final Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fun Button</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
text-align: center;
}
form {
display: flex;
flex-direction: column;
gap: 20px;
background: #fff;
padding: 40px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
input[type="text"],
input[type="email"] {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
#funButton {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
background-color: #007bff;
color: white;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 10px; /* Add some space between the loader and the button text */
}
.loader {
border: 2px solid #f3f3f3; /* Light grey */
border-top: 2px solid #3498db; /* Blue */
border-radius: 50%;
width: 12px;
height: 12px;
display: inline-block;
}
@keyframes rotateButtonInfinitely {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<form id="myForm" onsubmit="rotateButton(event)">
<label for="name">Name</label>
<input type="text" id="name" name="name" value="Ahsan" />
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
value="[email protected]"
/>
<button id="funButton">
<div class="loader" id="loader"></div>
Submit
</button>
</form>
</div>
<script>
function rotateButton(ev) {
ev.preventDefault();
var btn = document.getElementById("myForm");
// Apply infinite rotation animation to the button
btn.style.transformOrigin = "117px 257px";
btn.style.animation = "rotateButtonInfinitely 0.5s linear infinite";
setTimeout(() => {
btn.style.animation = '';
}, 2000);
}
</script>
</body>
</html>
Explanation
When the user clicks the submit button, the rotateButton function is triggered. This function prevents the form from being submitted in the traditional way, applies a rotation animation to the form, and then stops the animation after a short duration. This creates a playful and memorable interaction for the user.
Conclusion
This tutorial illustrates how a bit of creativity and JavaScript can be used to enhance the interactivity of web elements. By applying this approach, you can create engaging and fun web experiences that stand out to your users. Feel free to experiment and customize this example to fit the needs of your project.
Reply