Form on commerce site

I am hoping to get some help.  Until yesterday I had just a basic site and used a zoho form for orders but wanted to incorporate my orders through Squarespace.  have created my Products page which is currently in unlinked but my main issue is, once customers place their items in the cart (or even before, I don't care), I need for them to upload images.  I have create a new form in Wufoo and have the code (and created a page w/the same name as my Products page currently under my Home that has this form) and basically want this to appear when they place the order or click a button or try to checkout.

I am finding I can't add a block below my products but above the footer which would have been ideal so don't know how to do this to get it to work.  

Any advice would be so very welcomed.

Thanks. 

So there are a few options to achieve this.

The simplest way would be to use @michaeleparkour free tool which will allow you to place an upload field on the built-in Squarespace forms. Then on each of your products I would add a product form where you will be able to include the upload field for customers to upload their images. 

https://www.squarewebsites.org/blog/squarespace-websites-uploader

https://support.squarespace.com/hc/en-us/articles/205811218-Creating-a-custom-product-form

Thank you SO much! This is great and I am thrilled.  I think I have done something wrong however and I can't get it to work.

I am not code saavy: and totally clueless 😞

FileField;MaxSize=1024;Multiple;addText=Upload_Photos/Images;

But I don't even see the form options on the right similar to your example. I have refreshed and still see the upload Files field. 

I also had instructions I wanted to include for the upload and not sure where to put it)...

It actually looks really messy now 😞 Thanks so much.

@dlishbyjules You  missed to include uploader script to Footer injections, don't you?

Thanks for getting back to me, but sorry, i don't follow. 

I added your code to the header and to the footer top block. Do I need to add it to the footer middle block too? Is that what you mean?

Thanks so much!

Am I supposed to copy the code "Simple-Ajax-Uploader" and paste that somewhere too?  Sorry, I don't understand. All I initially did was copy the following:

<script src="//uploader.squarewebsites.org/sqs-form-upload.min.js"></script>"

and then changed the settings for the max size etc, not any other code so maybe I did it wrong and not copy code I was supposed to. 

• If I am supposed to copy the other code, where do I paste that?  In a header on my PAGES/SHOP or do I paste it GLOBALLY? If so, what page do I paste that on? 
• Do I need to put something in a middle footer?

Thank you very much. Any advice anyone can provide would be so welcomed. As you can see, I am a newbie and so confused and frustrated 😞

3 hours ago, dlishbyjules said:

Am I supposed to copy the code "Simple-Ajax-Uploader" and paste that somewhere too?  Sorry, I don't understand. All I initially did was copy the following:

<script src="//uploader.squarewebsites.org/sqs-form-upload.min.js"></script>"

and then changed the settings for the max size etc, not any other code so maybe I did it wrong and not copy code I was supposed to. 

• If I am supposed to copy the other code, where do I paste that?  In a header on my PAGES/SHOP or do I paste it GLOBALLY? If so, what page do I paste that on? 
• Do I need to put something in a middle footer?

Thank you very much. Any advice anyone can provide would be so welcomed. As you can see, I am a newbie and so confused and frustrated 😞

Just always share a link to page - one look worth a hundreds words you typed there) As I see you pasted custom message to description not extension like it should be. Anyway, post a link 

https://caterpillar-harp-pk73.squarespace.com/checkout

2 hours ago, dlishbyjules said:

https://caterpillar-harp-pk73.squarespace.com/checkout

 

Why do you post me /checkout page link? Do you know it is Squarespace system page and we can't run any code there??

I would recommend including it in a product form instead of the checkout page as it won’t work on the checkout page. 
 

https://support.squarespace.com/hc/en-us/articles/205811218-Creating-a-custom-product-form

4 hours ago, ThompsonWebDesign said:

I would recommend including it in a product form instead of the checkout page as it won’t work on the checkout page. 
 

https://support.squarespace.com/hc/en-us/articles/205811218-Creating-a-custom-product-form

Including what?

The upload field, instead of on the checkout page as the upload field won’t work on the checkout page. 

Hello! 

Thank you so much for this, I have been looking for this for so long! 

I hope I didn't forget to do this but my site shows text background behind the Add Files button? Is there a way to make this go away? 

site: http://www.eyesense.com.au

password: Eyesense 

Much appreciated.

@SarahAhzan The issue is in your custom styles where you're limiting each form field to 60px.  So sure you may set background to transparent to prevent visual overlap, but I'd better left file input with auto height :

.fileInput {

   height: auto!important;

}

@michaeleparkour Thank you very much, fixed it all up!