Need help formatting / customizing a form

Hi folks,

So I'm using the Bedford template, and creating a form for people to register for a daycare facility. You can see it in progress here: https://ajpreschool.squarespace.com/get-started/I would like to tweak a few things so it's not so gigantic and unwieldy. Particularly, how might I:

1. Adjust the overall height and/or vertical space between form elements
2. Adjust border / fill color of fields
3. Adjust font / styling for the section dividers to make more prominent
4. Adjust form element widths / arrange it so that every text input field doesn't take up the entire width. Would be nice to have, say, 3 shorter fields all on one line (like the name field automatically does)
5. Make my dropdown box style not look like it's from 1992 (have similar size /style as form fields vs. browser default- see last field)
6. Arrange radio button icons multiple across in a row vs. 1 per
7. Is there a way to make a selection that exposes additional fields - for example have one parent info area appear by default, with a button that says "Add parent 2" and then show all relevant fields for that parent. There will also be an area for siblings where it would be nice to add as many as they have specifically
8. Have a second address field block that has a checkbox for "Same address as first" (for multiple parents)
9. Have a "View and accept parent agreement" button or something that pops up a lightbox which they have to click "Accept" (similar to a Terms and conditions)

Any and all help appreciated. Suggestions welcome. Thanks!

I have similar things I would like to accomplish on the check forms. Any help is appreciated.

Hi @bhoran and @Batkinson ,

According to the various points you want changed,

For 1, 2, 3, and 6... Paste this into your Custom CSS

 .form-wrapper .field-list .field .field-element {
      padding: 0px !important;    /* For #1 */
      border: 1px solid #336699 !important;  /*For #2's border*/
      background: #000 !important;  /*For #2's fill*/
      font-family: Arial !important; /*For #3's font */
 }

.radio .option {
 float: left !important;    /*For #6 radio buttons */
 padding-right: 15px; 
 }

1. Padding refers to the space around each form element. Increase this value as you please.
2. Border refers to that grey border around each form box. 1px is the stroke weight (which you can increase), solid refers to the solid stroke, and the colour #369 is the stroke colour (which you can change with your own web colour code. I've currently set it to a dark blue.)Background refers to the fill colour of the form box. Again, you can change it to whatever colour you like by switching the hex code. I've currently set it to black to make it prominent for you to see.
3. Font-family refers to whatever font you'd like your forms to be in. You can now change it to whatever you like, but do make sure it's a Google or Typekit font. However, this font only applies to the text inside your message box. The fonts for the form labels follow the existing fonts on your site, which can be changed in the Style Editor.
4. You could consider creating several form blocks and placing them side by side.
5. If you're referring to the 'Select' form field, sorry, but this is the standard design that varies from browser to browser. Any further customisation would have to require jQuery code injections.
6. Float gets your options to line up horizontally. Padding-right refers to the space between each item. You can increase/ decrease this amount as you please.
7. Sorry, but I do not know of such a feature from Squarespace.
8. You could duplicate a form block? Sorry, I don't really understand what you're trying to say in this point.
9. You could consider using the 'Checkbox' option and make it into a required field.

I know this reply is late, but hope it helps!

Hi @sas1403

Thanks for the advice above. I tried to use it to style a form that I have embedded from my email marketing service (Drip) using their HTML code in the code block, but I can't get the changes to work.

Can this code only work when inserted into a form generated in squarespace, or is it possible to also use it sitewide to standardise all forms? I tried putting it into my sitewide custom CSS but it did nothing.

I can't see how I can add it to the code block because the rest of the code is in HTML. It doesn't look like I can put the two different kinds of code in. Grateful for any workarounds you can suggest!

I'm wanting to change only the padding and background colour.

ThanksLiss

Hi Liss, I'm facing the same issue integrating with Drip and wondering if you were ever able to get this resolved? If so, what did you do?

@sas1403 Can you provide code (mentor template) to make the phone and email fields appear "float" together on single line?

Hi

I'm new to squarespace and I'm trying to get a very long list of check box choices side by side in a form.  I tried your code, which felt like an immense victory, by removing the radio bit and just using the .option bit.  The trouble is, the choices are all different lengths, which means that the padding makes the ones on the right a bit of a mess.  also, it is taking option2 and putting it next to option one.  I want to split the list from the middle as it is a list of dates and events.  Is there a way to anchor  the right hand ones to the right so they'll all be in a straight vertical line?  if it's possible I'd also like to put a divider in for each month to make it easier for the user to find things.  Is this too complicated?  Thanks in advance.