How can I put the button on the same field line?

  • Profile Image
    hubebub
    Asked 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

  • Profile Image
    cyberhopper
    Answered 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
    Welvin
    Answered 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