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

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

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.

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