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 field line?

    Asked by hubebub on March 29, 2015 at 10:37 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 it responsive?

     

     

    Thank you,

    Karina

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

    same Mobile same line absolute
  • Profile Image

    Answered by cyberhopper on March 30, 2015 at 07:07 AM

    Hello,

    I encountered a similar problem and here,s how i went about (I've recreated your form fields in order to address you scenario).

    Create a form with the and apply the following properties to the controls.

    Email field: Shrink it to take half the form size

    Submit Button: Shrink it so that it falls in the same line with the email input, Set its alignment property to right.

    After that go to the the form properties under Setup & Embed then select the designer (I use the designer CSS tab to write my custom CSS similar to injecting it).

    In the design section click on an empty section of the form and set the following properties under Form Layout tab.

    Click on the CSS tab and add the following css code for the .form-button-error class

    .form-button-error {
        position : absolute;
    }

     

    Save the form then preview it (here's a preview of my example). When the form size gets smaller i.e mobile screen size the button will be pushed under the email field in column layout

    Cheers,

    hope this helps resolve you issue.

  • Profile Image
    JotForm Support

    Answered by Welvin on March 30, 2015 at 10:58 AM

    Hi Karina,

    I've checked your form and saw that both the email field and submit button is now on the same line. I think you managed to fix this per cyberhopper reply on this thread.

    Just a finishing touch, inject the following custom CSS codes to make a perfect alignment:

    button#input_1 {

      margin-top: -4px;

    }

    From the current alignment:

    Adding the above codes will move the submit button a little bit on top:

    Add the codes at the bottom of the existing ones in your form, here's how: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Let us know if you need further assistance.

    Thanks