A few issues I need help troubleshooting: purchase order > inventory widget + mysterious image + slow loading

Hi support,

I've gotten about as far as I can using the other threads. Before I go any further (and sink a lot more time into it) I'd like to determine if what I'm trying to do is possible.

First, some context: why am I using a purchase order form? 

Because the product that I am selling (meat) varies by weight. Therefore, I give people a general idea/ an average of how much something is going to cost, but then I send them an invoice template after I put the order together and get exact weights. 

Okay, so I was using a simple purchase order form to achieve this. However now, (somewhat coronavirus-induced) I need to keep closer track of my inventory. So...I integrated the inventory widget and got to work transitioning item descriptions from my purchase order form to my inventory form. I then started uploading pictures to the form to give people an idea of what they were ordering. Okay, simple enough, right?

Well, the first problem I am experiencing is that my form is taking too long to load. I am assuming this is because of the size of the pictures I have uploaded. I have cut them to about 200px wide by 150px high. Is this the reason? If not, what else should I try? If it is the reason, what picture size would you recommend. I was hoping that I wouldn't have to go much smaller for obvious reasons...

Okay, next issue: for some reason there is a mysterious image place-holder that's popping up when I preview the form. I am not seeing this place-holder when I revert back to edit the form. 

Finally, and probably the most complicated. I am trying to use the form calculation integration to calculate the total quantity of an order. I then want to move that calculation over to a purchase order where I have followed instructions for creating corresponding prices for each item. After assigning some prices to a couple of items I then tried to preview my form to see if both integrations were working in concert like I hoped they would. They are not. I am seeing a lot of zeroes and ones. Help!!!

Thanks so much for your track-record of excellent responsiveness and support. It's why I'm sticking it out with jotform. ;-)

 

Hi,

Thanks for reaching out.

Well, the first problem I am experiencing is that my form is taking too long to load. I am assuming this is because of the size of the pictures I have uploaded. I have cut them to about 200px wide by 150px high. Is this the reason? If not, what else should I try? If it is the reason, what picture size would you recommend. I was hoping that I wouldn't have to go much smaller for obvious reasons...

Your form is indeed slow because of the weight of the images being loaded at once. I have tried downloading some images from it and the file size appeared to be 7mb each on average.

There is varieties of external image optimizer than can help you minimize your image size to make your form loading optimized. I suggest converting them into small sizes and then re-upload it to your form.

Okay, next issue: for some reason there is a mysterious image place-holder that's popping up when I preview the form. I am not seeing this place-holder when I revert back to edit the form. 

I have tried previewing your form and wasn't able to see the image placeholder you are referring to. Can you please share with us a screenshot to illustrate the issue?

Guide: How-to-Post-Screenshots-to-Our-Support-Forum

Finally, and probably the most complicated. I am trying to use the form calculation integration to calculate the total quantity of an order. I then want to move that calculation over to a purchase order where I have followed instructions for creating corresponding prices for each item. After assigning some prices to a couple of items I then tried to preview my form to see if both integrations were working in concert like I hoped they would. They are not. I am seeing a lot of zeroes and ones. Help!!!

Please allow me some time to do some tests regarding this. I will get back to you on this thread shortly.

Thanks so much for your quick response! I will work on the image optimizer while you're working on the inventory question.

Best,

Chas

Thanks for your patience.

I can see that your calculation widget only concatenates the input values in your order form. This is why you see a lot of zeros (0) and ones (1). Have you perhaps missed adding the operator on your form calculation widget? 

I also noticed that some items in your form don't have a corresponding price yet. Kindly try editing your form calculation widget following this formula: (ItemQTY * PRICE) + (ItemQTY * PRICE).

For example:

Kindly do the same to the rest of the items in your form.

Please let us know if you need further assistance.

Hi Sonnyfer,

Thanks for your response. I have tried to update my form calculation widget according to your recommendation and though I'm not seeing as many 1's and 0's it still doesn't seem to be adding things up correctly. 

Would you mind taking another look? https://form.jotform.com/200849240572151

Thanks so much,

Chas

Hi Chas,

Sure, kindly allow me some time to check it for you. I will get back to you on this thread shortly.

Thanks so much!

Thanks again for your patience.

As I checked your new form, I noticed that there was some parenthesis located in the wrong part of the calculation. Also, there were items that are missing parenthesis. This is the reason why the formula doesn't work.

I have corrected it on this cloned form. If you prefer, you can just clone it by following this guide: How-to-Clone-an-Existing-Form-from-a-URL

If you need further assistance, please let us know.

Thank you so much, Sonnyfer. This is extremely helpful! 

A couple more questions (sorry):

1.) Why is the Total on the form calculation the same as the total with the prices. Is it possible to hide one of those so that I'm not presenting redundant info on my form?

2.) I tested the form and it seems to have worked really well. However, for some reason in my order receipt that I see in the email confirmation, I am not seeing line items listed for two of the things I test-ordered, only the quantity. For example, I ordered one pack of bacon and one pack of bacon slab, but on my order receipt that was emailed to me I only saw 1 and 1, though the prices were listed and correct, and other items *were* labeled. Thoughts?

3.) I basically have four sections to my form, though I found it to be easier to read, especially from a mobile device, by scrolling all of the options from top to bottom. If someone just wanted to order something at the top of the list and not have to scroll through the entire list to get to the order form, is there a widget that allows them to skip ahead? Again, I do not want to break the order form into seperate pages but simply give people the option to skip ahead if they don't want to scroll the entire way. 

Thanks!

1.) Why is the Total on the form calculation the same as the total with the prices. Is it possible to hide one of those so that I'm not presenting redundant info on my form?

You can hide the calculation field.

Here is a quick guide:

How to Hide Form Fields

2.) I tested the form and it seems to have worked really well. However, for some reason in my order receipt that I see in the email confirmation, I am not seeing line items listed for two of the things I test-ordered, only the quantity. For example, I ordered one pack of bacon and one pack of bacon slab, but on my order receipt that was emailed to me I only saw 1 and 1, though the prices were listed and correct, and other items *were* labeled. Thoughts?

The email template could be outdated. Please try creating a new email notification/autoresponder and test it again.

3.) I basically have four sections to my form, though I found it to be easier to read, especially from a mobile device, by scrolling all of the options from top to bottom. If someone just wanted to order something at the top of the list and not have to scroll through the entire list to get to the order form, is there a widget that allows them to skip ahead? Again, I do not want to break the order form into seperate pages but simply give people the option to skip ahead if they don't want to scroll the entire way. 

If you use page breaks in your form, you can add a Form Tabs widget to the form to allow navigation through the tabs.

If you do not want to use the page breaks, you may consider using the Section Collapse elements.

Also, it appears that your form is very heavy due to images uploaded in large resolutions. It is highly recommended to resize the images or optimize them for web, and then upload the optimized images to your form.

Hello again. I added the tabs and I like the way they look and work on a laptop or desktop screen. However, when I view the form from a phone (as most people will) the tabs are all jumbled. Is there a way to fix this so it looks tidy in all formats?

Hi again, @cmedens!

Kindly be informed that I've checked the form using my phone and it was properly showing tabs with no issues at all.

Furthermore, it would be great if you could provide us with a screenshot of how it looks on your phone in addition to your phone specifications so we can better assist you.

We're patiently waiting for your response.

Thank you. I have attached a screenshot
...

Hi again, @cmedens!

We, unfortunately, can't see the screenshot you attached. Are you sure you're replying to the thread instead of email? Kindly click here to follow up to the thread. Also check this guide to know how to attach images to the thread.

We're patiently waiting for your response.

Sorry about that Amin_N. See how to tabs are stacked on top of each other? I'd like for it to look cleaner with the tabs all the way across, the way it does if you're looking at the form on a desktop/laptop screen. 

Hi again, @cmedens!

Thanks for sending the screenshot.

I can see what you meant by saying the tabs are jumbled. However, since I tested the form on my phone and found no issues, this could possibly be an issue with your phone,  therefore I recommend that you'd better try opening the form using another phone to see if the problem still persists. 

Kindly give it a try and let us know how it goes.

Thanks for your response. Do you mind telling me what kind of phone your viewing it from? I've tried viewing it on a Google pixel 2 (Android os) and an iPhone 8 (iOS) and it looks the same. Jumbled. 

Moreover, when I choose the phone format to preview the form inside of jotform it also looks jumbled. 

It doesn't seem like a phone issue. Even if it is, I would like to find a solution because it seems to be jumbled on a number of different phone. 

Thank you! 

Hi,

I've tried viewing your form on an iPhone 8 and was now able to see the issue. 

Kindly allow me some time to further check this and will get back to you with a workaround shortly.

Thank you for patiently waiting.

I'd like for it to look cleaner with the tabs all the way across, the way it does if you're looking at the form on a desktop/laptop screen.

Unfortunately, if we opt to compress all tabs in one row on the mobile-view, the text will be unreadable as it might become very small.

However, we can align them per row and still look presentable as shown below:

If this could work for you, kindly injecting the below CSS codes to your form:

@media screen and (max-width: 480px){

ul#tabs-list li{

    width: 100%;

}

Guide: How-to-Inject-Custom-CSS-Codes

Please let us know if you need further assistance.

Thank you for your response. Is there any way to to put those at the bottom of each page of the form instead of at the top? 

Let me run some possible workarounds for this case. I'll get back to you shortly.

Hi,

Kindly try adding the below CSS code:

.tabs-list {position:absolute !important; bottom:100px;}

You can adjust the "100px" to your desired distance from the bottom of your form.

Hope this helps.

Thank you so much for the excellent customer support to this point. I know this is a long thread but I am really liking how the form is coming together. Almost done, I promise. 

One more question: is it possible to embed a loading gif, while the page is loading, using css code? 

Appreciatively,

Chas

is it possible to embed a loading gif, while the page is loading, using css code?

This is only possible with script coding which is not possible in the Form Builder.

You  would have to use the form's source code then add your script loading code and upload the form to your own server.

Hope this information helps.

If you have further questions ,let us know.