Buy me a coffee

Lock Screen: Custom Form

To add custom form on Lock Screen, you can follow these steps.

In this guide, I will use a custom form widget, with other forms, you can repeat similar.

#1. Create a form

Access form widget site and scroll down > Choose any template > Continue  with this template


Starting design your form. You can do it manually or using AI Form feature (just describe your form, then the tool will automatically create form for you)


#2. Get Form Embed Code

If you’ve design form, you can click Publish to get embed code.

Maybe the tool will ask you to choose a Plan, select Free Plan and continue.


#3. Add Form embed code into 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


Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to:
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder