What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to align print and reset button side by side

    Asked by talen on March 18, 2016 at 09:52 AM
    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.
  • Profile Image

    Answered by Carina on March 18, 2016 at 11:19 AM

    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.   

  • Profile Image

    Answered by talen on March 21, 2016 at 04:36 AM

    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

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 21, 2016 at 06:44 AM

    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.

     

     

     

  • Profile Image

    Answered by talen on March 21, 2016 at 08:09 AM

    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

  • Profile Image

    Answered by talen on March 21, 2016 at 08:10 AM

    and they do not center ...

  • Profile Image
    JotForm Support

    Answered by beril on March 21, 2016 at 09:58 AM

    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.

  • Profile Image
    JotForm Support

    Answered by beril on March 21, 2016 at 10:06 AM

    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?

     

  • Profile Image

    Answered by talen on March 21, 2016 at 11:31 AM

    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 {

     

    }

  • Profile Image
    JotForm Support

    Answered by Charlie on March 21, 2016 at 12:02 PM

    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.

  • Profile Image

    Answered by talen on March 22, 2016 at 04:06 AM

    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 ...

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 22, 2016 at 04:26 AM

    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!

  • Profile Image

    Answered by talen on March 22, 2016 at 04:37 AM

    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

     

  • Profile Image

    Answered by talen on March 22, 2016 at 04:39 AM

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

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 22, 2016 at 04:57 AM

    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.

  • Profile Image

    Answered by talen on March 22, 2016 at 05:46 AM

    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){

    }

     

  • Profile Image
    JotForm Support

    Answered by beril on March 22, 2016 at 06:11 AM

     

    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

  • Profile Image

    Answered by talen on March 22, 2016 at 06:45 AM

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