creation-form.html

<form-step>
    <p>Welcome to the Turtle Trainer! Before we can start you'll need to take a moment to tell us about yourself and your project.</p>
    <form-controls>
        <button class="js-next g-button -short -text -blue">Continue</button>
    </form-controls>
</form-step>
<form-step>
    <p class="u-margin-bottom-x2">Please enter a name that will be displayed any friends you invite to your room.</p>
    <div class="g-input">
        <input class="js-input" type="text" name="displayName" id="displayName" required tabindex="1">
        <label for="displayName">Display Name</label>
        <error class="js-error"></error>
    </div>
    <form-controls>
        <button type="button" class="js-next g-button -short -text -blue"  tabindex="2">Continue</button>
    </form-controls>
</form-step>
<form-step>
    <p class="u-margin-bottom-x2">So <span class="js-username-hotswap">USERNAME</span>, what project will we working on today? We know that this will be the hardest and most important part your project so feel free to take your time.</p>
    <div class="g-input">
        <input class="js-input" type="text" name="projectName" id="projectName" required  tabindex="3">
        <label for="projectName">Project Name</label>
        <error class="js-error"></error>
    </div>
    <form-controls>
        <button type="button" class="js-next g-button -short -text -blue" tabindex="4">Continue</button>
    </form-controls>
</form-step>