create t-shirt order form in wordpress

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

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 shirt order form in WordPress.

Get Your Shirt Order Form Template Now

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.

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

Follow these steps to make your shirt order form in WordPress easily.

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.

You’ll also want to install and activate the payment addon you want to use to process t-shirt order payments. WPForms supports the following integrations:

You can check out the links above for details on how to install your preferred addon.

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

Adding a new form in WPForms

This will open up the form builder so you can name new your form and choose from 500+ WPForms templates. We’ll use the Tshirt Order Form template to get started quickly.

Selecting the Tshirt Order Form template

Our templates are completely customizable, though, so you can use any template you want and change it to sell t-shirts.

Step 2: Customize the T-Shirt Style Section on Your T-Shirt Order Form

The Tshirt Order Form template includes the following fields:

The Tshirt Order Form template

  • Dropdowns for design, size, and color so customers can choose their shirt details.
  • Name, Email, and Address fields so you can collect customer information you’ll need for billing and shipping.
  • A Checkboxes field where customers can specify if this purchase is a gift for someone else.

The This is a gift checkbox in the Tshirt Order Form template

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.

Also, to change the t-shirt details to fit your products, just click on the dropdowns in the preview and edit the options on the left.

Changing the color options in the Tshirt Order Form template

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

Step 3: Customize the Payments Section

Next, we’ll add another section to our form for payments. Drag and drop a Section Divider into your form. Place it below the “Your Details” section so there’s a clear distinction.

Adding a section divider to the Tshirt Order Form template

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

Editing the field options for a 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:

  • Single Item
  • Credit Card (for Stripe, Square, PayPal Commerce, or Authorize.Net payments)

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

Customizing a Single Item field for a t-shirt order form

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

You may want to check out our tutorial on how to add product options that change the total price. This is a great trick to do to improve the user experience and lower your shopping cart abandonment rate.

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.

In this example, we’ll choose PayPal Standard to process payments.

PayPal Standard payments settings in the form builder

Here, you’ll need to configure the following:

  • Toggle on the option labeled 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 once you’re done.

Step 5: Configure Your T-Shirt Order Form Settings

To start, go to Settings » General.

Accessing a form's general settings

Here you can configure the following:

  • Form Name — Change the name of your form here if you’d like.
  • Form Description — Give your form a description.
  • Tags — Add tags to your forms to keep your site organized.
  • Submit Button Text — Customize the copy on the submit button.
  • Submit Button Processing Text — Change the text that will be visible while your form is being submitted.

You’ll also be able to make changes to the advanced settings:

  • Form CSS Classes — Add custom CSS to your form.
  • Submit Button CSS Class — Add CSS to your submit button.
  • Enable Prefill by URL — You can use this setting to auto-fill some fields in your form.
  • Enable AJAX form submission — Enable AJAX settings with no page reload.
  • Disable storing entry information in WordPress — 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. Check out our step-by-step instructions on how to add a GDPR agreement field to your form.

Then move down to the Spam Protection and Security settings.

Opening the form spam and security settings

Here you’ll be able to:

  • Enable anti-spam protection — Stop contact form spam with the WPForms anti-spam token. The anti-spam setting is automatically enabled on all new forms.
  • Enable Akismet anti-spam protection — If you use the Akismet plugin to prevent spam, you can connect it to this form to block fake entries.
  • Enable country filter — Block entries from certain countries.
  • Enable keyword filter — Prevent submissions that include certain words or phrases.

There are also several CAPTCHA options you can enable. Check out our complete guide to contact form spam for more details.

Click Save to keep your changes.

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

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

Accessing a form's 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.

Step 7: Configure Your 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 were 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.

Editing the confirmation message for a t-shirt order form

Next, select the 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

Now that you’ve built your shirt order form using the template, you can add it to your WordPress website. WPForms lets you add your forms to multiple locations on your site, including your blog posts, pages, and even sidebar widgets.

To begin, create a new page or post in WordPress, or simply update an existing one. After that, click on the button to add a new block and choose the WPForms icon.

Adding the WPForms block to a post or page

The easy-to-use WPForms widget will appear inside your block. Click on the dropdown and pick the form you want to insert into your page.

Selecting your t-shirt-order form in the WPForms block

Now you’ll see your shirt order form as it’ll appear on your website. If you’re satisfied with the way your form looks, hit Update or Publish, and your form will go live on the Internet.

Publishing a t-shirt order form

To view shirt order form entries after they’re submitted, check out this complete guide to form entries.

For example, you can view, search for, filter, print, and delete any entries, making the shirt order process that much easier.

Get Your Shirt Order Form Template Now

Next, Create Automatic T-Shirt Order Receipts

And there you have it! So you now know how to create a t-shirt order form in WordPress.

Also, 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 if 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.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

Comments

  1. 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.

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.