Contact form overlaying header image

[larryboulder]

I’m building a site and would like to add a contact form on top of the header image. I looked in the forums, but was unable to find an anything relevant to my situation.

I’m using the Contact Form 7 plug-in to handle the form.

Here’s the prototype I’m building: http://full.boulderwordpress.com/

Thanks!

[scrambler]

It would be possible to overlay it with custom CSS, but what you will find out is that it will be a non responsive solution.

As the browser gets smaller, the header image will shrink and there will not be enough space to contain the contact form which will then overlap what is below the header.

If you want to try, put the code for your contact form in the Header Extra HTML Box, and then use the option to “Move Extra Header HTML over Header Image”

[larryboulder]

Thanks!

[larryboulder]

I’m curious about why it would be difficult to make the header extra html box responsive? 

It makes sense to me that the header would become too small too accommodate the form as you get close to 600px wide, but shouldn’t it be possible to shrink the form up to that point?

Thanks

[scrambler]

It is not about the header HTML box, but about your contact form.

A contact form is a set of text boxes, which do not scale, so the height of the contact form will be fixed.

If the contact form takes up the whole height of the header image on a large screen, on a small screen when the header image scales down, the contact form may be higher than the header image.

Depending on the contact form there may be some ways to change its overall size with custom CSS rule, but we would have to see everything in place to find out

[Author]

Posts