nickstein

Hey @rwp & @tuanphan,

Thanks for all the help so far!

I'm trying to combine your codes so the .scroll-down indicator becomes clickable and smooth scrolls to the next section but it does not seem to be working.
I'm working on this site: florianbrooks.squarespace.com PW: florian

I've added the HTML to a code block, the CSS to custom DESIGN > CUSTOM CSS and the JS to page header code injection. I also tried amending the JS code from this:
$('.scroll-down').click(function() { $('html, body').animate({ scrollTop: $('section').next().offset().top }, 1000); }); to this:
<script> $('.scroll-down').click(function() { $('html, body').animate({ scrollTop: $('page-section').next().offset().top }, 1000); }); </script> Here is all the code I am using for this so far:
CSS:
/* === SCROLL BUTTON ================ */ .scroll-down::before { content: 'SCROLL'; position: absolute; transform: rotate(-45deg); top: -70%; left: -165%; } .scroll-down { position: absolute; left: 50%; bottom: 10px; display: block; text-align: center; font-size: 20px; z-index: 100; text-decoration: none; text-shadow: 0; width: 25px; height: 25px; border-bottom: 3px solid #D2B87A; border-right: 3px solid #D2B87A; z-index: 9; left: 50%; -webkit-transform: translate(-50%, 0%) rotate(45deg); -moz-transform: translate(-50%, 0%) rotate(45deg); transform: translate(-50%, 0%) rotate(45deg); -webkit-animation: fade_move_down 4s ease-in-out infinite; -moz-animation: fade_move_down 4s ease-in-out infinite; animation: fade_move_down 4s ease-in-out infinite; } /*animated scroll arrow animation*/ @-webkit-keyframes fade_move_down { 0% { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; } } @-moz-keyframes fade_move_down { 0% { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; } } @keyframes fade_move_down { 0% { transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { transform:translate(0,10px) rotate(45deg); opacity: 0; } } /* === END SCROLL BUTTON ============ */ HTML (in a code block):
<div class="scroll-down"></div> JS (in page header code injection):
<!-- JQUERY --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- END JQUERY --> <script> $('.scroll-down').click(function() { $('html, body').animate({ scrollTop: $('page-section').next().offset().top }, 1000); }); </script> Any help on this would be hugely appreciated! 

Thanks in advance 🙂
 

This might be of use to some of you:
 
https://studiomesa.co/sm-auto-variables

This might be of use to some of you:
 
https://studiomesa.co/sm-auto-variables

It's difficult to do this, it's also time consuming, so I guess no one has done this yet.
I do the same thing, write a list of CSS that are used a lot for templates (7.0 & 7.1), if you are interested I will share.

Hey y'all!
I've reached the point where I'm very comfortable with my CSS knowledge, but feel limited with my broken understanding of the script languages. I've studied a bit of info off of w3schools, but I am looking for recommendations for any resources or courses that do a thorough job of explaining java/jquery - and then understanding how to apply it in a context such as SS.
 
TIA!

@tuanphan I used your code to make it a button to scroll to the next section. Save this for later when others need it.
https://jsfiddle.net/pelletr1/ae1o3qzg/10/

Add to Code Block
<div class="scroll-down"></div> <style> .scroll-down { position: absolute; left: 50%; bottom: 10px; display: block; text-align: center; font-size: 20px; z-index: 100; text-decoration: none; text-shadow: 0; width: 13px; height: 13px; border-bottom: 2px solid red; border-right: 2px solid red; z-index: 9; left: 50%; -webkit-transform: translate(-50%, 0%) rotate(45deg); -moz-transform: translate(-50%, 0%) rotate(45deg); transform: translate(-50%, 0%) rotate(45deg); -webkit-animation: fade_move_down 4s ease-in-out infinite; -moz-animation: fade_move_down 4s ease-in-out infinite; animation: fade_move_down 4s ease-in-out infinite; } /*animated scroll arrow animation*/ @-webkit-keyframes fade_move_down { 0% { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; } } @-moz-keyframes fade_move_down { 0% { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; } } @keyframes fade_move_down { 0% { transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { transform:translate(0,10px) rotate(45deg); opacity: 0; } } </style>  

https://codepen.io/r-w-p/pen/ZEQwMoN
I moved my stuff to code pen, the new link is here.

With the new members areas and the Portfolio section being  a useful solution to hosting courses and modules, this really needs updating to reflect these changes.

Hey @tuanphan,

Thanks for getting back to me.
I got this to work with help from @bangank36 on a different thread.

Site: drirykl.squarespace.com
PW: drirykl
and the code that worked was:

 
.header-title-logo { opacity: 0; position: relative; top: -10vh; transition: all 0.75s; } .shrink .header-title-logo { opacity: 1; position: relative; top: 0; }  

Hey @WillMyers,

is there a way that this can change the date format in the email that's sent when they submit the form too?

or would that still arrive as MM/DD/YYYY?

Great Works!
Love it.

Hi all,,
I have just launched a new SqSp website and have come up with an issue for my customer.   Their old website contact form was mainly used for quotations and the name of the person requesting the quote was in the subject line.  It was therefore easy to scan the inbox to see different requests by prospective customer.
SqSp just has the subject as the name of the contact form and this does not vary by each contact, they all look the same in the inbox.  It looks like this is the topic of this forum post also.
So is is at all possible to have the name of the person using the contact form to be part of the subject line?  I understand that the From field has to be squarespace since that is where the email is coming from and has to be like this to avoid spam filters.
Paul - I understand the new spreadsheet line / create new email option but this adds a degree of complexity to the solution and is a potential point of failure which you would not want for people requesting quotes.
Thanks for any input on this one.
 
 

Hey, I've seen this pop up a few times. I think I've got a fix that will do it:
<script> function switchDDMM() { let fields = document.querySelectorAll('.field.day.two-digits'); fields.forEach(field => { field.parentNode.insertBefore(field, field.previousElementSibling) }) } function switchMMDD(form) { let fields = form.querySelectorAll('.field.month.two-digits'); fields.forEach(field => { field.parentNode.insertBefore(field, field.previousElementSibling) }) } function switchOnSubmit(){ let submitBtnArr = document.querySelectorAll('.form-button-wrapper'); submitBtnArr.forEach(submitBtn => { let form = submitBtn.closest('.form-block'); submitBtn.addEventListener('click', function(){ switchMMDD(form); }) }) } window.addEventListener('load', function(){ switchDDMM(); switchOnSubmit(); }) </script> <style> .form-item.fields.date.error .field.month{ left: calc(3.5rem + 2%) } .form-item.fields.date.error .field.day{ left: calc(-3.5rem - 2%) } </style> I've got a tutorial that goes over how I built this. You can check it out here: https://www.will-myers.com/articles/switching-the-day-and-month-field-on-squarespace-forms

Looks amazing!

Looks amazing!

Hey @tuanphan,
Thanks so much - this worked great for me too!
Is it possible to do this so the logo fades/slides in gradually?

Hey @tuanphan,

Thanks for getting back to me.
I got this to work with help from @bangank36 on a different thread.

Site: drirykl.squarespace.com
PW: drirykl
and the code that worked was:

 
.header-title-logo { opacity: 0; position: relative; top: -10vh; transition: all 0.75s; } .shrink .header-title-logo { opacity: 1; position: relative; top: 0; }  

Hi. Can you share link to your site? WE can check easier

Add to Home > Design > Custom CSS
.header-title-logo img { visibility: hidden; } .shrink .header-title-logo img { visibility: visible; }  

Add to Home > Design > Custom CSS
.lightbox-content .form-wrapper * { opacity: 1 !important; }