How to align print and reset button side by side

ok, I seemd to get the buttons at bottom quit ok. I would like the "Print form-button next too "Tøm skjema" but it's ok.

You can add the following css code:

#input_reset_2 {

    position:relative;

    bottom: -56px;

    left: 250px;

}

You can adjust the left value. Or as an alternative you can clone the demo form:

https://form.jotform.com/60774436954971 

Let us know if we can assist you further.   

Hi, now I1ve done that, but I can't seem to get them on line, I tried to get them closer to the SEND BESTILLLING-button ... and the Print-button will not be grey ...? and I can't get them entered :)

 

https://form.jotformeu.com/60761421462349

I used the clone of my colleagues form, so to adjust that what you need, please copy this CSS to your Custom CSS field:

#input_2 {

bottom: -10px;

}

Also, for making your print button grey, copy this CSS:

#input_print_2 {

background: grey;

}

Please let us know if this works for you and if it is what you had in mind.

Here is the link of my cloned form: https://form.jotform.com/60802390027953, feel free to clone it.

 

 

 

hmm I can not get them on line, and another thing it seems the two column products don't fit to the responsive, mobile.

 

Could you have look and see where I've done wrong, do you get to see my css when I send you this link?

 

https://form.jotformeu.com/60761421462349

and they do not center ...

Hi again,

To fix that issue can you add the CSS code below?

 

#input_print_2 {

    width : 140px !important;

    height : 40px !important;

   background-color : lightgrey;

    bottom : 46px !important;

    position:relative;

}

At that time, your print and reset buttons will be at the same line.

You can also align center your print and reset buttons by adding the additional CSS code.

Here is your code:

#input_print_2 {    margin-left : 180px !important;

}

  #input_reset_2 {  margin-left : 200px !important;

 

}

Here is how it works:

If it doesn't work, please let us know. We can try another solution.

it seems the two column products don't fit to the responsive, mobile.

I've checked your form on my phone which is IPhone 5s. I am not able to reproduce any issue.

Here is how it works on my phone:

Can you also send the screenshot of your form when you open it on your mobile phone?

 

ok, I'll do that but the buttons in the bottom seems to just don't get right at all, maybe its to much done in the css, that makes it cloudy :)

 

#cid_1 img.form-product-image {

    width : 150px !important;

}

 

#cid_1 img.form-product-image-with-options {

    width : 170px !important;

}

 

#input_2 {

 

}

 

.span_print {

 

}

 

.form-buttons-wrapper {

 

}

 

#cid_1 img.form-product-image {

    width : 150px !important;

}

 

#cid_1 img.form-product-image-with-options {

    width : 150px !important;

}

 

/* Submit button*/

.form-submit-button {

    width : 180px !important;

    height : 40px !important;

}

 

/* Reset button */

.form-submit-reset {

    width : 140px !important;

    height : 40px !important;

    margin-top : -30px;

}

 

/* Print button*/

.form-submit-print {

    width : 140px !important;

    height : 40px !important;

    margin-top : -30px;

    background-color : lightgrey;

}

 

#input_2 {

 

}

 

.span_print {

 

}

 

.form-buttons-wrapper {

 

}

 

.form-product-item {

    line-height : 20px;

    border : 2px solid #EFEFEF;

    margin-left : 0px;

    margin-right : 20px;

    margin-bottom : 20px;

    margin-top : 20px;

    padding : 10px;

    padding-right : 10px;

    padding-left : 10px;

    float : center;

    width : 300px;

}

 

.form-product-item + br {

    display : none;

}

 

br + b {

    float : left;

    padding-top : 0px;

}

 

.form-payment-total {

    line-height : 40px;

    margin : 0px;

    border : 0px solid #EFEFEF;

    border-radius : 4px;

    padding : 15px;

    padding-right : 0px;

    padding-left : 0px;

    margin-top : -10px;

    margin-bottom : -10px;

}

 

.form-section.page-section {

 

}

 

.form-line.form-line-column.form-col-1 {

 

}

 

.form-all {

 

}

 

.jotform-form {

 

}

 

#id_1 {

 

}

 

#60761421462349 ul.form-section {

 

}

 

.form-input-wide.jf-required {

 

}

 

.form-label.form-label-left {

 

}

 

#label_5 {

 

}

 

#input_reset_2 {

    position : relative;

    bottom : -26px;

    left : 160px;

    background-color : lightgrey;

}

 

.form-line {

 

}

 

.form-input.jf-required {

 

}

 

#id_13 {

    margin-top : -40px;

    margin-bottom : -20px;

}

 

.form-html {

 

}

 

#id_15 {

    margin-top : -40px;

    margin-bottom : -20px;

}

 

.form-textbox.form-address-state {

 

}

 

.form-textbox.focus.inputmask {

 

}

Most probably because it was missing the "!important".

I cleaned up your CSS code. Try replacing all your CSS code using this one:

#cid_1 img.form-product-image {

    width : 150px !important;

}

#cid_1 img.form-product-image-with-options {

    width : 170px !important;

}

#cid_1 img.form-product-image {

    width : 150px !important;

}

#cid_1 img.form-product-image-with-options {

    width : 150px !important;

}

/* Submit button*/

.form-submit-button {

    width : 180px !important;

    height : 40px !important;

}

/* Reset button */

.form-submit-reset {

    width : 140px !important;

    height : 40px !important;

    position: relative !important;

    bottom: -26px !important;

    left: 160px !important;

    margin-top : -30px !important;  

}

/* Print button*/

.form-submit-print {

    width : 140px !important;

    height : 40px !important;

    margin-top : -30px !important;

    background-color : lightgrey;

}

.form-product-item {

    line-height : 20px;

    border : 2px solid #EFEFEF;

    margin-left : 0px;

    margin-right : 20px;

    margin-bottom : 20px;

    margin-top : 20px;

    padding : 10px;

    padding-right : 10px;

    padding-left : 10px;

    float : center;

    width : 300px;

}

.form-product-item + br {

    display : none;

}

br + b {

    float : left;

    padding-top : 0px;

}

.form-payment-total {

    line-height : 40px;

    margin : 0px;

    border : 0px solid #EFEFEF;

    border-radius : 4px;

    padding : 15px;

    padding-right : 0px;

    padding-left : 0px;

    margin-top : -10px;

    margin-bottom : -10px;

}

#id_13 {

    margin-top : -40px;

    margin-bottom : -20px;

}

#id_15 {

    margin-top : -40px;

    margin-bottom : -20px;

}

 

This is how it looks like: https://form.jotform.com/60804392922961. Let us know if you need further adjustment on it.

Thank you, this was nice :) the only problem now is that the form does not show. When I move the page to a smaller window in my desktop, the form disappear ...

On behalf of my colleagues, you're welcome! 

I tried your form on multiple browsers and on mobile devices, and the form is showing normally. Which browser are you using?

And how do you mean "move the page to a smaller window in my desktop"?

Please let us know and we'll be glad to help you!

when I open the order page in Safari and drag the window smaller / more narrow until the mobile menu shows, the order form disappear.

http://elisabethtalen.no/bestillingskjema.html

 

I trie to refresh the page, but it does not help, the same happens if I trie the page on my iPad.

I see that you embedded using Adobe Muse. This problem with forms not showing on mobile devices is because of Adobe Muse's settings. Since, the form itself(outside of website) is loading normally on mobile devices. 

So, please follow this guides to add supported resolutions for your form in Adobe Muse:

http://stephen.io/mediaqueries/

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

So if you predefined your resolution for your website in Muse, please include the smaller ones as well to cover mobile devices.

Please let me know if you have further questions.

I have all the sizes in breakpoints in Muse for iPad and 320 px for mobile.

 

I've used this css in the jot form now, but can't see any effect ... did I do this wrong?

 

@media only screen 

and (min-device-width : 768px) 

and (max-device-width : 1024px){

}

 

@media only screen 

and (min-device-width : 375px) 

and (max-device-width : 667px){

}

 

@media only screen 

and (min-device-width : 414px) 

and (max-device-width : 736px){

}

 

 

You need to add CSS style between curly braces. 

@media only screen 

and (min-device-width : 414px) 

and (max-device-width : 736px){

.form-all {

width: 320px !important;

 

}

}

I've tested your website on my phone. I am able to reproduce the same issue that you're having. The form is not visible on Phone.

in addition to that, can you re-embed your form with Iframe method?  At that time, it will work properly.

Please, check the guide below for more information:

http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

Ah, thank you ever so much! the iFrame works, and now my client can start adding products :)