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 can I put the button on the same line as email field and have the form responsive?

    Asked by hubebub on March 29, 2015 at 11:57 PM

    Hi,

    I've tried moving the button to the same line as the e-mail field. 

    This works fine in normal state, but when clicked it jumps down. 

    I've used absolute position but on the mobile the form is no longer responsive.

    Any idea what code to plug to make the button stick in place after clicking?

    Finally, is it possible to make the button stick on the same field line and keep it responsive?

     

     

    Kind regards,

    Karina

    Page URL:
    http://form.jotformpro.com/form/50878733216966

    same Mobile same line responsive shrink field positioning
  • Profile Image

    Answered by Ben on March 30, 2015 at 08:37 AM

    When you think of aligning fields in one row Karina, the first suggestion from me would be to use Shrink option.

    This is available to you on all fields, when you right click on them or use the gear wheel.

    It makes the fields fall in line as many as possible for the given resolution.

    Now I took a look at your jotform and Absolute positioning would work good if you want it in an absolute position at all time, but never if you are going for responsive layout - possible, just not as easy.

    What I did was to shrink the two fields and then applied some CSS code as needed:

    This is the entire CSS code (but I had to remove the positioning of submit button that you had placed or it would conflict with this):

    li.form-line.form-col-1 {
        padding-right: 0;
        max-width: 70%;
        width: 70%;
    }
    #input_2 {
        max-width: 100%;
        width: 100%;
    }
    li.form-line.form-col-2 {
        max-width: 30%;
        width: 30%;
        padding: 40px 12px 0 10px;
    }
    [data-type="control_email"] .form-input, [data-type="control_email"] .form-input-wide {
        max-width: 100%;
    }
    @media screen and (max-width:768px) {
      li.form-line.form-col-2 {
        padding-top: 29px;
      }
    }
    @media screen and (max-width:360px) {
      li.form-line.form-col-2 {
        padding-top: 24px;
      }
      #input_1 {
        padding: 0;
        width: 100%;
      }
    }
    @media screen and (max-width:320px) {
      li.form-line.form-col-2 {
        padding-top: 23px;
      }
      #input_1 {
        padding: 0;
        width: 100%;
      }
    }

    You can see how to add it to your jotform here: Inject Custom CSS Codes

    You can also just clone my clone of your jotform:

    http://form.jotformpro.com/form/50883088899982

    You can do that by following the steps here: How to Clone an Existing Form from a URL

    Do let us know how it goes.