- This topic has 17 replies, 3 voices, and was last updated 4 years ago by David.
-
AuthorPosts
-
March 24, 2020 at 9:38 am #1208692Benny
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 DeveloperHi 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.
March 25, 2020 at 4:10 am #1209342BennyIt 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 #1209356BennyIt 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 SupportHi there,
did you find a solution?
March 25, 2020 at 7:44 am #1209548BennyNot 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 SupportSorry 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 #1209772BennyI 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 SupportCan you remove the sidebar and hook the form back in as you had it before.
March 25, 2020 at 9:11 am #1209794BennyDone. 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;
}March 25, 2020 at 4:32 pm #1210170TomLead DeveloperLead DeveloperJust 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 setposition: 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.
March 26, 2020 at 3:15 am #1210431DavidStaffCustomer SupportYep 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 ?March 26, 2020 at 3:18 am #1210434BennyWould be nice. Otherwise the content is covered.
March 26, 2020 at 3:49 am #1210477DavidStaffCustomer SupportThe 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.
March 26, 2020 at 4:03 am #1210492BennyThis is working now. I set the padding of the container left and right to 220px so the text isnt covered on smaller screens right?
-
AuthorPosts
- You must be logged in to reply to this topic.