- This topic has 17 replies, 3 voices, and was last updated 8 months, 2 weeks ago by David.
March 24, 2020 at 9:38 am #1208692fragbenny
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!March 24, 2020 at 6:20 pm #1209064TomLead DeveloperLead Developer
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.March 25, 2020 at 4:10 am #1209342fragbenny
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 🙂March 25, 2020 at 4:30 am #1209356fragbenny
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)?March 25, 2020 at 7:11 am #1209507DavidStaffCustomer SupportMarch 25, 2020 at 7:44 am #1209548fragbenny
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?March 25, 2020 at 8:17 am #1209731DavidStaffCustomer Support
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.March 25, 2020 at 8:57 am #1209772fragbenny
I put it back to normal and inserted a full width group block on https://fragbenny.de/impressum/. What should i do now? 😀March 25, 2020 at 8:59 am #1209775DavidStaffCustomer SupportMarch 25, 2020 at 9:11 am #1209794fragbenny
Done. What to do next?
The Element is hooked into before_main_content and this is the css
}March 25, 2020 at 4:32 pm #1210170TomLead DeveloperLead Developer
Just took a quick look at this. Since it’s using
position: fixedonce 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.March 26, 2020 at 3:15 am #1210431DavidStaffCustomer SupportMarch 26, 2020 at 3:18 am #1210434fragbenny
Would be nice. Otherwise the content is covered.March 26, 2020 at 3:49 am #1210477DavidStaffCustomer Support
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.
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.March 26, 2020 at 4:03 am #1210492fragbenny
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?
- You must be logged in to reply to this topic.