How do I change the width of questions and answer text boxes in my form?

[NNLC]

I can drag the edge to make the form wider but the questions all remain in a narrow column.  I have a lot of check box options and it looks terrible.  Can I change the width of the questions and text boxes?

[Queso]

Hey there! You should be able to edit the internal parts of the form the same way you would other elements. Is there a particular page or form giving you trouble?

[NNLC]

Hi, I'm using the Contact Form.  I've added text box answers and using the advanced options I've chosen 'large', but still the box only extends halfway across the width of the form.  Similarly with my check box options the option descriptions wrap around at around halfway across the page.  Here's a screenshot.  Any suggestions to have this extend across the width of the form?  Thanks!

[Queso]

Ah, I see. It does look like that particular form is going as wide as possible. It may be something you'll want to bring up in the Feature Vote section, though we also have several Apps in the App Center that may offer forms more to your liking, so definitely check both out!

[Keiva]

---

@Queso wrote:

Ah, I see. It does look like that particular form is going as wide as possible.

---

I'm having the same problem, but the field is stretched all the way across the page.  I've tried putting spacers and dividers on both sides of the field, but to no avail.  Is there really no way to fix this?  It seems pretty basic to be able to control side margins. =-\

[Queso]

Hello Keiva! The element width itself should be controllable as normal. Where are you seeing this form issue?

[Maple1]

Same question here!  Has anyone from Weebly been able to address this yet?

[Adam7]

To make the fields stretch 100% you'd need to do a little bit of CSS customization. If you provide a link to the page of your site the form one of our Community members could probably help, @Maple.

[Maple1]

The link is http://maplepfa.weebly.com/get-involved.html.  Please let me know if you can change the width of the form.  Thanks in advance!

[BJ5 · Accepted solution]

Try adding this to the Header Code field for the page your form is on:

<style>
	.wsite-form-field, .wsite-form-input
	{
		max-width:100% !important;
		width:100% !important;
	}
</style>

It won't show in the editor but should on the live site.

[NNLC]

Miraculous - thank you!!

[Maple1]

@BJ, Thanks so much!  It worked perfectly!!!

[Kitch1]

This did work for me.

Just to be clear...  Click the "Pages" link at the top of the page.  Click on the page that the form resides at in the left hand pane.  Then click "SEO Settings".  Paste the code in to the text box that says "HEADER CODE".  Then publish!

<style>
	.wsite-form-field, .wsite-form-input
	{
		max-width:100% !important;
		width:100% !important;
	}
</style>

Cheers.

Kitch.

[soupteacher]

Thank you Kit!! I have been trying to solve this for a long time -- now the survey looks awesome! 

[mikeyhayes]

Still can't figure it out. It generates a ton of text when I paste in. I just want a generic contact form to have a width of the entire screen. mchaelhunterhayes@gmail.com

[Danya13]

I've tried doing this but it's still not working! Are there any other suggestions to fix this issue?

[MarijkeD]

Worked for me too, yay!