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

Adding HTML5 Placeholders to Contact Form 7

You might have noticed that the forms created with my default ClickBump: Forms widget pre-fills form fields with hint text that automatically disappears as the user begins to type and then reappears if the user clears the field. This “hint” text is usually inserted via script. However, modern browsers can do this automatically using the new html5 “placehoder” attribute.

We can add the placeholder text to our forms in order to provide interactive text hints to the user like so:

<input type="email" name="email" placeholder="Enter your best email" />

There are several advantages to using placeholders. In addition to improving the usability of your forms, they also allow you to do away with the text labels above your forms, resulting in a cleaner, easier to use form.

Contact Form 7 does not natively support placeholder text. However, with a few simple edits ( ← click to download my customized version that already has these changes), we can teach it to play nice with html5 placeholders:

To use: [text* your-name placeholder “enter your name”>

Add the following code into text.php and textarea.php
$ph_att = '';
if ( $value && preg_grep( '%^placeholder$%', $options ) ) {
$ph_att .= sprintf( ' %s', $value );
$value = '';
}
if ( $ph_att )
$atts .= sprintf( ' placeholder="%s"', trim( esc_attr( $ph_att ) ) );

just above the line that reads:

if ( wpcf7_script_is() && $value && preg_grep( '%^watermark$%', $options ) ) {):

Page 2 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