PassKit offers a wide range of features to help users succeed.
One notable feature is the data collection form generated for you so customers can add themselves to your program.
To view your data collection page, go to your distribution tab and click the link shown inside the QR Code box. You can give that link to users so they can enroll themselves into your program.
PassKit provides a simple form out of the box, if your looking to make something a bit more fancy, this article will show you how to integrate PassKit into the simplest of html forms.
Disclaimer**
This article is not an in depth guild on how to write html forms. Provided below are links to other help articles and some online tools if you need more assistance.
Make Sure Your Program Is Public
Before you deliver your form to customers, make sure your program allows public enrollment. Below is a screen shot showing where to find this.
If your program is set to private, users will not be able to enroll themselves.
Creating Your Own Form
If you have never created an html form before, click here to download our sample file to you desktop. Double click the file to open it in your preferred browser. To edit the file you will need a text editor capable to handling html. If you don't have one there are links below to some free options.
If you already have your own form, then no need to download our sample. The sample form includes the default collection fields provided when you create a new program.
This is what our sample html form looks like:
<html>
<body>
<p>My Custom Form</p>
<form action="" method="post">
<ul>
<li>
<label for="name">Name:</label>
<input type="text" id="name" name="person.displayName" />
</li>
<li>
<label for="mail">Email Address:</label>
<input type="email" id="mail" name="person.emailAddress" />
</li>
<li class="button">
<button type="submit">Create</button>
</li>
</ul>
</form>
</body>
</html>
There are three key sections to this form
Form Configuration
<form action="" method="post">
The action keyword tells where to send the form data once a new customer has filled it out. Fill this in with the distribution URL pointed out earlier so it looks similar to this:
<form action="https://pub1.pskt.io/c/oicytg" method="post">
The method keyword tells the form how to send the users provided information to the PassKit servers. Keep this one as post .
2. Form Content
<li>
<label for="name">Name:</label>
<input type="text" id="name" name="person.displayName" />
</li>
<li>
<label for="mail">Email Address:</label>
<input type="email" id="mail" name="person.emailAddress" />
</li>
Each <li><li/> represents a field that you want to collect from customers.
The name= field on each <input> tells PassKit what value you are looking to collect.
Below are a few other values that are available to you.
Person Fields
person.surname
person.forename
person.otherNames
person.salutation
person.suffix
person.displayName
person.gender
person.dateOfBirth
person.emailAddress
person.mobileNumber
Member Specific Fields
members.tier.name
members.member.externalId
members.member.points
members.member.tierPoints
members.member.secondaryPoints
members.member.groupingIdentifier
members.member.profileImage
Generic Fields
universal.optIn
If you would like to collect a custom piece of information, you can do so by mimicking the example below.
<li>
<label for="homeTown">Home Town:</label>
<input type="text" id="homeTown" name="meta.homeTown" />
</li>
3. Form Submit
<li class="button">
<button type="submit">Create</button>
</li>
Clicking the submit button tells the form to send the information provided to the PassKit servers.
Form Errors
If a customer submits a form with faulty data, PassKit will handle the error response for you. If you would like to handle error messages yourself, that will require further integration. You can read more about our api here.
If the form is valid, you will be automatically redirected to a landing page for the pass that was just created for you.
The only requirements for your form to work are the three mentioned above. Other than that, you are free to add any styling, content or images that you want. It's entirely up to you.