Jump to content

Move form button into header and replicate button

Recommended Posts

Site URL: https://www.crossfitulysses.co.uk/health-and-fitness-challenge

My 1st use of the forum so apoligies if its inthe wrong format

I found code to hide my banner (got that working)

1st- I would like to see if i can move my form button into the header

2nd- Its our only call to action button on that landing page, can i replicate it?

 

https://www.crossfitulysses.co.uk/health-and-fitness-challenge

 

website 1.png

Link to comment
  • Replies 6
  • Views 702
  • Created
  • Last Reply

Top Posters In This Topic

4 hours ago, crossfitulysses said:

I would like to move the button and when pressed it enables the form 

Is this then replicate-able  or do i need separate forms? 

You can use plugin in this guide.

In my guide, I create a new page. However, in this case, no need to create new page. 

You can read instructions.html file in plugin folder, you will see how they reused the form on that page.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 years later...

It's a great plug-in but I can't get the custom CSS to work for styling the font in the light box. I add the following code to 'design/Custom CSS' and it does nothing... weird.

#lightbox_contact-form_#block-yui_3_17_2_1_1675077402973_2763


/* Plugin Lightbox - Custom Styles */
html .c-lightbox__content-inner {
  font-family: montseratt;
  font-weight: bold;
  color: #004f59;
}
/* end Plugin Lightbox - Custom Styles */

I can see it when I use the inspect tool in Firefox but it's not taking effect. It seems to be overwritten by the section styles. I can't edit them as it will impact other sections

Link to comment

ok, i've tried loads of variations, it would seems as if there's a blind-spot in the plug-in code, whereby it ignores the CSS suggested in the instructions, for the default page styles when linking to a form element from the header CAT button. The solution I found was targeting the styles directly as per below:

.sqs-block-form .field-list .title {
  font-family: 'Montserrat Bold' !important;
  color: #004f59 !important;
}
 
.sqs-block-form .field-list .caption {
  font-family: 'Montserrat Regular' !important;
  color: #004f59 !important;
}
 
.sqs-block-form .field-list .option {
  font-family: 'Montserrat Regular' !important;
  color: #004f59 !important;
}
 
Whilst not a show stopper, I found it frustrating that it didn't work and the plug-in didn't appear to be tested and working for my execution which I can imagine is quite common...
Link to comment
On 2/1/2023 at 6:08 PM, sanchez_77 said:

ok, i've tried loads of variations, it would seems as if there's a blind-spot in the plug-in code, whereby it ignores the CSS suggested in the instructions, for the default page styles when linking to a form element from the header CAT button. The solution I found was targeting the styles directly as per below:

.sqs-block-form .field-list .title {
  font-family: 'Montserrat Bold' !important;
  color: #004f59 !important;
}
 
.sqs-block-form .field-list .caption {
  font-family: 'Montserrat Regular' !important;
  color: #004f59 !important;
}
 
.sqs-block-form .field-list .option {
  font-family: 'Montserrat Regular' !important;
  color: #004f59 !important;
}
 
Whilst not a show stopper, I found it frustrating that it didn't work and the plug-in didn't appear to be tested and working for my execution which I can imagine is quite common...

Can you share link to page where you have problem? We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.