ClickBump Publisher Skin

This site runs in the "Publisher" skin for ClickBump Framework – Now available for ClickBump Owners!

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"

full-stop-pr

Contact Form 7 Support has been added to the latest 5.6 beta (as of beta 16). Release Notes Here.

1) Drag a “C5: LeadGen” widget over into the “Sidebar” placeholder

2) Remove the default text inside the widget and paste in your Contact 7 Form’s Shortcode
3) Save the widget and enjoy the new formatting

Want to see it live? Live Example.

Adding HTML5 Placeholders to Contact Form 7

You might have noticed that the forms created with my default C5: LeadGen 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.

ClickBump Lead Gen Widget

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 ) ) {):

Send to Kindle
More from blog
☝ Back to Top