Floating "Enquire" button which opens to lightbox form

Site URL: https://planpals.co.uk/corporateevents

Hi All,

Looking for some code help. I would like to add a floating "Enquire" button on the bottom right of all pages of my site which opens a contact form in a lightbox on click. 

Looked around and tried a few options I've seen but couldn't get any solutions to work for some reason.

Website: https://planpals.co.uk/corporateevents psw: Hann0v3r123*

Thanks for any help! 🙂

Catherine

you can add a form block as normal, and under the design section tick the "lightbox" bit. you'll be left with a button. you can edit the text on that screen to Enquire or whatever you want. I would add this in the footer probably so that it appears on every page.

Next go to the Custom CSS section in the main Design menu and copy in the following rules

footer button.lightbox-handle {
  position:fixed;
  right:25px;
  bottom:25px;
  z-index:999;
  opacity:0.7;
}

footer button.lightobx-handle {
  opacity:1;
}

this looks for a button that has been marked as a lightbox opener in the footer. (there will only be one, the one you've just put in) and then fixes it to the bottom right. The "position:fixed" is the bit that does the hard work. I've added an opacity filter to show you how you can have it react to the mouse hovering over it, but you can remove those opacity lines if you don't like the effect. 

It's currently 25px in from the bottom right, but you can edit that as you wish by modifying the right and bottom properties.

Hope that helps

46 minutes ago, iamdavehart said:

you can add a form block as normal, and under the design section tick the "lightbox" bit. you'll be left with a button. you can edit the text on that screen to Enquire or whatever you want. I would add this in the footer probably so that it appears on every page.

Next go to the Custom CSS section in the main Design menu and copy in the following rules

footer button.lightbox-handle {
  position:fixed;
  right:25px;
  bottom:25px;
  z-index:999;
  opacity:0.7;
}

footer button.lightobx-handle {
  opacity:1;
}

this looks for a button that has been marked as a lightbox opener in the footer. (there will only be one, the one you've just put in) and then fixes it to the bottom right. The "position:fixed" is the bit that does the hard work. I've added an opacity filter to show you how you can have it react to the mouse hovering over it, but you can remove those opacity lines if you don't like the effect. 

It's currently 25px in from the bottom right, but you can edit that as you wish by modifying the right and bottom properties.

Hope that helps

You absolute star!

Works perfectly thank you so so much!