Jump to content

Is there a way to change the size of form fields?

Go to solution Solved by Guest,

Recommended Posts

The form boxes/fields are generally pretty large. I was wondering if there was any way to make them smaller since there is no other sizing options? Thanks!

Edited by cyclone7
Tidy
Link to comment
  • 8 months later...
  • Solution

Adjusting the height, width, and alignment of the whole form, add to the Custom CSS Editor:


form {
 width: 550px;
 height: 450px;
 margin: auto;
 position: relative;
}

CSS for adjusting the height and width of your input fields:


input {
 width: 375px;
 height: 25px;
}

Of course, you can use whatever dimensions work best for you.

Edited by Guest
Link to comment
  • 9 months later...

Having problems with part of this code in Internet Explorer:


input {
 width: 375px;
 height: 25px;
}

Internet Explorer won’t allow me to type in the input boxes when I adjust the height to 25px. Works fine if it’s 30px, but then the text isn’t centered in the box.

Edited by ehermesman
Link to comment
  • 1 month later...

You can use the code in the page with the form block like this


<style>
form {
width:100%;
height:450px;
margin:auto;
position:relative;
}
 input {
width:100%;
height: 25px;
 }
</style> 

Link to comment
  • 9 months later...
  • 2 months later...
  • 5 months later...
  • 4 weeks later...
  • 2 years later...
  • 3 weeks later...
  • 1 year later...
On 8/27/2020 at 6:35 AM, VRajic said:

I've created a form and am using a 'Select' field but it is appearing tiny on my form! How can I change the size?

Can you share link to page where you use form? We can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 9 months later...
On 3/7/2014 at 4:49 PM, Guest said:

Adjusting the height, width, and alignment of the whole form, add to the Custom CSS Editor:


 

form {
 width: 550px;
 height: 450px;
 margin: auto;
 position: relative;
}

 

 

CSS for adjusting the height and width of your input fields:


 

input {
 width: 375px;
 height: 25px;
}

 

 

Of course, you can use whatever dimensions work best for you.

Great, thanks!

Link to comment
  • 8 months later...
On 8/16/2016 at 10:04 PM, HiFiGuy528 said:

bump... How do I do this if I only want the "Message" box bigger? This seems to change all the boxes. Thanks for your help. ~ Mike

Sorry for the necro, but since I was looking for a way to do this and figured it out I reckoned I'd add my solution here. You have to find the identifier for the specific input field by looking through the Developer Tools Interface (F12 in your browser on your site, not in the squarespace UI). The line I was looking for looked like this: 

<input class="field-element" type="text" id="number-yui_3_17_2_1_1590473097859_54344-field" spellcheck="false" aria-required="true">

Go watch a tutorial on how to use the Dev Tools Interface if this is your first time, youtube probably has loads of them.

After finding the code for your specific input element, copy the id of it - in my case that would be "number-yui_3_17_2_1_1590473097859_54344-field". Then, add Custom CSS to the page with the form like in my example: 

#number-yui_3_17_2_1_1590473097859_54344-field 
{
  width: 200px;
} 

You can add whatever styling you want inside the brackets, mine just sets the width of the input field to 200 pixels.

Link to comment
  • 1 year later...

Hello,

A client wants the contact form to fit into the space on desktop so they don't have to scroll, I can only adjust the width of the form and not the height if I use this:

form {
 width: 550px;
 height: 450px;
 margin: auto;
 position: relative;
}

and I've tried using this and adjusting the input field size but it doesn't change at all:

input {
 width: 375px;
 height: 25px;
}

Is there any reason why this might be happening or can anyone advise? They also want to do this on other pages, but I'm struggling to reduce the content so it all fits on one page.  

Link to comment
44 minutes ago, Ellagrace said:

Hello,

A client wants the contact form to fit into the space on desktop so they don't have to scroll, I can only adjust the width of the form and not the height if I use this:

form {
 width: 550px;
 height: 450px;
 margin: auto;
 position: relative;
}

and I've tried using this and adjusting the input field size but it doesn't change at all:

input {
 width: 375px;
 height: 25px;
}

Is there any reason why this might be happening or can anyone advise? They also want to do this on other pages, but I'm struggling to reduce the content so it all fits on one page.  

Can you share link to a page where you use form? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.