My Order Form Fields Are Displaying / Formatting Incorrectly

Sometimes when you install Spiffy for the first time or on existing order forms, your order form just doesn't quite look right and that is usually because there's been some modification inside Infusionsoft that is causing the issue. This could be from your order form theme or possibly some custom code that is already on your order form.

Here are a couple examples of what you may see, when an older Infusionsoft order form theme is running in the background:

1.Billing Info Fields not formatting correctly

2.Credit Card fields not formatting correctly

3.Radio Buttons above your Credit Card fields.

In the above video, I'm going to help you troubleshoot some of those display errors on your Spiffy order form to make sure it's looking awesome and works super well on both desktop and mobile. Please watch the video below. The article below will also walk you through the steps. 

First, make sure you clear out all of your HTML on your order form. 

To do so, log into Infusionsoft and go to ecommerce setup and click 'order forms'.  

Click on the order form you want and go to HTML areas. The only code you should see in any of those boxes should be your Spiffy code and if any additional Spiffy snippets. 

Now, copy any snippets you have in there onto a separate document for now just to make sure that those aren't conflicting with something. Then delete all extra code that is not the main Spiffy code in the header. 

The next step is to refresh your order form theme. 

Again, go to your E-Commerce setup. Then under design, click on 'order form themes'. 

Click to create a new theme. Select one column, we’ll select any of the existing templates - it doesn't matter which one. 

Name your theme My New Theme. Click on save. 

Now, you're going to want to delete the Custom Tees logo unless you like this logo and you want to use that for your business which typically is not the case. Confirm to delete it and you are good to go.

Now you just need to add this theme to your order form. 

Go back to e-commerce setup, click on order forms again, select the order form that you were editing.

Go to HTML areas, and copy out your Infusionsoft Spiffy code - very important!

Now, click on theme and change it to the new theme you just created. 

Click Make Active. 

You'll notice changing the theme removed all custom html code from your form. So you will have to add the Spiffy code back to the header. 

Now, go over to order form links and confirm that this is in fact working. If it is back to working, you can add back in any of the custom snippets you need to your html footer.

If you're still having issues with your order form just email us at support@gospiffy.com and we will jump right on it and make sure that your order form is squared away and looking as it should.