How To Create A Contact Form Banner

Here’s how I created the Contact Form LeadGen form inside the masthead banner shown in the featured image. I’m using Contact Form 7 and some custom code to generate the look.

This should give you some ideas of how you can use the Top Banner Widget for local marketing leadgen sites.

1. Insert this code into a custom Contact Form 7 form box

<style>
.wpcf7-textarea {height:100px;}
body .wpcf7 {padding:0px;border:0px}
input[type="submit"] {width: 100%;}
input[type="text"], input[type="email"], input[type="url"], input[type="tel"], textarea {
background: rgb(255, 255, 255);border: 1px solid #e4e5e7;color: #181818;font-size: 14px;font-weight: 500;font-family: inherit;line-height: 1.4;padding: 8px;box-sizing: inherit;margin-bottom: 10px;border-radius:3px;}
#soc-cf {width:100%;padding:30px;background-color: rgba(0, 0, 0, 0.7);}
</style>
<div id="soc-cf"><h2 style="color:#fff;">Get A Quote</h2>
<div class='soc_one_half '>[text text-228 placeholder "Your Name"]</div><div class='soc_one_half soc_last'>[tel tel-334 placeholder "Your Phone"]</div>
[email email-755 placeholder "Your Email"]
[textarea textarea-136 placeholder "Your Message"]
[submit "Send Message"]
</div>

2. Drag a custom html widget into the Top Banner Widget in Appearance > Widgets and paste this code. Replace the background image and form shortcode with your own. Adjust all else as needed.

[soc_full_section bgcolor="#f4f4f4" textcolor="#fff" bgimage="https://customers.socratestheme.com/wp-content/uploads/2019/03/condominium-690086_1280.jpg" parallax="0" margin_top="0" margin_bottom="0" margin_left="0" margin_right="0" padding_top="25" padding_bottom="25" padding_left="0" padding_right="0"][soc_two_third] [soc_headline color="#fff" font_size="40" font_size_tablet="30" font_size_phone="20" shadow="0" align="left" margin_top="25" margin_bottom="25"]Local Real Estate Co[/soc_headline]
This is a compelling subtitle

[/soc_two_third] [soc_one_third class='last'] [contact-form-7 id="1454" title="Contact Form"] [/soc_one_third][/soc_full_section]

3. Set Visibility to SHOW on PAGES > FRONT PAGE