My client has asked me to make a sidebar on his gravity forms page similar to the one on this page (select Domestic and then select any Cleaning Service and the sidebar will appear).
I’m guessing that it’s a conditional HTML element, but I’m not sure how to add it as a sidebar, or if it’s done using an add on, or through CSS. I’ve looked all over the Internet but I can’t find anything that can help so I hope you guys can figure it out. Any hints and advice are most appreciated.
Hi Michael. From what I could tell in using that form, that sidebar content updates when you make a selection in the form. The content in that box does not change as you make additional selections in the form. If that’s the case, you could add HTML fields to the form, and enter whatever content you like into them. You can show one or the other conditionally based on the main selection in the form.
The issue then is positioning them. You can use absolute positioning with CSS to put that HTML field somewhere else on the page. We do something like that with the floating Total field in this demo form:
Thanks for getting back to me. I get the part using HTML and conditionals to display an HTML section. I just wasn’t sure if there was a feature that let developers add a sidebar section.
I like the flaoting total, which actually migth be better thant he fixed section.
I’m probably overthinking this, but…
I noticed in the link I sent that it had a sidebar div. Wouldn’t absolute positioning mean I wouldn’t need that div? If I created a sidebar div then I’d be able to place the HTML field in there.
But then the question is: how do I add those divs inside the page/post? Would I have to do that in the page template file?
For the floating box you sent, how would I add a field to the box, similar to the total field you show.
There is no feature in Gravity Forms that can affect the content outside the form. That floating total field is the built in Gravity Forms total field, absolutely positioned in the corner of the page. as far as creating a div or space in the post or page or sidebar to hold your HTML content, I don’t think that’s necessary. If you view the pizza demo you can view the CSS which sticks that field to the corner. You will use similar CSS to stick your HTML field (whichever HTML field it is, conditionally) to the page wherever you like. It’s a hack to make it work like that, but it does work.
The CSS that sticks the total field up there can be found at the link at the bottom of that demo, or here.
Try that method without adding anything special to the page or post or div or widget.
This looks like a great feature. What’s the best place to add the css you mention in the link to add custom positioning? Do you do that within the plugin settings, or do you add it to the theme or page css?
