PullOut Contact Form

How to create a PullOut Contact Form with PullOut Widgets for WordPress

To create a PullOut Contact Form with address and Google Map, we used custom HTML, Google Maps iFrame and very popular free plugin Contact Form 7. You can see a working example of the widget on the top edge of the screen.

PullOut Widget Settings:

  • Screen Side – Top
  • Position on the Side – 30%
  • Show/Slide Out – On Click
  • Easing Effect – easeOutBounce
  • Sliding Speed – 1500
  • Widget Width – 800
  • Tab Offset – 50%
<div style="margin-bottom: 2em;">

    <div style="width: 45%; margin-right: 5%; float: left;">
        ACME Corporation<br />
        Phone: (123) 456-7890<br />
        Email: info@acmecorp.com<br />
        123 Main Street<br />
        New York, NY 10001<br />

        <iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=New+York,+NY&amp;aq=&amp;sll=34.168218,-111.930907&amp;sspn=16.132461,33.815918&amp;ie=UTF8&amp;hq=&amp;hnear=New+York&amp;t=m&amp;ll=40.714476,-74.005966&amp;spn=0.156137,0.205994&amp;z=11&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=New+York,+NY&amp;aq=&amp;sll=34.168218,-111.930907&amp;sspn=16.132461,33.815918&amp;ie=UTF8&amp;hq=&amp;hnear=New+York&amp;t=m&amp;ll=40.714476,-74.005966&amp;spn=0.156137,0.205994&amp;z=11&amp;iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small>
    </div>

    <div style="width: 50%; float: left;">
        [contact-form-7 404 "Not Found"]
    </div>
    <br style="clear: both;" />

</div>

Contact Form Widget

ACME Corporation
Phone: (123) 456-7890
Email: info@acmecorp.com
123 Main Street
New York, NY 10001

View Larger Map

Your Name (required)

Your Email (required)

Subject

Your Message