How to Create an Online T-shirt Order Form in WordPress [Easy & Simple Way]

Are you planning to open an online T-shirt business? Or trying to make a customized T-shirt for your close buddies or maybe for your organization. It’s tiresome to get everyone’s design or color preference individually. Also, it’s not efficient to ask everyone for their T-shirt size. 

So, what do you need? You need to make an online T-shirt form where anyone can select the design, choose the color and size, choose the address they want their T-shirt to be delivered, payment options, and whatnot. 

Fluent Forms is the most beginner-friendly form builder. Download now and start crafting beautiful forms FREE!!!

You may find some T-shirt order form templates online, but templates aren’t always the best choice. You may not find all the necessary fields you wanted in the first place.

So, why not create a T-shirt order form from scratch – customize and design your form as per your need, and make your own template? Fluent Form is the best fit for small to mid-size businesses to create your personalized T-shirt order form without any hand-coding. 

A form builder to make an online T-shirt order form

If you need to make creative and beautiful T-shirt order forms, you surely need a powerful form builder plugin. And when it comes to creating online forms without coding, nothing beats Fluent Forms. Before jumping into the form building, what are the benefits of choosing Fluent Forms to make your desired online T-shirt order form you may ask? 

Here you go – 

Handle bulk submission: The T-shirt order form is very demanding in the market as everyone wants a customized T-shirt for their gang. Clothing companies also use these form builders to get orders from their customers. So, they need a tool that can handle bulk submissions, have all the necessary fields and functionalities, invoice pdf generator, and so on. 

A whopping number of input fields: Mandatory fields to create an online T-shirt order form- 

1. Name Field 
2. Address Field (with autocomplete and Google map integration)
3. Email field
4. Checkbox and Multiple choice
5. Payment fields 
6. File upload
7. Dropdown filed for selecting colors, design, size, etc.
8. Repeater field 

Moreover, you’ll get 40+ input fields excluding these to make any types of the online form you want. Check out how to make a check request form with Fluent Forms. 

Important features and integrations: You may need to include conditional logic to your form, or maybe some calculator to help your customer to keep track of their budget, or maybe some visual of the T-shirt; all can be done with Fluent Forms.

Also, downloading the PDF version of the submitted entries is a great feature of any online order form. Users may need the invoice in hand, you can ship the invoice with the T-shirt they ordered.

If you want to nurture your leads or one-time customers into permanent loyal customers, you may need some kind of Customer Relationship Management or CRM tool for your form builder, and yes, Fluent Forms has a bunch of native integrations to nurture the leads.

Moreover, you’ll get 45+ integrations, from automation to file-sharing tools, from membership to notification tools, and whatnot.

Enough chitchat, let’s jump into the form-making. 

How to create an online T-shirt order form (from scratch)

These are the steps to create an easy and complete T-shirt order form. Just follow along to get your online T-shirt business up and running fluently!

Step 1: Create an online T-shirt order form

To make an online T-shirt order form without any coding, you first need to install a form builder on your WordPress site. Installing Fluent Forms is pretty straightforward. 

After installing and activating the plugin, hover over to Fluent Forms from the left side and select Add New to create your form. Now a popup will appear, select the New Blank Form option to initialize your new form. 

You’ll see a congratulations popup and will be redirected to the form editor page. On this page, you can add, remove, and customize your form fields as you like. 

This is where you have to make up your mind about the form structure. Some likes directly jump into the T-shirt design section, and some likes to get the users’ basic info first. 

Going with the latter, we’re going to add the name, address, email, and phone number fields one by one. This is pretty basic stuff, just search for the field from the right side of the editor page and click to add it to your form. You can also drag the field to shuffle them. 

As for the name, we’ll add only the first and last name, you can enable the middle name option from the input customization. What else you can customize? For the address field, you can add or remove a secondary address, exclude the unnecessary information filed, or add Google Map Autocomplete if you want. 

Step 2: Make a section for T-shirt style customization

Now for your customized T-shirt, you need to select the size, color, and quantity of your desired shirt. So, we’re going to add a three-column container and add a Payment Field with a radio option enabled, Item Quantity Field mapping with the Payment Field, and a Dropdown field named select the color (where we’ve created the options for different colors).

Now, what if someone wants to order another T-shirt in different size and color? Yes, we can do this too. With a simple trick of Conditional Logic, you can add another container with the same fields assigned to them. 

Add a Check box and name it Add T-shirt, then copy the earlier container and rename it as T-shirt 2. Set the Conditional Logic as per the Screenshot. Now, whenever a user checks this field a new container will appear and he/she can add another T-shirt requirement to his/her order. 

Step 3: Customize the payment section for your T-shirt order form

Setting the payment option for the T-shirt order form is very easy in Fluent Forms. Add Payment Method and Payment Summary fields for your order form. That’s it, it will dynamically fetch the quantity and amount, and show the subtotal and the other information in the Payment Summary. 

To spice it up, we’ll add a custom field to show as a confirmation message to the T-shirt order form. First, add a custom field and add your confirmation message. Then fetching dynamic data is pretty straightforward. Type {dynamic.Name_Attribute} to get the data of that particular field. 

For payment methods, Fluent Forms offers you the most popular payment integrations. You can use Stripe, PayPal, Mollie, RazorPay, etc. for your T-shirt order form payment. Setting up your payment method is just like any other payment setting. You need to integrate it through API keys. 

Step 4: Make it a multi-step form if you want

Now it can be overwhelming if a user sees so many fields on one page, you can divide your form into multi-step forms and make multiple sections for the user’s contact information and billing address, basic information, payment section, and confirmation section to the form. 

Search for Form Step from Input Fields, then add them at the start of the page and the end, also add one after the billing information and add one after the T-shirt selection.

Step 5: Notification and Email settings for the T-shirt order form

Now, what happens after the order is placed? If you want to send an email notification to your user and get an email notification for yourself after a T-shirt order form is submitted, you need to enable Email Notification. For that, toggle on the Email Notifications from the Setting and Integrations tab. Click on the Add Notification from the top and populate the fields as per your need. We recommend you follow the best practices for email notifications to avoid email deliverability issues. 

You may have seen the other options available on the left side of the screen. Yes, you can integrate your form with different tools like Membership, Notification, CRM, etc. software if you want. 

Step 6: Styling your T-shirt order form

If you followed everything we’ve told you till now, you’ve got yourself a functional T-shirt order form. You can use this anywhere like on a blog or page if you want. Also, you can create a landing page for this form which can be shared via direct links or buttons. 

But what about giving this form some style? Yes, you can do this too, add some featured images to your form via a custom HTML field is pretty basic. If you use page builders like Elementor, and Oxygen you will get some additional widgets for Fluent form. It can be super handy to make your form look so rich that users usually cannot scroll without having a second look. 

Here is a basic T-shirt order form without any coding or the help of a fancy page builder – 

In Preview & Design option you’ll have some options to change the background color, font color, container design, and so on. Even it’s offering some form style template for your T-shirt order form – Modern, Classic, Bootstrap Style, etc. 

However, if you want to add some custom CSS and JS to your form, it’s possible too. It’s not mandatory to hand-code your form styling. You can make beautiful forms without any CSS or fancy page builder in a jiffy.

Remember dynamically fetching data to the confirmation page for reassurance?
Just type {dynamic.Name_Attribute} to fetch the data of that particular field, for our order form, we simply put a custom HTML field and put some confirmation text along with {dynamic.names} and {dynamic.phone} tags. Voila! This is how it’ll look like in your form.

We also added some T-shirt designs to the radio fields for choosing visually.

Publishing your T-shirt order form

Publishing your T-shirt order form is no rocket science. Fluent Forms always gives a unique id with every form. Just copy-paste the shortcode to the page or blog post you want to publish your form.

Additionally, if you use the Landing Page feature, you can add background color, background image, form logo, feature image, page heading, and so on to make an elegant-looking form.

You can also have the option to see how your form will look on mobile or desktop. Sharing with the landing page is as easy as pie and it has a handful of options like you can share via direct link or button to share on social media.

Still confused? No, you aren’t missing out anything

With Typeform you can make interactive forms to make your form conversation-like.

You can make interactive conversational forms with Fluent Forms too. And it has a bunch of options like full-on keyboard access, adding different images/layout, even animation/video to the form, one click to transform your non-interactive form to the conversational one, and so on.

If you want to make a T-shirt order form as Typeform, you can do that with Fluent Forms Conversational Form.

Make some school T-shirt order forms now for your class or club. If you need a hand, check out how conversational forms work in this video. 

Here is another example of an online T-shirt order form.

See, you aren’t missing out on anything. In fact, with Fluent Forms, you’re getting more than any other form builders offer to make some awesome T-shirt order forms.

Wrapping up

And there you have it, a simple and easy way to create an online T-shirt order form without any coding knowledge. Now you can make any type of order form if you want, just add your required fields and design a user-centric form with Fluent Forms within a few minutes. 

If you have any issues with email notifications or your emails going to spam, you can install a free plugin FluentSMTP.  Also, if you have any queries regarding any order form, comment below. Follow us on social media to get the latest updates and tutorials.

• Facebook
• Instagram
• WordPress
• Twitter
• YouTube