Streaming live at 10am (PST)

Adding Contact Form to Hero Section


#1

I'm needing to add a contact form to my hero element and was hoping someone could provide a best practice for accomplishing the task.

https://preview.webflow.com/preview/bancabq-invest-guidance?preview=c3944d9e441a13d83615360a94e70122

Right now, I've built a separate div block (Side Menu) and placed it inside the Hero Overlay. As you can see it's covering up other elements in the Hero Container. And to get it to that position, I set the position as Fixed which may cause problems on tablet and below.

Any help would be greatly appreciated.

Greer


#2

And another issue with the current solution is that the Contact Us box stays fixed as you scroll covering up more content.


#3

Hi @chrisgreer33, quick question: is this contact form intended to be visible at all times?

(1) if so, we can try to rearrange some elements and use auto/% to make it responsive
(2) if not, we can work with some absolute positioning and interactions to make it appear when triggered

thx!


#4

It doesn't have to be visable all the time. But they want it in the hero section.


#5

Awesome, thanks! Try using absolute positioning. Also, you may want to add some hover of click interactions so the form can be viewable based on a trigger.

These links should help:
Demo Kit: https://preview.webflow.com/preview/demokit?preview=72388b288a26874be319ca1f7412d4eb

Interactions: http://interactions.webflow.com and http://help.webflow.com/interactions and https://webflow.com/design/interactions?preview=e645e218f9fa34829781bf96c365fee9

If you provide hi-fi designs on what you think will work, I can try to help build the interactions for you smile


#6

I appreciate the help Will.

They want it to sit in that hero section (no clicking to trigger). Does that make sense?


#7

I see, try adding the form into your hero container:

Then set the element to height:auto and float:right

This should get you pretty close smile


#8

Will try that. Thanks Will for the guidance.


#9

Will ... I think this will work, but notice that the nav bar doesn't scroll with the page. Is there a setting to make that happen?


#10

Hey @chrisgreer33 you will want to set the position of your nav bar to fixed. This will keep the nav element fixed to the top of the browser window.


#11

Hi @chrisgreer33, glad it was helpful. As for your Navbar, can you please create a new detailed post with the separate issue? Also, there are a lot of existing threads that discuss fixed nav bars that may already be helpful. Thanks in advance! smile


#12

Thanks for the help AlexN. Much appreciated.


#13