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

    Position text area and submit button when device display is 750px?

    Asked by EpicStudio on December 03, 2014 at 08:36 AM
    2. Make each text area and the submit button jump to it's own row when the browser width is equal or less than 750 px
    display specific custom CSS
  • Profile Image
    JotForm Support

    Answered by Charlie on December 03, 2014 at 11:38 AM

    Hi,

    Regarding your concern, not sure what you meant by jumping the text area and submit button, you can actually add custom CSS code in your Form Designer to position fields.

    Here's a sample code that you can trigger specific styles depending on the media screen display:

    @media only screen and (min-device-width : 320px)

    and (max-device-width : 750px)

    {

    /* Styles */

    }  

     

    I hope this helps. Let us know if you need further assistance on this.

    Thank you.

  • Profile Image

    Answered by EpicStudio on December 04, 2014 at 03:35 PM

    Thanks, that will, help a lot. So, do you sugest me to create a style for each text box that in widths higher than 750px will be e.g. 40% wide and on widths equal or smaller than 750px become 100% wide. Or how should I write the code?

    Thanks again..!

  • Profile Image

    Answered by Ben on December 04, 2014 at 04:54 PM

    Hi,

    So, do you sugest me to create a style for each text box that in widths higher than 750px will be e.g. 40% wide and on widths equal or smaller than 750px become 100% wide.

    This depends on what you would like it to be / look like. We can help you if you have some issues in getting it just the way you like, but I would suggest creating a design that you want to achieve which would tell you the size of the fields that you want/can have and their positions. However having that said, it is best for mobile devices to have their fields set to around 80-100% wide so that they are easier to click on and work with.

    how should I write the code?

    I took a look at your jotform: http://www.jotform.co/form/43357676732868

    Since you have 2 fields on it and one submit button you can change the styles of the fields by adding these rules:

    li.form-line[data-type="control_textbox"] {}
    - This will change the CSS for the email and textbox fields

    li.form-line[data-type="control_button"] {}
    - This will change the styles for the Submit Button.

    In combination with the code my colleague Charlie had given it would look like this:

    @media only screen and (max-device-width : 750px)
    {
      li.form-line[data-type="control_textbox"] { /* CSS style properties go here */ }
      li.form-line[data-type="control_button"] {
    /* CSS style properties go here */ }

    Do let us know how it goes for you and if you have any further questions.

    Best Regards,
    Ben