Creating an Order Form
Order forms are the primary means of selling services with SPP. Here’s a simple order form with a field for selecting one of the available services, and fields for customer’s name, email, and a payment options:
To set up your forms go to Order Forms > Add New. You can drag and drop fields from the left column onto your form, or click a field to append it to the end of your form.
The great thing about our form builder is that changes you make to your fields are visible in real time as you make them.
There are a few different types of fields you can add to your forms. The main groups of fields are:
- Service fields – radio buttons or dropdown menus where users can select a single service, checkbox groups and multi-dropdowns for selecting multiple services. Add multiple service fields to offer the exact combination of services you want.
- Account info – these fields provide the information for client’s account. Besides the email field they are all optional – for example, if no password is provided SPP will generate a default password and send it to the client in their welcome email.
- Payment options – if you have more than one payment integration you can add a payment method field with the payment options you’d like to offer.
- Data fields – most projects require some information such as website URL or keywords from the client. Use data fields to collect this information upfront, or add data fields to your service so that clients can provide necessary information after they’ve ordered.
With SPP you can create rules to show and hide form fields based on a selected value.
All fields are visible by default so if you wanted to show a field when a certain condition is met, you’d need to set up a rule to hide the field when it’s not.
In the example above we show the Upsell field only if the customer has selected the Gold Package.
When linking to an order form you might want to pre-select a certain service for the user depending on the link they clicked. With SPP you can do that by adding an URL parameter ?field_123=service_id.
Here’s how the new URL might look:
To find the field ID you can go into the form editor, click to edit a field and copy the field ID from the editor window which pops up on the right side.
For fields which support multiple selected services you need to pass an array of values like so:
In the example above two services with IDs 123 and 321 would be selected. You can also pre-select quantity and service variant:
Another use of this feature is when you want to link a form with a coupon code already applied: