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

Author

Muhammad Ahsan Ayaz
February 26, 2024

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.

Join the conversation

or to participate.