WPForms Blog

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

create t-shirt order form in wordpress

How to Create a T-Shirt Order Form in WordPress (Step by Step)

by Lindsay Liedke on Sep 20, 2018

Do you want to allow users to create and purchase a custom created t-shirt on your website? With WPForms, it’s easy to start a print-on-demand venture and make money online.

In this article, we’ll show you how to create a t-shirt order form in WordPress.

Why Create a T-Shirt Order Form With WPForms?

WPForms makes it easy to create any type of online form, including a t-Shirt order form.

In fact, you don’t need to install a heavy eCommerce plugin on your site to allow users to create a custom t-shirt and purchase it. With WPForms, you can allow users to choose a custom style for their t-shirt, accept payment, and process shipping without any hassle.

Let’s take a look at how to create a t-shirt order form in WordPress with WPForms.

Step 1: Create a T-Shirt Order Form in WordPress

The first thing you’ll need to do is install and activate the WPForms plugin. For more details, see this step by step guide on how to install a plugin in WordPress.

Next, go to WPForms » Add New to create a new form.

You can see our tutorial on how to create a simple contact form in WPForms to get started.

In our form, we’ll need to create two sections. This first will be for customizing the style of the T-shirt and the second will be for submitting payment details.

Step 2: Create a T-Shirt Style Section on Your T-Shirt Order Form

To create a t-shirt style section on your form, you’ll need to add the following fields.

customize form fields t-shirt order form

  • Color: Add a Dropdown field to your form and specify different colors your customers can choose.
  • Size: Create a Dropdown field and allow customers to choose their preferred t-shirt size.
  • Style: Add another Dropdown field and let your customers choose the perfect style for their t-shirt.
  • Custom text- line 1: To create a unique style with custom text, add a Single Line Text for them to fill out
  • Custom text- line 2: Add another Single Line Text field to your form that allows customers to specify the second line on their t-shirt.

If you have printed images you want people to choose from, check out this tutorial on how to add an image next to radio buttons in WordPress forms.

While the above fields give you a head start on creating a t-shirt order form, feel free to customize the fields to suit your needs. You can add additional fields to your order form by dragging them from the left hand side to the right hand side.

From there, click on the form field to make any changes. At this time, you can delete the Name, Email, and Comment/Message form fields from the t-shirt style section.

Next we’ll split the t-shirt order form into two sections so we can add the payment section.

To do this, add a Section Divider to the form and drag it to the top of the form.

section divider

You can change the label and description of the field by clicking on the field.

customize section divider

Step 3: Create the Payments Section

Now let’s create the payments section at the bottom of the form.

To start, we’ll have to add another Section Divider. Place it below the t-shirt style section so there’s a clear distinction.

Again, you can change the label and description of this divider so customers know what part of the form they’re filling out.

payment section divider

To process payments on your order form and to allow users to submit their contact details, we’ll have to add the following form fields:

  • Name
  • Email
  • Single Item

After adding the Single Item form field, you can click on it to customize the label and item price.

payment section customization

Make sure to click on the Required checkbox so the price of the t-shirt automatically calculates and your customer is charged properly.

Click Save.

Step 4: Configure Payment Settings

Now that we’ve added all of the necessary fields to the form, let’s go to the Payments tab in the form editor to configure the payments settings.

payment settings

WPForms allows you to process payments using PayPal or Stripe.

You also have the option to let customers choose between check or PayPal payments.

In this example, let’s choose PayPal Standard to process payments.

paypal payment settings

Here, you’ll need to configure the following:

  • Select the checkbox near Enable PayPal Standard Payments
  • Enter your PayPal email address to receive payments
  • From the Mode dropdown menu, select Production to receive payments
  • Choose Products and Services as the payment type
  • Under Shipping, choose Ask for an address and require it so you don’t have to ask for shipping details on your T-shirt order form. Instead, your customers will fill out their shipping details during PayPal’s checkout process.

Click Save.

Step 5: Configure Your T-Shirt Order Form Settings

To start, go to Settings » General.

WPForms General Settings

Here you can configure the following:

  • Form Name. Rename your form here.
  • Form Description. Give your form a description.
  • Submit Button Text. Customize the copy on the submit button. For example, you can change the submit button to say “Buy Now.”
  • Spam Prevention. Enable the anti-spam honeypot feature to prevent spam form submissions and keep your website secure. This feature is automatically enabled on all WordPress forms. If you decide to use another form of spam prevention, unclick this option.
  • GDPR Enhancements. You can disable the storing of entry information and user details, such as IP addresses and user agents, in an effort to comply with GDPR requirements. In addition, check out our step by step instructions on how to add a GDPR agreement field to your simple contact form.

Click Save.

Step 6: Configure Your T-Shirt Order Form’s Notifications

Notifications are a great way to send an email whenever an order is submitted on your website.

WPForms Notifications Settings

In fact, unless you disable this feature, whenever someone submits a t-shirt order form on your site, you’ll get a notification about it.

If you use smart tags, you can also send a notification to the site visitor when they make a purchase, letting them know you received their order and payment and will be in contact shortly. This assures people their order form has gone through properly.

For help with this step, check out our documentation on how to set up form notifications in WordPress.

And if you need to send more than one notification, for example to yourself, the t-shirt manufacturer, and your customer, check out our step by step tutorial on how to send multiple form notifications in WordPress.

Lastly, if you want to keep branding across your emails consistent, you can check out this guide on adding a custom header to your email template.

Custom Email Header

Step 7: Configure Your Event Form’s Confirmations

Form confirmations are messages that display to site visitors once they submit a t-shirt order form on your website. They let people know that their form has been processed and offer you the chance to let them know what the next steps are.

WPForms has three confirmation types:

  1. Message. This is the default confirmation type in WPForms. When a customer submits a t-shirt order form, a simple message confirmation will appear letting them know their order and payment was processed. Look here for some great success messages to help boost customer happiness.
  2. Show Page. This confirmation type will take site visitors to a specific web page on your site thanking them for their purchase. For help doing this, check out our tutorial on redirecting customers to a thank you page. In addition, be sure to check out our article on creating effective Thank You pages for boosting customer loyalty.
  3. Go to URL (Redirect). This option is used when you want to send site visitors to a different website.

Let’s see how to set up a simple form confirmation in WPForms so you can customize the message site visitors will see when they purchase a t-shirt using your order form.

To start, click on the Confirmation tab in the form editor under Settings.

Confirmation Message

Next, select the type of confirmation type you’d like to create. For this example, we’ll select Message.

Then, customize the confirmation message to your liking and click Save.

If you want to display different confirmations to site visitors based on their behavior, be sure to read up on how to create conditional form confirmations.

Now you’re ready to add your t-shirt order form to your website.

Step 8: Add Your T-Shirt Order Form to Your Website

After you’ve created a t-shirt order form, you need to add it to your WordPress website.

WPForms allows you to add your forms to many locations on your website, including your blog posts, pages, and even sidebar widgets.

Let’s take a look at the most common post/page embed option.

To start, create a new post or page in WordPress and then click on the Add Form button.

Next, select your order form in the modal popup and click Add Form.

add t-shirt order form

Then, publish your post or page so your t-shirt order form will appear on your website.

And there you have it!

You now know how to create a t-shirt order form in WordPress.

To make sure your customers get their t-shirt order form receipts, check out this tutorial on how to automatically send a WordPress order form email receipt. And of you prefer to invoice customers later for their purchases, be sure to see this roundup of the best invoicing software for your WordPress order forms.

So, what are you waiting for? Get started with the most powerful WordPress forms plugin today.

And don’t forget, if you like this article, then please follow us on Facebook and Twitter.

Comments

  1. Thanks for reading this article – I hope you found it helpful.

    I wanted to let you know about our new WordPress survey plugin that allows you to build interactive polls and surveys within minutes. You also get best-in-class reporting, so you can make data-driven decisions.

    You can get it 100% free when you purchase WPForms Pro plan.

    Get Started with WPForms Today and see why over 1 million websites choose WPForms as their preferred online form builder.

    Syed Balkhi
    CEO of WPForms

  2. firstly I thought creat T-Shirt Order Form by WordPress is not easy. but now to say It’s nothing hard to do.
    A lot of thanks, Shahzad Saeed for sharing this valuable post. after reading this post I could not stay without social sharing.
    Love it 🙂

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.