This will most likely need to involve javascript, which I know almost nothing about so please bear with me.

I would like to have a regular form, say styled with bootstrap. But I don't want to display the all the fields at once when the page is loaded. Instead I would like to display the first field and continue to display the following fields as the previous fields are focused or have content in them.

```
<form action="" method="post">
    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" name="name" class="form-control">
    </div>
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" name="email" class="form-control">
    </div>
    <div class="form-group">
        <label for="website">Website</label>
        <input type="text" name="website" class="form-control">
    </div>
    <div class="form-group">
        <label for="message">Message</label>
        <textarea name="message" class="form-control" rows="5"></textarea>
    </div>
</form>

```

In this example only "Name" would show up, when the page loads, then when it is focused then the "Email" field would show up.

Any ideas would be great, thanks!