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 to make a LONG & Narrow Sign up form

    Asked by karunavine on December 01, 2015 at 11:52 AM

    Hi, I am having a challenging time setting up the form to be Long and Narrow (1 line) with just 3 fields next to each other, so it can go into a row on a website, rather than a regular box.

    I appreciate your help.

    Page URL:
    www.mariaaleksandra.com

    sign up form
  • Profile Image
    JotForm Support

    Answered by david on December 01, 2015 at 01:21 PM

    Hi,

    To create a form that is a single line, increase the width of the form, then use the "Shrink" function on your fields:

    http://www.jotform.com/help/90-Form-Field-Positioning

    Then, depending on the width of your fields, you may need to add some custom CSS, which we can help with if you'd like.  For example, to my test form, I wanted to decrease the padding between fields:

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    .form-line.form-line-column.form-col-1 {
        padding-right: 10px;
        padding-left: 10px;
    }

    .form-line.form-line-column.form-col-2 {
        padding-right: 10px;
        padding-left: 10px;
    }
    .form-line.form-line-column.form-col-3 {
        padding-right: 10px;
        padding-left: 10px;
    }

    The above code sets the padding for 3 columns.  Here would be the resulting form with some basic contact fields:

    https://form.jotform.com/53345546984972

    You can clone it to modify if you would like:

    http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    If you need any help getting something like this set up in your own form, let us know and we will be happy to help.

  • Profile Image

    Answered by karunavine on December 02, 2015 at 01:46 PM

    Hey, Thank you for this...

    I still need some help to make it look the way I want it to look.

    See the screenshot - I want this to be in the centre and with minimal whitespace. I have set up the form itself to "minimal" white space and same with the website so I am not sure what else I can do to make it look better. I am open to suggestions.

    I posted the screen shot here: http://mariaaleksandra.com/jot-form/
     
    Also how do I change the 'first name' & 'last name' to appear in the actual boxes not below them (also to save space) ?
     
    Thank you
  • Profile Image
    JotForm Support

    Answered by david on December 02, 2015 at 03:06 PM

    Something more like this?

    https://form.jotform.com/53355824014956

    Hint text can be placed in the first name field, however, if you would like hint text in both, it would need to be separated into two fields.  The labels can be removed by adding this code:

    .form-sub-label {
        display : none;
    }

  • Profile Image

    Answered by karunavine on December 02, 2015 at 03:44 PM

    David,

    1. When I put in the hint text - it lets me put it in the first name - then the last name i can not edit. also it centers the 'hint text' and limits it to a few characters.

    2. I want the whole thing to be on 2 lines - no wrap around 

    3. How do I make the top and bottom white space even less... it is already at minimum. 

    Thank you

  • Profile Image
    JotForm Support

    Answered by david on December 02, 2015 at 04:57 PM

    1. When I put in the hint text - it lets me put it in the first name - then the last name i can not edit. also it centers the 'hint text' and limits it to a few characters.

    You would need to separate the full name field into two separate fields in order to have hint text in both first and last name fields.  This would require using two text boxes, rather than a name field. 

    2. I want the whole thing to be on 2 lines - no wrap around

    I am not sure what you are referring to by this, if you could please elaborate we will be happy to help.  Nothing appears to be wrapping on my end:

    3. How do I make the top and bottom white space even less... it is already at minimum.

    The following code should remove even more white space

    .form-all, .supernova {
        padding-top : -10px;
        margin-top : -10px;
        padding-bottom : -10px;
        margin-bottom : -10px;
    }

    .form-html {
        margin-bottom : -10px;
    }

    Here is the resulting form:

    https://form.jotform.com/53355824014956

     

     

  • Profile Image

    Answered by karunavine on December 03, 2015 at 08:51 AM

    Hi David,

    Thank you for your help so far. I like how the padding at the top and bottom look (minimal white space) however the length is et up to 1300 and when I view the form on my 15'MBP the last 2 words (current & Real) end up wrapping to a 2nd line making the entire form 3 lines .

    I tried to add the text fields to use the stead of the Full Name Field, however I lost the formatting somehow.

    I would appreciate your support with creating this, also the spacing between the fields (name/email/submit) can be easily larger without affecting the form - it will look nicer I think.

     

    Thank you

  • Profile Image
    JotForm Support

    Answered by Welvin on December 03, 2015 at 10:25 AM

    How about this form: https://form.jotform.com/53362338660961

  • Profile Image

    Answered by karunavine on December 03, 2015 at 04:00 PM

    Hi Welvin,

    - the words "& real" wrap onto the second line - they all need to be on the same line

    - the spacing is correct and looking good.

    - the bottom field labels (first name, last name) I want those separate as hint text in the fields... I tried to create that and thats when I lost all the formatting.

     

    Bottom line is that the form needs to be as narrow as possible and clean looking and easily legible.

    Thank you

  • Profile Image

    Answered by Ben on December 03, 2015 at 05:38 PM

    I took a look at the screenshot:

    and I took a look at the form of my colleague, but both seem to be "the same".

    - with the difference being the text used for email label and the width of the fields, but I do not see any text going to the line under.

    Now, based on what you have mentioned, you want it to be as it is, with the current spacing, but it needs to be as narrow as possible?

    The only thing that you could do on the form is to remove the padding, so that the fields are starting right at the border of the form and finishing at the same as well.

    In regards to the hint text, you can do that by adding this into the hint text:

    First Name, Last Name

    (basically the comma is used as a separator to set the label for the first field and another one for the second one).

    I have made this and few other tweaks on a clone of my colleague's form, and this is how it looks:

    You can see it here: https://form.jotform.com/53366857602967

    Do let us know if that is what you were after.

  • Profile Image

    Answered by karunavine on December 04, 2015 at 10:31 AM

    Dear Men

    May be I need to make this simpler.

    if you look at these screen shots on this link...

    you will see that the first screen shot has a nice perfect widget for the form to go into. I would like the form to fit that widget as precisely as possible for aesthetic reasons.

    it also needs to be connected to my mail chimp account.

    The link you provide still looks like a 'wrap' on my MBP (in the second screenshot)

    Let me know how we can make this happen well 

    Warm Regards

     

  • Profile Image

    Answered by Ben on December 04, 2015 at 11:02 AM

    In order for us to be able to see the issue that you see when you embed the form on your website, we would need you to add the form and let us know once you did.

    This would allow us to come to your website, see the form and hopefully see the same issue, allowing us to better understand what is going on and how to resolve it.

    To do that, please clone this form: https://form.jotform.com/53366857602967 to your account (if you have not done so already) and embed it using iframe embed code: How to get the jotform iFrame Code

    You can do that on some hidden page if you do not want others to see it, but do let us know how we can access the same to check it out for you.

  • Profile Image

    Answered by karunavine on December 04, 2015 at 01:07 PM

    so where exactly is the form you are showing me located? how do I clone it to my account?

    it is not the one i designed because that is not what it looks like when I go to my forms.  

    I need to insert the script to have it be visible only page.

    Thanks

  • Profile Image
    JotForm Support

    Answered by david on December 04, 2015 at 01:09 PM

    Here is our guide on how to clone forms using the URL:

    http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    This is the URL you would use for my colleagues version of the form:

    https://form.jotform.com/53366857602967

    That would give you a copy in your own account.