Supercharged Contact Forms with ClickBump 6

With Version 5.5 and later, you can now leverage the tight integration between Contact Form 7 and ClickBump. You can also drag and drop your autoresponder forms into ClickBump. Its all made possible with the new "Lead Gen Widget"

In this article
  1. Contact Form 7 Integration
  2. HTML5 Placeholders
  3. Aweber
  4. Get Response

Code for Aweber Users

For those of you who use Aweber, you are all set right out of the box. Just head over to the widget manager in your site (Appearance > Widgets) and drag a “ClickBump: Forms” widget over into the “Sidebar” widget holder. Then open the widget and paste in your Aweber IDs and values like so:

<div class="c5_optin">
<p class="c5info">Enter your info into the fields below, then click the big button below.</p>
<form id="c5form" method="post" action="">
<input type="hidden" name="meta_web_form_id" value="YOUR-WEB-FORM-ID" />
<input type="hidden" name="listname" value="Your-List-Name-Here" />
<input type="hidden" name="redirect" value="Your-Redirect-URL-Here" />
<input type="hidden" name="meta_required" value="email" />
<input type="email" placeholder="Your Best Email" name="email" id="c5_email" class="textbox" required autofocus />
<input type="text" placeholder="Your Full Name" name="name" id="c5_name" class="textbox" />
<input type="tel" placeholder="Your Best Phone" name="phone" id="c5_phone" class="textbox" />
<button onclick="document.getElementById('c5form').submit()" class="c5font">Submit</button>
<p class="callout">We hate spam too. Your privacy is safe with us!</p>
<p class="c5phone">Need to talk to someone now? <span class="c5number c5font">205-555-5555</span></p>

Page 3 of 4 1 2 3 4
More from master tutorials

2 Responses to “Supercharged Contact Forms with ClickBump 6”

  1. Scott Blanchard says:

    Note: browsers that don’t recognize the new html5 input attributes will simply render a standard text input box.

  2. Scott Blanchard says:

    As an aside: html5 has lots of enhanced features for forms. In addition to the new placeholder functionality, you may also notice that the “type” attribute on the email input is set to “email” rather than the familiar “text”.

    This is significant because it provides devices like iPhones and other html5 aware devices the information they need in order to customize the onscreen keyword so that its optimized for inputting an email address. It also helps with browser based automatic form validation.

    HTML5 is chock full of good stuff like this and I’ve embraced it fully in the new version 5.6 of the ClickBump Framework.

☝ Back to Top