Make an order and payment form

Dina Rodriguez, Founder of Letter Shoppe, uses a typeform to accept custom artwork requests from customers. Her typeform calculates a price for the commission, and collects the information and inspiration Dina needs to start work.

We caught up with Dina, who explained on our our blog how the typeform has helped her grow her business. Here’s a copy of Letter Shoppe’s typeform, feel free to play around with it (you won’t accidentally order anything).

Here’s how Dina built her order form:

For this typeform, you need:

You can create the typeform PRO account if you don’t want to remove Typeform branding.

1. Start off with a Welcome Screen. Dina’s has no image. It’s simply a welcome message that also explains how much time she has this month:

Screenshot showing welcome message

2. Next up, Dina needs to collect essential contact details. For this, she added a Short Text block asking for name, followed by an Email block. Both of these blocks are set to ‘Required‘.

Screenshot showing how to make short text and email blocks required

3. Now we can get on to the commission details. A Multiple Choice block asks which package customers want. To make it more personal, Dina piped the Variable with the answer to “What’s your name”.

Screenshot showing how to pipe a variable into a multiple choice block

4. Dina adds Calculator to this block so that the typeform keeps track of the price the client is going to pay. Here’s how to use Calculator.

Screenshot showing how Calculator keeps track of the price

5. Three Long text blocks were added to ask for the phrase the person wants lettered. Only one question is shown to the respondent, depending on what package they choose. The questions are different because there’s a character limit on each of the three packages.

Screenshot showing the long text blocks

6. Logic Jumps guide people to the follow-up questions, depending on their choice. You can find out more about how to set up Logic Jumps here. Here’s Dina’s Logic Jump setup:

Screenshot showing logic jumps setup

7. Another Long Text block asks for more information about the illustrations that clients are thinking of.

Screenshot showing long text block

8. Then Dina leaves space for clients to tell her why the commission is important. This will help her make the piece personal and special.

Screenshot showing long text block

9. Now we have contact details and a description of the commission, it’s time to talk logistics! A Multiple Choice block asks if the piece is needed quickly. For a price, Letter Shoppe will complete an order in less than two weeks, so Calculator is added again to reflect this.

Screenshot showing multiple choice block

Here’s the calculation Dina uses:

Screenshot showing the calculations that Dina uses

10. Dina asks for some links of inspiration, so she can get a better understanding of what the customer wants.

Screenshot showing the long text block that's used to collect inspiration links

11. A Picture Choice block allows Dina to show printing options for the commission.

Screenshot showing picture choice block

Each has a different price, so again a calculation is added, keeping score of the total Price variable.

Screenshot showing how calculator adds up the prices

12. Dina added a Legal block to give clients guidelines for submitting ideas, and to highlight what is and isn’t acceptable.

Screenshot showing legal text block

13. Now to move the customer towards payment. Dina added a Multiple Choice question to confirm the next steps. Here, she pipes in the ‘Price’ variable to display how much the person needs to pay.

Screenshot showing Multiple Choice block

The Multiple Choice options are ‘Pay now’ or ‘I still have questions’. This will redirect the customer to the Payment block if they want to pay now, or a Short text block if they have doubts. Here’s a peek at how the Logic Jumps look:

Screenshot showing the logic jumps behind the multiple choice block

14. The Payment block breaks down the order so far – piping in answers to previous questions using Variables, so people can see what they are paying for currently. Find out more about piping variables here.

Screenshot showing payment block

15. When people answer ‘I still have questions’, Logic Jump takes them to a Short text block, where they can ask.

Screenshot showing short text block

When the Payment block, or final Short Text block is filled out, the, Submit button leads to a simple Thank You screen, with Typeform branding removed. Learn how to activate Typeform brand removal here.

You can read more about Dina’s story in our blog article here.