Jump to content

Why does the submit option become invisible with Lightbox form?

Go to solution Solved by Ziggy,

Recommended Posts

Can you share your website URL and the page this form is on? Do you have any code, CSS, or anything else on the website or page?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

It honestly looks like the button is there, but has a transparent background, white border and white text on a white background.

If you're using CSS to edit the "open form" button, that may be affecting the "submit" button too as they share overlapping classes.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Hi Ziggy Ive checked the CSS and this is all the code I have, I'm still not to sure what's causing this problem?

 

/* Nav item hover color */
.header-nav-item a:hover {
    color: hsl(0, 0%, 60%) !important;
    transition-duration: 0.4s;
}

font-family: john-doe, sans-serif;

font-weight: 700;

font-style: normal;

.sqs-announcement-bar-close { display: none !important }

.primary-button-shape-rounded #siteWrapper:not(.with-button-variants) .sqs-button-element--secondary, .primary-button-shape-rounded #siteWrapper:not(.with-button-variants) .sqs-button-element--tertiary {
    background-color: #18DEE0 !important;
}
.cart-checkout button {
    background-color: #000000 !important;
}

Link to comment

That's very strange, I would suggest looking through the color settings in the design tab and see if there's a button color and text color both set to white for this button. If not I can likely find you some code to fix it, but that should be a "last resort".

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
16 minutes ago, BradSB92 said:

I have seen a few people on here have the same issue, it seems to be a common problem when operating the form as a light box on SS7.1

Very recently? If so it could be a temporary bug.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

Try adding thsi Custom CSS:

.primary-button-style-outline .sqs-modal-lightbox .sqs-modal-lightbox-content .sqs-button-element--primary {
  color:#000 !important;
  border-color:#000 !important;
  &:hover {
    background:#000 !important;
    color:#fff !important;
  }
}
  

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.