How to Create a Multiplayer Team Signup Form — and Accept Payments

1. What You’ll Need
2. Step 1: Create a Form
3. Step 2: Create Your Player Registration Form
4. Step 3: Adding a Nested Form
5. Step 4: Set Up Stripe
   1. Testing Your Form
6. Step 5: Fill Your Data Into a Fillable PDF Template
   1. Preparing the PDF File
   2. Mapping Your Nested Form
7. Wrapping Up

Here’s a scenario: you’re organizing a paid soccer tournament. You need to get all teams registered and collect contact info and payments from each player. Of course, you don’t want to do this the old-fashioned way (paper forms!?): you use digital forms to make things easier.

In this tutorial, we’re going to show you how to quickly create a form flow that allows users to:

• Register teams and players for the tournament,
• Accept payments, and
• Generate a PDF with signup information.

You can do this from a single form submission — while still making the process intuitive.

We’ll use soccer as the example, but this process can be applied to any sport, eSport, or registration process for multiple people.

What You’ll Need

1. Gravity Forms: The heart of it all!
2. Stripe Add-On: To collect payments via your Stripe account right in Gravity Forms (Requires a Pro or Elite Gravity Forms license).
3. Gravity Perks Nested Forms: To collect repeatable information within your forms. In this case, collecting information about multiple players for a sports team.
4. CosmicGiant’s Fillable PDFs: To take data from your Gravity Forms entries and generate a fillable PDF using an intuitive visual mapper.

Having these plugins installed and activated now is recommended, but you’re welcome to follow along and see just how easy this is!

Step 1: Create a Form

Navigate to Forms in your WordPress Dashboard and click New Form. Start from scratch.

Here you’ll add the fields you want the user to fill out that don’t have any sort of repeatable information. Things like:

• An Email field for the person submitting the form (for use in notifications or for your own outreach).
• A Name field to collect each submitter’s name.
• A Single Line Text field to collect each team name.
• A Single Product field with the registration fee for the tournament set as the price.
• A Stripe Card field which will be used to collect a registrant’s entry fee.

Now that you have your base fields (make sure to save your form!), take a look at the frontend form to see what it will look like. Click the Preview button in the top right corner.

Remember that this is just a preview, so it won’t have any styling yet, but it gives you an idea of how the form will look to a user.

Now let’s pivot and create a nested form that will be collecting each player’s data.

Step 2: Create Your Player Registration Form

Just like we did with the previous form, navigate to Forms in your WordPress Dashboard, click Add New, and choose a blank form.

With this form, you’ll want to add fields that capture data about a team’s individual players. In this case, it’s repeatable information. You’ll probably at least want to include:

• A Name field.
• An Email field.
• An Address field.

If needed, you could also add fields for:

• Jersey Number.
• Jersey Size.
• Emergency Contact.
• Age.

Once you’ve added all your desired player fields, save your form. Head back to the form editor to edit the Team Registration form you created earlier.

Step 3: Adding a Nested Form

The great thing about Nested Forms is that once you’ve added a Nested Form field, you can nest any form within another.

In this case, just drag a Nested Form field into your form from the Advanced Fields section of the sidebar. Under Field Settings you’ll have a number of options, but we just need to link this field to the Player Registration form we just set up.

Nested Forms makes this a cinch: 

• For the Nested Form setting, select your Player Registration form from the drop down.
• Under the Display Fields setting, select all the fields you want to pull into this Nested Form field from the Player Registration form. In this case, you’ll want to select all the fields.

Make sure to save your form again!

You now have a rough skeleton of your form. This is a good time to hit the Preview button on the form again to see how things are working on the frontend.

You can see how the Nested Form field works to capture repeatable information by clicking the Add Entry button available in the form, which will pop up a handy modal with all the nested fields in it. 

Going through this multiple times will show you how easy it is to collect repeatable data with this setup!

Step 4: Set Up Stripe

In order to collect funds via your form, you’ll need to set up a Stripe feed for that form.

1. Navigate to the Form Settings of your Team Registration form, hover over it, and select the Stripe option in the menu.
2. Now you’ll be on the Stripe feed list for the form. Click the Add New button.
3. Name your feed to help distinguish it from other feeds you may set up in the future. 
4. Select Products and Services from the Transaction Type setting.
5. From the drop down list under Payment Amount, select the appropriate field from your form. If you added more than one Stripe field (perhaps to collect money for t-shirts), it’s easiest to set the Payment Amount to Form Total.

Optionally, under Other Settings, you can select fields to pull in customer information directly from the form.

Save your feed, and your form is now payment enabled. Easy!

Testing Your Form

Every time you complete an important step during setup — especially if it is a payment step — we highly recommend testing your form to ensure everything you’ve set up works.

Give your form a test, ideally in Stripe’s test mode. This can be set in your Stripe add-on settings and will help make sure your form is properly connected to Stripe before attempting to charge for your registration fee.

Step 5: Fill Your Data Into a Fillable PDF Template

Your form is almost ready to go, with one last — important — step. Our imaginary soccer league also asks you to submit a registration document generated as a standard PDF. This allows them to save all team and player information for their records.

In past years, this would have all been done by hand for each team. You’d have to chase people down for information and payments! With the system we’re setting up here, the data collection happens online, and payments get collected during registration. With Fillable PDFs, the PDF is generated instantly using the form’s data.

The first thing you’ll want to do is create a document with fillable fields in PDF format. Since this PDF will be used as a template to map fields to your form, you’ll want to match the document as closely as possible to the form you’ve created in Gravity Forms.

Preparing the PDF File

You can create your document using Google Docs, Canva, Microsoft Office, or any app that will export a PDF. Then, use Adobe Acrobat to make the form fields fillable. If you don’t have Adobe Acrobat, you can use a free alternative like LibreOffice, JotForm, or PDFescape.

As you build your template form, keep in mind that you’ll need to create fields for each potential player. Because you don’t know who those players will be yet, the fields can be labeled Player 1, Player 2, Player 3, etc. — plus any fields that need to be completed for each player, such as Player 1 Email, Player 1 Address, Player 2 Email, and so on.

Once your PDF is ready, head back to your site and follow these steps:

1. Navigate to Forms → Fillable PDFs → Templates.
2. Click Add New and on the next screen, upload your template PDF.
3. Navigate back to your Team Registration form, hover over Settings, and select Fillable PDFs from the menu.
4. Add a new Fillable PDFs feed (just like you did with the Stripe feed above).
5. When the feed settings appear, select the template you uploaded earlier from the Template drop down.
6. Once the settings refresh, click the Map Fields button to bring up the field mapper.
7. Once in the mapper, click a field on the template.
8. Select a form field in the right sidebar that matches the field on the left.
9. When you’re finished mapping all your fields, click Apply & Close.

Mapping Your Nested Form

To make sure your nested field — with individual player’s information — appears in the generated PDF, you need to select your nested form from the field list when mapping. 

A drop down will appear and let you select which field on the nested form you want to match it to. And just like that, player information will dynamically populate on each team’s registration PDF that’s generated!

Once you’ve mapped all your fields, you can click Apply & Close to save.

The only other required setting would be to set a name for the PDF when it is generated. You can also feed in data directly from the form using merge tags, so we’d recommend adding something unique for each team’s document, like the value of the Team Name field.

Another handy setting here would be to select a notification on the form to attach the PDF to if you want a copy of the generated PDF sent via email. You can also view all your generated PDFs from Gravity Forms’ entry detail view.

Lastly, save your Fillable PDFs feed.

You’re done!

Wrapping Up

You now have a full-fledged team registration form for a soccer tournament that collects all the information you need, processes the registration fee, and automates intake of all that data into a convenient fillable PDF.

Can you think of other use cases for this setup? Let us know in the comments!

And check out CosmicGiant’s site to learn more about Fillable PDFs.