Adjust width of textbox and make form mobile responsive

I'm really struggling with formatting and appearance of my form. I feel like I've *almost* got what I want, but it's not quite there....

I even hired a couple of "CSS Designers" but still didn't get what I'm looking for (maybe the lack of familiarity with JotForm?)

 

Here's what I want to do:

 

I want the width of the text boxes to expand based on the browser to use more of the screen on the field I want it to, like Name, or Street.

I do not want it to expand on fields like Area Code, or Zip, or Month. It looks a little goofy with huge wide boxes for those fields.

And if I can have more field on one line when appropriate, it should do that (I've been doing that with shrink, new line, merge line, etc). This way, it should move to the next line in responsive small width device, but use up the whole line on a wide computer screen,  correct?

I can get the text box sizes smaller, but I can't get them to expand to use up the width.

 

Would love some help here. I'm sure someone has done this before?

 

Thanks!

 

Bhavesh

Hi Bhavesh,

 

Are you referring to this form - http://www.jotformpro.com/form/52837933181966? You can adjust the width of the specific text box by adding a custom CSS code in your form. You can try to use this custom CSS code:

input#input_104_postal {

    width: 50%;

}

#cid_9 span {

    width: 10%;

}

 

To inject custom CSS code in your form, just follow the instruction provided in this article: How to Inject Custom CSS Codes. 

 

Regarding the mobile responsiveness of your form, I noticed that the Responsive Form setting of the form is set to No. Can you try to set the Responsive Form setting of your form to Yes?

 

Do let us know if you need further assistance.
Regards.

So I think I just don't know what to adjust.

For example, in the screenshot below ( http://www.jotform.com/?formID=52849240195965 ), I've played around with min-width for first name and last name, hoping that it would expand bigger automatically based on the screen size. But unfortunately, it just stays the same fixed size.

 

In the second example, it would be nice to have City, State, Zip  and country on the same line (since zip and state shouldn't take up too much room).

 

On small devices, the fields may have to wrap but on a computer it should be more compact.

 

Conceptually, I think it should be

 

[shrunk field one at 150px or bigger] [shrunk field two at 200px or bigger] [shrunk field 3 at 200px or bigger]

new line

[shrunk field 4 at 120 px or bigger] [shrunk field five at 50px] [shrunk field six at 50 pix]

 

Is that the right concept?

 

 

 

 

Hi,

 

I am currently checking your form. Please give me more time to further check this. I am currently creating a sample form based on your requirement. I will get back to you as soon as I finish creating the sample form.

 

Regards.

Hi,

 

I have adjusted the form based on your requirement. You can check this sample form that I have created - https://form.jotform.com/52850558802964? and see if this is what you are looking for. You can clone the form to have a closer look on the setup. I have added this custom CSS code in the form.

.form-col-1{

    width: 50%;

}

.form-col-2{

    width: 50%;

}

li#id_97 {

    width: 40%;

}

li#id_133 {

    width: 30%;

}

@media screen and (min-width: 1024px){

.form-address-table tr:nth-child(3) td:nth-child(1) span:nth-child(1) {

    width: 150px;

}

.form-address-table tr:nth-child(3) td:nth-child(2) span:nth-child(1) {

    width: 150px;

    position: absolute;

    top: 153px;

    left: 160px;

}

.form-address-table tr:nth-child(4) td:nth-child(1) span:nth-child(1) {

    width: 150px;

    position: absolute;

    top: 153px;

    left: 360px;

}

.form-address-table tr:nth-child(4) td:nth-child(2) span:nth-child(1) {

    width: 200px;

    position: absolute;

    top: 153px;

    left: 490px;

}

.form-address-country {

    height: 35px;

}

}

 

Do let us know if you need further assistance.
Regards.

Hi, thank you for the response. I'll play with the CSS and see if I can get it to do what I want. I *think* it would be better to do this in 1 column so it is more responsive on small screens, correct?

The challenge I was having was using the full width in 1 column. Anyway, I'll play with it now.

Unfortunately, I still couldn't figure out how to achieve my goal. Here is where I am at now:

 

http://www.jotform.com//?formID=52860722107956

 

I converted it to 1 column (I think) by deleting 

 

.form-col-2{

    width: 50%;

}

and making .form-col-1 width: 100%

 

I would still like first name, last name, and preferred name span the width of the single column.

 

On the second page, I would like Zip, State and Country to be fixed in width, with City taking up the extra space. It just seems weird to have a box that takes up have the screen for two letters. It ends up taking up two lines for something that could be done in one.

 

My attempts at customizing the CSS have not resulted in the desired results for me so far, but hopefully I'll figure this out.

Hi,

 

Can you re-insert the CSS code below but change the width to 100%?

.form-col-2{

    width: 50%;

}

 

 

make it:

.form-col-2{

    width: 100%;

}

 

Please let us know if you need further assistance.

Regards.

 

 

Hi,

I have moved your concern to a separate thread so we can assist you better. Please see it here.