Product lines aren`t alingned, price to close to text,"total amount" box would like to be moved from bottom of form

I have a few problems with my form that I hope you can help me out with.

In my product nr. 5, "håndmad med æg & rejer", it doesn`t align with the rest of the lines in the form (see attached file). How do I get it to do so ?

The price of the products are standing to close to the text (see attached file), how can I move it apart ?

The total amount is in the bottom of the form, can I place it somewhere else, so the customer can see it while he is ordering ? Since it`s a long form, placement of the total amount in the bottom isn`t working well, so hopefully you can help me out with this problem as well.

Thank you for an outstanding program.

Please add this custom CSS code to your form for the product alignment and for the spacing of the product name and pricing: 

span.form-sub-label-container {

    padding: 0px !important;

    width: 100% !important;

}

.form-product-name {

padding-right: 10px;

}

Here's a guide on how to inject custom CSS code to your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Please let us know where you want to put the Total Price so we can assist you properly.

Thank you very much, that solved the problem :)

Regarding the Total Price, I´m not sure how to place it best. My problem is, that my form is very long, and I would like for my customers to be able to see the total at all time, as if in a webshop you got the Total ammount and basket visible at all time, but don`t know what is possible here, I hope you might have some suggestions ? 

Hope it makes sence, and thanks a million for your great help and support.

It is possible to add 'Total' field that will be visible all time. This can be the Form Calculation widget and you should get the total from payment field.

How to Perform Form Calculation Using a Widget

After that I added this CSS code to my form to make the 'Total' field visible all time:

#id_34 {

    position: fixed;

    top: 0px !important;

    right: 410px!important;

    z-index: 9999;

}

Here is my demo form: https://form.jotform.com/73325193631959 

Feel free to test it and clone it. 

I moved your other question to this thread - https://www.jotform.com/answers/1310225 

That is the answer to my problem for sure :) 

But when I use it on my site, total box is in left corner, can I get it to the right side instead, as it is in your demo form on my site too, and so it works on both tablet and desktop ? 

Link to my site is : https://madpakken.wordpress.com/home/smorrebrod-2/

I have another form where I would like to add this feature, can I copy it into that form too ? 

This is link for my other form : https://eu.jotform.com/build/73325761343354

To align the field to the right you can use my colleagues code and change it a bit.

#id_34 {

    position: fixed;

    top: 0px !important;

    right: 5px!important;

    z-index: 9999;

}

Yes, you can use the css codes but it would depend on the html elements of the form.

Here is a guide on how to inject custom css to your form :https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Works perfect now :)

My final problem with this, is the one form I would like to use this feature in also.  I´m aware that I can copy the css codes, but I have no idea what to copy into my form, since I figure it isn`t all of the css code I shall copy ?

This is link for my other form that haven`t got total box : https://eu.jotform.com/build/73325761343354

This is how I have added it to your form 73325761343354.

The calculation field received the same id_34 field id in this case.

So, the CSS was the same.

Please check it now. Thank you.

I´m still not sure I understand how to copy it to another form. Can you please rename it to "total" instead, and place it in the right side of the form, as it is in the other forms ?

Thank you in advance.

As per your request, I have renamed the "Calculation" to "Total" text. I also place it on the right side of the form. Can you please check and see if that's what you prefer?

Here's a screen capture of the changes I made to your form:

We'll wait for your reply. Thank you.

It looks great, but if possible, I would like the box to be the same size and at the same place as my other 2 forms ?

Can I make the "total" box follow along, while my users go down through my form, so they always can see the total ? 

Hi,

As per your request, I have changed the size of the Total price.

Can I make the "total" box follow along, while my users go down through my form, so they always can see the total?

What do you mean follow along? Upon checking, the Total price field is following down when you scroll down the page. Here's a screen capture:

Could you please provide more details so we can assist you properly? We'll wait for your reply.

Thank you.

Thank you for correcting the size :)

The problem is, that I don`t scroll down in the form, but I scroll down on my webpage, and then it isn´t following down, but I guess that is because I don´t scroll in the form. Is it possible to set up to follow down anyway ?

Do you mean the form is not showing even if you scroll down the page? Please embed your form using the following iFrame code.

 <iframe id="JotFormIFrame-73353235943357" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/73353235943357" frameborder="0" style="width: 1px; min-width: 100%; height:5600px; border:none;" scrolling="no"> </iframe>

Please note that it does not include the script part of your iFrame embed code.

Regarding your question about datepicker, I moved it to a separate thread - https://www.jotform.com/answers/1312884. We will attend to it shortly.

The form is showing correctly, but I would like for my customers to be able to see the "total" at all times, which is hard, because my form is very long, so I would like for the "total box" to move down, as the user scroll down on my webpage, so it will be visible at all time. Or maybe find another solution to solve the problem, so my customers can see the "total" ammount at all times, but I can`t figure out another way to do so. 

Unfortunately, the Total field with fixed position will not move within embedded form since the form is being loaded in its separate iFrame.

It may work if you embed the form using a source code:

How to get the Full Source Code of your Form

However, the source code may be affected by the other content of your website. You may test the source code embedding option to see if this is something that is working in your case.

I tried to embeed the form using the source code, but the page is all incorrect when I do so, so unfortunately that isn`t working either. 

Can I go around it another way perhaps ? is it for example possible to make another form that will work as a "basket" for the things the customer shop, so when he order an item, it goes to the basket (like on a webshop), and when he is finished ordering, he will go to the basket and check out from here ? Could something like that be done, or do you have any other ideas that could help me solve my problem ?

I recommend using the default form rather than the total price following your scroll bar.

Unfortunately, we do not have the basket icon to preview the product order. However, if you want to try another workaround, please check the Preview Before Submit widget. The user can review the answers/product order before submitting the form. 

To add a widget to your form, please follow this guide: https://www.jotform.com/help/252-How-to-Add-a-Widget-to-Your-Form

I hope this information helps. Feel free to ask if you have questions.

Ok, I will go back to the default form, and check out the widget you refered to. A final question, I have several forms that my customers can order from, but as it is now, they have to order and end their order on each form, is it in any way possible to make it so they can order from the different forms, but only have to end the "total" order once ? Hope it makes sense, and I guess it isn`t possible, but would be a great feature :)

Thank you for a great support. 

It is possible to pass the data from one form to another. However, the form has to be submitted. If you for example have 3 order forms and one 'Total' form, you will have to pass the data from first order form to the second order form and then from second to third order form and finally from the third order form to the 'Total' form. 

How to Automatically Pass Form Data to Another Form

Thank you, that would be a smart feature, but if I understand you correctly, the user have to go trough all forms then, before he can finish his order ? I would like for the user to be able to finish his order on one form, if that`s all he need, or take the amount into the next form, but only if the user is interested in bying from that form also, and as I see it, that isn`t possible, is that correct ?

Unfortunately, we do not have the built-in membership and shopping cart features.

It is possible to hide the payment field and redirect the user to another form using the conditional logic on form. The total calculation should be performed using the standard and calculation fields rather than the payment field. However, it may be not convenient to track what products are ordered and where they are paid.

You may consider an alternative approach with calculation fields and conditional logic to have different sections on the same form.

You can check the next sample form to see if something similar might work in your case:

https://form.jotform.com/73376194413964