zoxoxu

Another solution that provide also a date picker

You can also change the text field with a tel field and custom pattern, you can't change the type with squarespace but you can override it. Create a normal txt input on your form copy the id of the input field (through right click -> inspect) open the settings of the page then advanced 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", "tel"); $('#YOUR-ID').attr("pattern", "[0-9]{11}"); }); </script> You can change the pattern to match what you prefer link

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 Create a normal txt input on your form copy the id of the input field (through right click -> inspect) open the settings of the page then advanced 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"...

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 Create a normal txt input on your form copy the id of the input field (through right click -> inspect) open the settings of the page then advanced 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"); }); </script> same with number field and others... A shame that Squarespace doesn't use the correct type for their forms, number should be input type="number" instead of type="text"...

Another (free) option: 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 Create a normal txt input on your form copy the id of the input field (through right click -> inspect) open the settings of the page then advanced 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"); }); </script> same with number field and others... A shame that Squarespace doesn't use the correct type for their forms, number should be input type="number" instead of type="text"...

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>

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>