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!