Forums

Hi,
​
I have created some forms with CF6 and on desktop all is well. But responsive on a phone the fields are to short, only one normaly short field is long.
​
What can I do, to make the field longer or better equal long in responsive mode.
The site isn't already public (access with login and password is possible)
​
​

​
Pitter

Well what settings have you used on the field? My guess is you've told it to be width:50% .

I have tested fluid and 50%, 75%.
​
I tested: It looks well when I call the form directly with menu item. When I open it inside article with {chronoforms ..., it looks like above.
​
Pitter

Use multi field area instead.

I have the same problem.
Under the advanced tab, I tried a width of 75% and fluid.
On a desktop it works just fine.
On mobile, I have the same layout as above.
​
I tried a multifield, but then all my files are put next to eachother.
There is no way that I can find to put them under eachother.
​
I tried to make a multifield, for every filend that I need, to have them under eachother
But in the end that gives me exact the same layout

only when I turn my phone from portrait to landscape view, then it's full width

I created a demo form, whats in CF6: "basic contact form"
just give it a name, and save it. nothing is changed.

It has exactly the same problem.

Nobody else having this problem ?

I just did some tests
​
If you create the form, and use it with the plugin to show it in an article, then you get the result that the fields become very small.
​
If you create a menu-link to your form, than the sizes are perfect.
​
​
​
So it's an error in the plugin, which shrinks the the fields for an unknown reason

it may be some CSS in your template, I would say leave it without any width and it will auto change width based on the screen resolution.
​
If it's very important for you to have small width on PC then add the fields inside a grid with 2 columns, the fields should be in the first column, and add the class "stackable" to the grid class, the 2nd column should be empty!
​
And better to use v7 if you are building any new forms!
​
Best regards

Good afternoon
​
I left the width on the default settings (fluid).
There have been no changes.
​
I saw that the person who started the topic, got it fixed.
Through their website, I sended a message, if they could provide us any more information about how to solve it.
But there is no response.
​
Greetz

still no answer to this matter
My forms are still half the screen.
I have this on 7 different websites already
customers start to complain, because we can not get this thing fixed

Please post a link to your form so I can check it!

Good morning
​
This is 1 of the links: https://www.scalaresto.be/contact

your template css has a rule for the inputs width:

.bd-tagstyles:not(.bd-custom-inputs) .bd-form-input, .bd-tagstyles:not(.bd-custom-inputs) input[type=color], .bd-tagstyles:not(.bd-custom-inputs) input[type=date], .bd-tagstyles:not(.bd-custom-inputs) input[type=datetime-local], .bd-tagstyles:not(.bd-custom-inputs) input[type=datetime], .bd-tagstyles:not(.bd-custom-inputs) input[type=email], .bd-tagstyles:not(.bd-custom-inputs) input[type=month], .bd-tagstyles:not(.bd-custom-inputs) input[type=number], .bd-tagstyles:not(.bd-custom-inputs) input[type=password], .bd-tagstyles:not(.bd-custom-inputs) input[type=search], .bd-tagstyles:not(.bd-custom-inputs) input[type=tel], .bd-tagstyles:not(.bd-custom-inputs) input[type=text], .bd-tagstyles:not(.bd-custom-inputs) input[type=time], .bd-tagstyles:not(.bd-custom-inputs) input[type=url], .bd-tagstyles:not(.bd-custom-inputs) input[type=week], .bd-tagstyles:not(.bd-custom-inputs) select, .bd-tagstyles:not(.bd-custom-inputs) textarea {width: 150px;}

Good afternoon
​
As far as I can see, this is about the "textarea".
All columns are small on mobile devices.

no, this rule applies to almost all inputs on your form!