Let customers upload files with their orders

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

Let's say that you are the owner of a t-shirt silk-screening service. Customers order t-shirts from you, attach an image to their order, and you silk screen that image on the t-shirt. Before they can attach the image, your customers need you to provide them with a form where they can upload their file.

If you're feeling confident and don't need support, have a look at this article to see how to add a form by editing your theme.

You can also use JotForm to create the upload form. JotForm generates a code snippet for you, which you can easily add to your theme.

Note

Uploads do not work on mobile devices currently. Make sure you include a link to your form in your order confirmation email for any customers who may be using a mobile device.

Create a form with JotForm

  1. Register with JotForm and get yourself an account.

  2. Make a new form.

  3. Choose a blank form from the options.

  4. Drag an upload file form element onto the canvas work area on the right:

    Jotform 1
  5. Give the field a name:

    Jotform 2
  6. You can make form elements required by clicking on the cog wheel for a form field's options and selecting Required:

    Jotform 3
  7. Align the label to the Top for a neater looking form:

    Jotform 4
  8. Align your button to the left, again for the form to look better:

    Jotform 5
  9. Add a short and sweet heading. Like "Upload Files":

    Jotform 6
  10. Add some fields that will have been populated with values from Shopify. Typically, you'll want:

- ready-named fields from the Quick Tools menu on the left, for the Full Name and E-mail of the customer - a text field from the Form Tools menu on the left, which you should give a title, for example Order.

Jotform 7

  1. Preview your form to make sure it has all that you need:

    Jotform 8

    You should be done! If at anytime you want to change your form simply log into your JotForm account and edit away. The form's script will automatically update itself based on your changes.

  2. Close the Preview panel and click Setup & Embed, then click Embed Form to get your code:

    Jotform 9
  3. Select the Secure form checkbox, then make a copy of the direct link given at the top of the Embed Form Wizard. You can mail this link to your customers (or include it in your email template) to direct them to the form if they miss it on the order status page.

    Jotform 10
  4. Still in the Embed Form Wizard, click Embed, then copy the Embed Form script that JotForm provides.

    Jotform 11

Add the form to your order status page

  1. From your Shopify admin, click Settings, then click Checkout.

  2. Scroll down to the "Order processing" section.

  3. Find the Additional Content & Scripts.

    Jotform 12
  4. In the text-editable box, simply paste in your JotForm code.

  5. Save your changes.

Optional: Add a bit of code to pre-populate the form fields with the customer's information. After the number of the JotForm URL, paste the following bit of code if you want to pre-populate the form fields for your customer:


?order={{ order_number }}&name={{ customer.name }}&email={{ customer.email }}

Note

Pay close attention to the names of the field that you gave your JotForm text areas. These names must match.

After your customer has completed their order, they are sent to the order status page. Here, they will see the form and be able to upload their file.

Note

You can add your note anywhere, but the best location is the order status page. This ensures that the form is protected and that anyone uploading through it has placed an order. If you place a form on your cart page, you expose your site to a greater risk of spam emails.

Jotform 13

Want to discuss this page?

Visit the Shopify Community