Using Channel Form tag for a registration process need guidance

Question

Putting together a site that takes a logged in user through a registration process, creating a golf tournament. I am using the channel form tag. What the client was promised was that the sign up could happen across several pages:

P1: Register a new tournament and details P2: Enter in golf course information P3: Enter in fundraising organization information ...

and there are several other steps. The user is using the "next" feature to get to the next part of the sign up. I set up a channel called tournament and created a set of fields for the inputs. It occurred to me that this isn't going to work because it won't understand the "next button if the form tag has been closed. I am a rank amateur at AJAX but I was wondering if there is a way to use one template while the user is going through the steps of the registration and still have all the info submit to one entry...

            {exp:channel:form channel="tournament"}
            <ul>
                <li>
                    <label for="tour_title">Tournament Name</label>
                    <input class="medium" type="text" name="tour_title" id="tour_title" value="{tour_title}">
                </li>
                <li>
                    <label for="tour_body">Tournament Description</label>
                    <textarea name="tournament-description"></textarea>
                </li>
                <li>etc .....</li>
            </ul>
        {/exp:channel:form}

            <section class="page_nav">
                <a href="#" class="form-button">Next</a>
            </section>
            <section class="page_nav">
                <a href="#" class="form-button">Last</a>
            </section>

The process is by no means over when the user hits "next", there are a bunch of steps. If someone knows a better way I am wide open. Thanks.

Answer 1

The best way to do with would be with Freeform Pro, which allows you to collect form data across multiple pages easily. Unless you specifically need the resulting entries to be Channel entries (rather than Freeform entries), it might be your best bet.

However - the simplest way to do this with a Channel Form is to simply show/hide different sections of the form with javascript.

{exp:channel:form channel="tournament"}
<fieldset id="section_1">
    <legend>Tournament Details</legend>
    <ul>
        <li>
            <label for="tour_title">Tournament Name</label>
            <input class="medium" type="text" name="tour_title" id="tour_title" value="{tour_title}">
        </li>
        <li>
            <label for="tour_body">Tournament Description</label>
            <textarea name="tournament-description"></textarea>
        </li>
        <li>etc .....</li>
    </ul>
    <a href="#section_2" class="next-section">Next</a>
</fieldset>

<fieldset id="section_2">
    <legend>Personal Details</legend>
    <ul>
        <li>
            <label for="tour_name">Your Name</label>
            <input class="medium" type="text" name="tour_name" id="tour_name" value="{tour_name}">
        </li>
        <li>
            <label for="tour_email">Your Email Address</label>
            <input class="medium" type="text" name="tour_email" id="tour_email" value="{tour_email}">
        </li>
        <li>etc .....</li>
    </ul>
    <a href="#section_1" class="next-section">Next</a>
</fieldset>
{/exp:channel:form}

Then some jQuery like so (this is pretty generic, but to give the idea):

$(document).ready(function()
{
    $('fieldset').not(':first').hide();
    $('.next-section').on('click', function(e)
    {
        e.preventDefault();
        target = $(this).attr('href');
        $('fieldset').hide();
        $(target).fadeIn();
    });
});

This doesn't actually save an data between "pages" of course - it just breaks the form into multiple steps so it's easier to digest for the user.