How to Create an HTML Sign Up Form with Animation Effects

We will create a minimalist HTML form that animates when you click on the form inputs.

Today we are going to create a minimalist sign up form using only HTML and CSS. Here is the end result of what we are going to create:

Form HTML Markup

Here is the general HTML markup of our sign up form.

<form>
    <label>
        <input name="name" id="name" type="text" required />
        <div class="label-text">Full Name</div>
    </label>
    <label>
        <input type="email" name="email" id="email" required />
        <div class="label-text">Email</div>
    </label>
    <label>
        <input type="tel" name="phone" id="phone" required />
        <div class="label-text">Phone Number</div>
    </label>
    <button type="submit" value="Submit">Submit</button>
</form>

Next, we move on to the CSS where we style and animate our sign up form.

Form CSS Styling