TOOLS
NEW
TEMPLATES
BY TEAM
BY GOAL
BY WORKFLOW
Support
COMPANY
BLOG
Inside SwagUp's $5 million form
Michael Martocci has been using Typeform extensively to grow his merch business, SwagUp. Now, after just two years, his company is closing in on $10 million in revenue and 30+ employees.
SwagUp has an arsenal of more than 80 typeforms powering this growth. These are embedded with the other tools and workflows in the company to automate tasks, saving time and lowering costs.
Here, we'll reveal the workings of SwagUp's most lucrative form—the swag pack builder—that has directly driven between $4-5 million in sales, according to Michael.
What does the form do?
SwagUp's pack builder form allows companies to create customized bundles of merchandise. Potential customers choose what kind of gear they're interested in, whether it's clothing, stationary, mugs, bottles, etc., and are given a choice of products that can be customized with their logo.
After the person has chosen the products they're interested in, they specify the number they want and the budget they have per item. Then they upload their logo and give their contact details. SwagUp then sends the potential customer mockups of what their desired products will look like, and they can place their order.
Check out this video where Michael explains the story behind the form and how it works.
You can try out the product picker here (don't worry, this isn't the real version and it won't generate a real order!)...
How Michael made SwagUp's Product Picker typeform
Here's a behind-the-scenes look at how Michael put together the swag pack creator that brought in $4-5 million in orders for SwagUp. We'll also show you how he integrated it with Trello to speed up turnaround times.
Even if you're not running a personalized merch/gifts business like SwagUp, this is something you can adapt for your own project. Essentially, it gives you a way to take orders and generate highly qualified leads by showcasing what you can offer and capturing demand.
Click here to install a copy of SwagUp's form as a template in your own Workspace. Read on to learn how the form was set up and then adapt it for your own needs.
1. It all starts with a warm welcome. SwagUp added a Welcome Screen, to which they added a customized image. Michael also changed the button text to add a clear call to action.
2. It's good to let people know what they're in for before they fill out a form. Michael added some pointers via a Statement block. Again, he used a custom image and button text to personalize things.
3. The core of the SwagUp product picker form is a series of product lists split into categories. Customers must choose if they want to pick a product from a particular category. If they say yes, they're presented with the list of products in that category and can pick one. If they say they don't want a product in that category, it skips to the next category. A bit like this:
4. So, how does that look behind the scenes in Typeform? First up, you need to create a Yes/No question for your first product category—in this case, it's coffee mugs. Note the use of bold and the addition of a Description to make things clear to the respondent.
5. Now to add the list of coffee mugs for the person to choose from. This is done via a Picture Choice question. SwagUp kept Show labels togged on, used the Supersize picture option, and enabled Multiple Selection, so people can pick as many items as they like (you can apply a selection limit here if you like).
6. Next, create another Yes/No question, this time for the next product category. In SwagUp's case this was tumblers…
7. As before, create your product list by using the Picture Choice question to add your items. Repeat this process of adding a Yes/No question for the product category and Picture Choice question for the corresponding items, until you've added everything you want to offer.
8. Now for the magic part—use Logic to direct people to the products they're interested in. Click Logic, and then Branching, segmentation and calculations to get started setting this up.
Tip! Need some pointers on Logic? Check out this guide.
9. You'll see all the questions you've created so far. First up, click Add Logic on the coffee mugs question. Now, set the logic so that if someone answers 'Yes' to the first question (do you want coffee mugs?) it jumps to the Picture Choice question with the coffee mug options.
Set 'In All other cases..." to go to the next Yes/No question. This means that if someone answers 'No' to the mug question, they don't see the list of mugs, but instead move to the next product category, tumblers (question 3).
10. Go to the next Yes/No question (which is about tumblers in SwagUp's case). Click Add Logic again, then follow the same process as step 9, jumping to the tumbler options if the respondent answers 'Yes' and skipping to the next Yes/No question for the next product category if they say 'No'.
11. Apply Logic in this way to all the remaining Yes/No blocks, showing or skipping the Picture Question product lists depending on whether the respondent is interested in that category.
12. Now that the respondent has picked their swag products, SwagUp just needs to grab a few more details from the customer so they can send them out a mockup of how their merch will look. They used a Question Group to assemble these remaining questions.
14. In this Question Group, Michael added space for people to leave additional comments via a Long text question. He also asked for the number of swag packs, budget, desired delivery date, and the person's email address (which was set to 'Required').
15. You can use the Phone Number question to ask for the person's contact number. The respondent can set the country code while they answer the question.
16. The final questions in SwagUp's product picker form allow the customer to upload their company logo(s). This is done using the File Upload question. The image files get sent automatically to the design team via a Trello (read on to see how that works), so they can create the product mockups that get sent to the customer.
17. The form is rounded off with a custom Ending that gives the customer information about what will happen next and expresses how excited SwagUp is to be working with them.
Michael also included his contact details and added a custom button linking to the team's contact email in case the client wants to reach out to the team.
18. Michael customizes all his forms to fit the SwagUp brand. To change the appearance of your form, click the Design icon, then the + button to create a new theme for the form. From here you can set the font, and change the colors of the questions, answers, and buttons. You can also change the background color, or even add a background image if you like.
19. Once the form was complete, Michael embedded it in SwagUp's Wix-built site. To do this, go to the Share panel and click on Embed in a webpage.
20. On the Embed page, you'll be able to try out different embed types for your form before copying and pasting the code into your website builder. Read more about the different embed options in this article.
Integrating with Trello
One of the cool things about SwagUp's product picker form is the way it was integrated into the project management tool, Trello. Michael connected it to his Design team's Trello board so that as soon as a request for swag comes in, they can start work on creating the mockups that get sent to the customer.
Here's the flow:
1. A lead fills out the product picker form.
2. A card is automatically created on the Design team's Trello board pulling in the information about what products the person is interested in, including the company logo images.
3. The Design team creates mockups of the swag using the company logo.
4. The mockups are sent to the customer.
5. Lead/order information is entered into Salesforce.
6. The Trello card stays on the board and gets moved along the flow depending on the current status of the order, up to the point where the payment is made.
There are a couple of ways you can set up a similar workflow to send your form responses to a Trello board—either via Zapier, or the native Typeform integration within Trello.
Option 1 - Zapier
SwagUp used Zapier to integrate their product picker form with Trello. The advantage of using Zapier is that it gives you the flexibility to apply rules and conditions. For example, you could filter out all responses that don't have business email addresses (e.g. where the email field contains gmail.com, yahoo.com, etc.) so they don't get sent to the Trello board.
You'll need a Trello account to get started. Create a new board and set up lists for each of the stages in your workflow. SwagUp's Design Board had lists for the status of the logo creation through to the outreach to the customer, then the order status.
Check out this quick-start template to help you quickly set up a Trello integration like Michael's:
Here's how the Zap is set up:
1. Log into Zapier (get an account here if you don't have one) and click Make a Zap. Select Typeform as the trigger app and 'New Entry' as the trigger event. Log into your Typeform account when prompted and look for the form you want to get the responses from.
2. Now set the action step. Choose Trello as the action app and 'Create Card' as the event.
3. You'll be prompted to sign into your Trello account. Choose the Board you want the form responses sent to and the List you want the card to appear under. In SwagUp's case it appears under the list for 'Designs Needed'.
4. Now you can start customizing what appears on the Trello card. For the title of the card, SwagUp uses the customer's name, the size of the order, and their budget.
Simply choose which variables you want to add from form, and add any extra text.
5. Other options for customizing the cards include the ability to add labels, set where in the list the card appears, and even to assign it to a person on the team. SwagUp assigned the cards created from the Product Picker to their designer to create the product mockups.
6. You can also include file attachments on the Trello card. SwagUp's Zap attaches the logo(s) that the customer uploaded to the form to the card.
7. Once you've set it all up, test your Zap to make sure it's sending the information from the form to Trello correctly.
Option 2 - The Typeform Power-Up in Trello
Another option is to use Trello's native integration—known as a 'Power-Up'—to send responses to your Trello board. This is a much simpler process, although you get less control. You can choose which list to create cards in, but you're unable to select which information gets sent to the card—it copies across the responses to every question.
Here's how to use the integration:
1. Click the three dots (...) in the top right-hand corner of Trello. Click Power-Ups.
2. Search for the Typeform Power-Up, then click Add.
3. After linking and authorizing your Typeform account, you'll be prompted to turn your responses into cards. Select the form you wish to use, choose which list you want the cards added to, then choose a title for your cards.
Note! The Trello integration doesn't allow you to use variables from Question Groups to name the card. So if you want the card name to be the company name, you'll need to add a separate question in the form for this, outside of the Question Group.
4. Do a test submission to make sure it's working. The card should be created in the list you specified and the responses will be added in table format, a bit like this:
What next?
- Read all about how Michael grew his business with Typeform in this case study over on our blog.
- You can install the free product picker template here.