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

.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);}
<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"]

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

Previous Post

How To Create A Sticky Header

Next Post

Masthead Area Call To Action


    • Richard Dacker
    • April 25, 2019

    Hi ,
    I certainly liked the look and style and implemented the contact form method. All okay with setup but only thing I must have buggered up the placeholders for contact 7 because the test I performed with dign up was delivered okay but showed only the placeholders and not the input test message. So I have no way knowing what the intended message was. Any ideas? thanks from Richard

    • Dan Nickerson
    • April 25, 2019

    Contact Form 7 has documentation on this but sounds like you removed the shortcode [your-message] from the mail template. Usually it has this by default to load the actual body of message.

    Message Body:


    • August 6, 2019

    Dan, I love this.

    I just tried to add it to my contact page on my website and I realized it was for a single page website.

    At least I think it is.

    Should I be able to use this on my blog contact page with my own image etc?

    • August 6, 2019

    Cracked it and love it!!!


Leave a Reply

Your email address will not be published. Required fields are marked *