Move form button into header and replicate button

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

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

Clicking header button, and show form? or?

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? 

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.

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

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:

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