How to make a LONG & Narrow Sign up form

Hi, I am having a challenging time setting up the sign up 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.

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.

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.

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;
}

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

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

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

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

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

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.

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

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.

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

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.