Bootstrap 3 Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="row">
    <div class="col-md-offset-4 col-md-8">
        <form role="form" id="request" action="" onsubmit="return false;" method="post" enctype="plain">
            <div class="form-group">
                <input type="text" name="link" class="subscribe-input" placeholder="Paste the link" required>
            </div>
            <div class="form-group">
                <div class="row">
                    <input type="email" name="email" class="subscribe-input" placeholder="Your E-Mail" style="display:none" required>
                    <button id="next" class='btn btn-conf btn-green'>Next</button>
                </div>
            </div>
        </form>
    </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

JavaScript

$(document).ready(function () {

    $("#next").on("click", function (e) {

        $('.warning').remove();
        if ($('#request input[name=link]').val()==='') {

            $('input[name=link]').parent().addClass('has-warning');         
            $('input[name=link]').before('<p><label class="control-label warning" for="inputWarning2">Please provide a link</label></p>');

            e.preventDefault();
        } else {

            $(this).replaceWith("<button class='btn btn-conf btn-green' id='submitbutton' name='submit' type='submit'>Submit!</button>");

            $('input[name=link]').hide();
            $('input[name=email]').show();
        }
    });

    function IsEmail(email) {
        var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        return regex.test(email);
    }

    $('#request').submit(function (e) {
        $('.warning').remove();

        //check if email is correct
        if (!IsEmail($('input[name=email]').val())) {

            $('input[name=email]').parent().addClass('has-warning');
            $('input[name=email]').attr('aria-describedby', 'inputWarning2Status');

            $('input[name=email]').before('<label class="control-label warning" for="inputWarning2">Invalid email address</label>');

            e.preventDefault();

        } else {

            var link = $('#request input[name=link]').val();
            var email = $('#request input[name=email]').val();

            if (link !== '' && email !== '') {
                var btn = $('#submitbutton').button('loading');

                //process the data

                btn.button('reset');

                $('#submitbutton').replaceWith("<button id='next' type='button' class='btn btn-conf btn-green'>Next</button>");

                $("input[name=email]").hide();
                $("input[name=link]").show();
        }
    } // end else
});
});