Aligning forms title to the form fields

Site URL: https://www.frenchcancan.nz/test

Hi,

I would like to have smaller number field (30% width for example) and the title of these field in front of it not above.

I also tried to change the date picker to have DD/MM/YY instead of MM/DD/YY but my description is now at the wrong position...

Can someone help me?

Thank you

page: test form

Code used so far:

<style>
 
.form-wrapper .date {
  display: flex;
  }
.form-wrapper .date .description {
  display: block;
  }

.form-wrapper .day {
  order: -1;
  }
  
.form-wrapper .field-list .title{
  }

.form-wrapper .field-list .field-element{

  }
</style>

Hi,

Do you have a photo of desired layout?

Hi tuanphan,

I have solved all my problems

date order corrected with description at the correct place

title of the field box on the side instead of on the top

New code:

<style>
 
.form-wrapper  {
  width: 50%;
  padding-left: 25%;
  }
  
.form-wrapper  .form-item{
  padding: 2px !important;
  margin: 2px !important;
  }
.form-wrapper .date {
  display: flex;
  flex-flow: row wrap;
  }
.form-wrapper .date .description {
  display: block;
  flex: 0 100%;
  order:0;
  }

.form-wrapper .day {
  display: inline;
  order: 1;
  }
.form-wrapper .month {
  display: inline;
  order: 2;
  }
.form-wrapper .year {
  display: inline;
  order: 3;
  }

  
.form-wrapper .number{
  display: flex;
  }
  
  .form-wrapper .number .title{
    display: inline;
  	text-align: right;
    padding: 15px;
    width: 200px;
    float: left !important;
  }
  
  .form-wrapper .number .field-element{
    display: inline;
    width: 50px !important;
	
  }
  .form-wrapper .form-button-wrapper{
    text-align: right;
  }
</style>

I ended up using a date picker instead of the by default date form input from squarespace.

If any one is interested:

HTML forms have a type of input called date that come by default with a date picker, you can't change the type with squarespace but you can override it. Not all the old version of browsers will support this form input - link

1. Create a normal txt input on your form
2. copy the id of the input field (through right click -> inspect)
3. open the settings of the page then advanced
4. paste the follow code and replace YOUR-ID with the ID you copied

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
  $( document ).ready(function() {
    $('#YOUR-ID').attr("type", "date");
    $('.field-element[id^="number"]').attr("type", "number");
	});
</script>

Also added a replacement of all the txt fields that should be number into number fields

A shame that Squarespace doesn't use the correct type for their forms, number should be input type="number" instead of type="text"...