JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
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.
How can I put the button on the same field line?Asked by hubebub on March 29, 2015 at 10:37 PM
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?
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
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
hope this helps resolve you issue.
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:
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.