[Resolved] Floating Chat Form

Home Forums Support [Resolved] Floating Chat Form

Home Forums Support Floating Chat Form

  • This topic has 17 replies, 3 voices, and was last updated 4 years ago by David.
Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1208692
    Benny

    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!

    #1209064
    Tom
    Lead Developer
    Lead Developer

    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.

    #1209342
    Benny

    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 ๐Ÿ™‚

    #1209356
    Benny

    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)?

    #1209507
    David
    Staff
    Customer Support

    Hi there,

    did you find a solution?

    #1209548
    Benny

    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?

    #1209731
    David
    Staff
    Customer 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.

    #1209772
    Benny

    I put it back to normal and inserted a full width group block on https://fragbenny.de/impressum/. What should i do now? ๐Ÿ˜€

    #1209775
    David
    Staff
    Customer Support

    Can you remove the sidebar and hook the form back in as you had it before.

    #1209794
    Benny

    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;
    }

    #1210170
    Tom
    Lead Developer
    Lead Developer

    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.

    #1210431
    David
    Staff
    Customer Support

    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 ?

    #1210434
    Benny

    Would be nice. Otherwise the content is covered.

    #1210477
    David
    Staff
    Customer 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.
    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.

    #1210492
    Benny

    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?

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.