Archived topic
Floating Chat Form
17 replies · Started by Benny on March 24, 2020
Hey there, at the moment i use contact form 7 as a sticky widget in the right sidebar but i wanted to use Gutenberg Groups fullwidth and with the sidebar this isn't possible. So my question is, is it possible to put the contact form above the actual website with z-index or something. Or is there even an other option. Maybe other contact plugins?
My preferred solution would be a floating contact form maybe even without plugin (lesser code, faster website) just with code in a code snippet or as a hook or something.
Thanks for this awesome theme and for the support!
Hi there,
Do you have any examples of the look you're going for?
You could create a Hook Element with the contact form HTML inside of it: https://docs.generatepress.com/article/hooks-element-overview/
Then you could use CSS to make it float above the site, but it depends on where you'd want it positioned.
It could actually look like my sidebar contact form at the moment but without the sidebar. I will have a look into the hook overview. Any idea which location etc. to choose?
Thanks for answering :)
It is nearly working here --> https://fragbenny.de/impressum/ but at the moment the contact form is in the content area (which has a width of 1280px). Which location is the best to put it, that it is hovering near the right edge (outside of the content box)?
Hi there,
did you find a solution?
Not entirely. I would like to move the Contact Form out of the content area near to the right edge. In which location do i have to put the shortcode to accomplish this?
Sorry i was looking at your home page where the form is inside the sidebar - which is the logical place for it - to compensate for the fullwidth sections you need think about how do stop the floating element from overlapping your content.
Might be easier if you can setup a page with some full width containers, leaving the floating element where it is for now. Then we can look at ways to float it and to adjust the inner content width to avoid content being hidden.
I put it back to normal and inserted a full width group block on https://fragbenny.de/impressum/. What should i do now? :D
Can you remove the sidebar and hook the form back in as you had it before.
Done. What to do next?
The Element is hooked into before_main_content and this is the css
.kontaktform_float {
width: 20%;
float: right;
background-color: #00a698;
position: sticky;
position: -webkit-sticky;
top: 10%;
z-index: +1;
padding: 15px;
}
Just took a quick look at this. Since it's using position: sticky, I'm not sure it's possible to move it over all the way to the right.. You could look at using javascript to set position: fixed once the element hits the top of the screen, then you could force it to the right, but even that is going to overlap some content, especially on smaller screens.
I'll leave this assigned to David in case he has any ideas.
Yep tricky one.
Question - is the Contact form in the correct position ? Or does it need to be aligned to the edge of the browser viewport ?
Would be nice. Otherwise the content is covered.
The alternative is we reduce the width of the content so it is not covered by the form.
This is going to require some trial and error. So could you:
1. Set the Page Builder Container to Full Width.
https://docs.generatepress.com/article/page-builder-container/
2. Edit your page, and deselect the Full Width option on your Group Block. It will automatically fill the screen width now.
3. Place the rest of your content inside a Group Block.
Then let me know so i can look at the CSS required to make this work.
This is working now. I set the padding of the container left and right to 220px so the text isnt covered on smaller screens right?
