Contact Form/Newsletter Form on Lock Screen (Squarespace)

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


#4. Customize

If you want to change order to: Password Icon – Password Field – Form, add this code into Lock Page

.sqs-slide-wrapper[data-slide-type="lock-screen"] {
    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;

and you will have


What a gem!! @tuanphan a huge thank you for sharing your wisdom with us, I’m sure it will come in handy for a lot of users! :fire: