shiDMV

The css below should work for your site. .form-wrapper .field-list .field select { font-family:'Silk Serif' !important; font-size: 10px; text-transform: uppercase; color: inherit; }

This worked beautifully, thank you so much!

Found a fix to this issue. See the updated solution below: /* Move Description - Add To Design > Custom CSS */ #Collection-ID { .form-wrapper .field-list .title, .form-wrapper .field-list .description { display: inline; } select { display: block; } .form-item.fields.phone { .description { float: left; margin-left: 119px; margin-top: -33px; margin-bottom: -300px; } }

Site URL: https://www.mmclassy.com/contact-us Hello wonderful people! I am currently trying to apply conditional logic to the "Event Type" select field on my form. I'd like the "Other, please specify" text field to be shown only if the "Other" option is selected. I assume this is possible because I've seen it done with the checkbox field in a video from 2019. Unfortunately I was not able to adapt this code to the select field. Does anyone know how to implement this feature?

Hey everyone, I've been troubleshooting the auto tab function for SQS and I'm facing the problem: I can't find a way to get the auto tab code to work with items in separate divs. I'm currently messing with the javascript in codepen (see here), but I just can't find a way to apply it to multiple divs. I've had to reduce the phone & date fields to one div each to make the javascript work on codepen but I can't make these changes on squarespace since dev mode isn't available on 7.1 sites. Does anyone know how to fix?

thanks for taking a look!

Okay, so I was able to move the description fields to the location that I wanted for the most part (phone field is wrong). The main problem I am having now is that it also moved the selection fields. Anyone know how to fix this so that it only moves the description fields? Here's the css I wrote to solve this issue: .form-wrapper .field-list .title, .form-wrapper .field-list .description { display: inline-block; }

You should have access to the custom css tab. You can add it there instead: Design > Custom CSS. #collection-6225f74254292938e894ed2e { .header-title-logo { display: none !important; } }

Here are the steps to achieve what you want: Remove any spacers on the left & right side of the image. Add this to Design > Custom CSS: #block-id{ margin-left: auto; margin-right: auto; width: 25%; } Replace "#block-id" with the image's block-id and adjust the width command to get the size that you want. If you'd like further help, we'd need you to set up a password for the site and share it here so we could help you better.

Try dragging the page to the not linked section.

Glad you were able to find a solution! I will delete my previous replies so that others can find the answer more quickly. Have a good night!

EDIT: NO LONGER WORKING WITH FORM UPDATE - 12/26/2023 How To Add Placeholder Text: Add the following to Settings > Advanced > Code Injection > Header. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add the following to Page Settings > Advanced > Page Header Code Injection for the page with the contact form. Replace the text "Replace With FormID" with the form id from inspect element. See how it looks below: <script> $( ( ) => { /* @CREEDON */ const dataFormId = 'Replace With FormID'; const firstNamePlaceholderText = 'First Name'; const lastNamePlaceholderText = 'Last Name'; const monthPlaceholderText = 'MM'; const dayPlaceholderText = 'DD'; const yearPlaceholderText = 'YYYY'; let $form = $( '[data-form-id="' + dataFormId + '"]' ); $( '.first-name input', $form ) .attr ( 'placeholder', firstNamePlaceholderText ); $( '.last-name input', $form ) .attr ( 'placeholder', lastNamePlaceholderText ); $( '.phone .three-digits input', $form ) .attr ( 'placeholder', '###' ); $( '.phone .three-digits input', $form ) .attr ( 'placeholder', '###' ); $( '.phone .four-digits input', $form ) .attr ( 'placeholder', '####' ); $( '.month input', $form ) .attr ( 'placeholder', monthPlaceholderText ); $( '.day input', $form ) .attr ( 'placeholder', dayPlaceholderText ); $( '.year input', $form ) .attr ( 'placeholder', yearPlaceholderText ); } ); </script> How To Remove Caption Text: Add to Design > Custom CSS. Replace "#Collection-ID" with the collection id for the page that you're targeting. /* Contact Form Caption Text - @shiDMV */ #Collection-ID { .form-wrapper .field-list .field .caption .caption-text { display: none; } } Download the Squarespace Collection/Block Identifier Chrome Extension to view a page's collection id. See how it looks below:

Try adding this into the page's settings: Page Settings > Advanced > Page Header Code Injection. <style> .header-title-logo { display:none !important; } </style>

Thanks for your response! I only need it for the fields that have “(optional)” under the title, but if its easier to move all of them then I’m okay with that as well.

Hey Madeleine, Here's another thread with a similar issue to yours that @tuanphan was helping with. Maybe one of his solutions will work for you. Link to thread Hope this helps!

Hey! I found an article from Rebecca Grace detailing how to fix your exact problem! I'll link it below. Website With Video & Custom CSS Squarespace Collection/Block Identifier Hope this helps!

Hey everyone! I'm having trouble with the formatting for the contact form. Is there a way to remove section captions from the contact form and add place holders for each of the boxes instead? Squarespace doesn't offer the option to do this in the config for the name, phone, & date sections. Any suggestions?

Site URL: https://www.mmclassy.com/contact-us Hey everyone! I was wondering if there was a way to move the form section descriptions. Right now they are under the section titles but I'd like to move them next to the titles (on the right side). Does anyone have any suggestions?

Site URL: https://www.mmclassy.com/contact-us Hey everyone! I have a contact form block on a site that I'm working on. Currently, when you go to fill out the form, you have to manually switch between each box in the phone number and date field. Is there a way that I can make it so that it automatically switches to the next box once the current one is full?