Removing and Rearranging Specific Elements of Forms

Site URL: https://www.jaxmariephotography.com

Password: fbla2020

I am using the Zion template under Photography

Hi, I was wondering if there was anyway I could rearrange the structure of my form under "Appointments." I would like to remove the "Second" field under "Time" and move the entire "Time" field so it sits next to (adjacent) to the "Date" field. Preferably, it would look something like the second image. Any help with custom CSS would be greatly appreciated!

22 minutes ago, jaxnoel said:

Site URL: https://www.jaxmariephotography.com

Password: fbla2020

I am using the Zion template under Photography

Hi, I was wondering if there was anyway I could rearrange the structure of my form under "Appointments." I would like to remove the "Second" field under "Time" and move the entire "Time" field so it sits next to (adjacent) to the "Date" field. Preferably, it would look something like the second image. Any help with custom CSS would be greatly appreciated!

This css can help re-arrange, but you can not remove the second input as it is required. I can say Squarespace date time input is silly, so I suggest to find a datepicker plugin if it not fit your need 

#block-4a87ef8163ec7daa5245 .form-item.date {
  width: 50%;
  float: left
}
#block-4a87ef8163ec7daa5245 .form-item.time {
  width: 50%;
  float: left
}

8 minutes ago, bangank36 said:

This css can help re-arrange, but you can not remove the second input as it is required. I can say Squarespace date time input is silly, so I suggest to find a datepicker plugin if it not fit your need 

#block-4a87ef8163ec7daa5245 .form-item.date {
  width: 50%;
  float: left
}
#block-4a87ef8163ec7daa5245 .form-item.time {
  width: 50%;
  float: left
}

It works but is there any way to indent the "Date" field so it lines up with the "Project Description" and "Phone" Field above and below the form? Thank you so much for your help!

1 minute ago, jaxnoel said:

It works but is there any way to indent the "Date" field so it lines up with the "Project Description" and "Phone" Field above and below the form? Thank you so much for your help!

#block-4a87ef8163ec7daa5245 .form-item.date {
    width: 50%;
    float: left;
    padding-left: 10px;
}

9 minutes ago, bangank36 said:

#block-4a87ef8163ec7daa5245 .form-item.date {
    width: 50%;
    float: left;
    padding-left: 10px;
}

 

Thanks again! One last question. How do I make the button for submitting smaller? 

3 minutes ago, jaxnoel said:

Thanks again! One last question. How do I make the button for submitting smaller? 

#block-4a87ef8163ec7daa5245 input[type="submit"] {
  padding: 0.6em 1.6em;
}

1 minute ago, bangank36 said:

#block-4a87ef8163ec7daa5245 input[type="submit"] {
  padding: 0.6em 1.6em;
}

 

Hi, sorry for bothering you again but is there any way to make this so it applies sitewide? Thanks again for your help, I really appreciate it.

56 minutes ago, jaxnoel said:

Hi, sorry for bothering you again but is there any way to make this so it applies sitewide? Thanks again for your help, I really appreciate it.

hmm, you mean the submit button or the form fields

7 minutes ago, bangank36 said:

hmm, you mean the submit button or the form fields

The submit button, sorry for the confusion! 

input[type="submit"] {
  padding: 0.6em 1.6em !important;
}

17 minutes ago, bangank36 said:

input[type="submit"] {
  padding: 0.6em 1.6em !important;
}

 

Thanks again!

How do you identify the block to target?

On 8/27/2023 at 11:33 AM, barrdzen said:

How do you identify the block to target?

Check out Heather Tovey's most excellent looking Squarespace ID Finder.

Or, you can learn how to use browser developer tools. Read on web to learn.