Sidebars are driving me crazy

At a most basic level, wrap the form in a <div> tag, give it an ID or class, and in your custom CSS make sure to target that div via the ID or class and give it position: fixed; The div is taken out of the document flow and will be at a “fixed” position in relationship to the rest of the browser window, which means it will follow users down the page. Be aware that this may cause the div/form to appear to float over other content.

Yeah it is floating over the content of my webpage. I am trying to attach it to the side of the margin, like what many pages do with social media icons. do you know how to do this?

Did you try what @bemdesign suggested? I don’t see the code anywhere on your site.

I used a widget at first and have been trying to figure out what he means. I am using contact form 7 and i do not know how to change the code so i get it out of the sidebar

If you see the page i am talking about you will see how the dark brown scrolls down and this is where all my content is, i am trying to get the contact form out of this section and onto the light brown section. you have to understand i am new at this but willing to learn.

thanks

The widget that contains your contact form has an ID of text-15, so you can target just that widget with #text-15. If your theme has a built-in custom CSS option, use it; otherwise, get a custom CSS plugin and try this code:

#text-15 {
  position: fixed;
  top: 25%;
  right: 0;
  z-index: 20;
}

SWEET!!! it worked and looked really nice but on my mobile site it was floating over the content on my page.

is there code that lets it be a “contact us” button on the mobile site that when clicked the form opens up and on the full version it is the form?

Yes, but it would require some major surgery, a bit beyond the scope of this forum. You might wish to hire some assistance at https://jobs.wordpress.net/.

Another option would be to keep the widget the way it is on mobile and only switch to the floating version on larger screens using media queries:

@media screen and (min-width: 600px) {
  #text-15 {
    position: fixed;
    top: 25%;
    right: 0;
    z-index: 20;
  }
}

This code tells the browser that when the window is 600 pixels wide or larger, set the text widget to a fixed position, floating above the rest of the site. When the browser is 599 pixels wide or smaller, the widget will stay where it was before.

Ok great that did it thanks so much for the help. I will just change the pixel width to the largest tablet so that it does not float over the content.

If i want to change the width of the contact form i will do this in by adding what code? would like to make it narrower

If I change the code to make it narrower it is going to change the size of it on the smaller screens as well, correct, not just when it is floating on the side.

You can add styles for different device widths through the use of Media Queries in CSS
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Hey Andrew i checked out the link there is a ton of info on that. I still did not notice how i would make the contact form smaller only when it is out of the sidebar

any suggestions?