Last week some members emailed me with this question, so I wrote a quick guide, which helps you to insert Elfsight Form into Lock Screen (you can do the same thing, if you want to insert in Cart Page, Order Confirmation Page).
#1. Create a Form with Form Builder or Newsletter Form
#2. Get Form Embed Code
These two steps, there are very detailed instructions on the Elfsight site, so I won’t mention it anymore
#3. Add Form Embed Code to Squarespace
You can access Settings > Advanced > Code Injection > Lock Page > Paste the embed code
result
#4. Customize
If you want to change order to: Password Icon – Password Field – Form, add this code into Lock Page
<style>
.sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slice-group.group-content:not(.align-center) {
display: flex;
flex-direction: column-reverse;
}
.sqs-slide-wrapper[data-slide-type="lock-screen"] [data-slice-type="lock"]:not([data-content-empty]) {
order: 3;
}
a[href*="online-form-builder"] {opacity: 0 !important;}
button {
width: 100% !important;
height: 100px !important;
position: relative;
bottom: -50px;
z-index: 999999999999999999999999999999;
}
[class*="elfsight-app"] {
margin-top: 50px;
}
</style>
and you will have
