Category Archives: Done

5 really useful free Contact Form 7 Extensions

Posted on by

While the Contact Form 7 plugin is wildly popular amongst millions of WordPress users, many people may not be aware of these really useful free Contact Form 7 Extensions.

As one on the most popular plugins in the WordPress Plugin Repository it is perhaps not surprising that WordPress Developers would be willing to spend their time developing and releasing plugins that extend Contact Form 7’s natural capabilities.

Indeed the range is such that Contact Form 7 with it’s extensions can give users many of the functions available in some of the well known premium form plugins.

The advantage in sticking with Contact Form 7 is often familiarity with the Contact Form 7 form plugin. The learning curve for some of the premium form plugins can be substantial. If you only require one or two extra features, and not the large range of extra functionality available in the premium form plugins, it can make a lot of sense to use a Contact Form 7 extension or two.

In this article, our aim is to make people aware of some very useful Contact Form 7 extensions, what they do and how they can be used to meet additional needs that WordPress users may have with their website forms.

Contact Form 7 with it’s extensions can give users many of the functions available in some of the well known premium form plugins

Really Useful Contact Form 7 Extensions

  1. Contact Form DB – Store Form Submission Data
  2. Contact Form 7 Dynamic Text Extension – Access Form Variables
  3. MailChimp for WordPress – Connect to MailChimp
  4. Contact Form 7 Honeypot – Prevent Form Spam
  5. Contact Form 7 Skins – Form Styling

1. Store Form Submission Data

Store your Contact Form 7 form submission data in the WP database

Contact Form DB

Saves submitted form data to the database and provides short codes to display it.

Using a submission storage plugin like Contact Form DB will save all your Contact Form 7 form submits to the WordPress database. These are often used by experienced WP users – they provide a robust record of all form submissions even when things go a little wrong.

The submission storage plugins are very robust and rarely fail to save a CF7 form submit even if the email is not sent due to a Javascript Conflict or other email sending problem.

+ Display data

As a bonus, Contact Form DB now works with all of the following popular WordPress form plugins:

  • JetPack Contact Form plugin
  • Fast Secure Contact Form (FSCF) plugin
  • Gravity Forms plugin
  • WR ContactForm plugin
  • Quform plugin (BETA)
  • Ninja Forms plugin (BETA)
  • Caldera Forms plugin (BETA)

So you can maintain your form submission data even if you change to another form plugin.

Further reading:

Website – http://cfdbplugin.com/

2. Dynamically Set Form Field Values

Add dynamic content capabilities – dynamically set the default values of your Contact Form 7 fields

Contact Form 7 Dynamic Text Extension

Allows the dynamic generation of content for a text input box via any shortcode

This extension lets you create pre-populated fields based on … (other values). Some examples might include:

Auto-filling a URL, Post ID, title, or slug
Pre-populating a Product Number
Referencing other content on the site
Populating with post or user info
Including info from custom fields

The plugin provides a dynamic text field CF7 tag type for the Contact Form 7 Plugin. It allows the dynamic generation of content for a text input box via any shortcode.

Provides a dynamic text field that accepts any shortcode to generate the content.

+ Any value you can write a shortcode for

Further reading:

Website – Contact Form 7 – Dynamic Text Extension

3. Connect to MailChimp

Text

MailChimp for WordPress

Add MailChimp sign-up checkboxes to your Contact Form 7 forms

Further reading:

Website – http://cf7skins.com/

4. Prevent Form Spam

Text

Contact Form 7 Honeypot

Adds honeypot anti-spam functionality to CF7 forms.

This simple addition to the Contact Form 7 plugin adds basic honeypot anti-spam functionality to thwart spambots without the need for an ugly captcha.

The principle of a honeypot is simple — bots are stupid. While some spam is hand-delivered, the vast majority is submitted by bots scripted in a specific (wide-scope) way to submit spam to the largest number of form types. In this way they somewhat blindly fill in fields, regardless of whether the field should be filled in or not. This is how a honeypot catches the bot — it introduces an additional field in the form that if filled out will cause the form not to validate.

Further reading:

Website – Contact Form 7 Honeypot plugin page

5. Form Styling

Text

Contact Form 7 Skins

Makes styling of Contact Form 7 forms much easier – even if you don’t have HTML + CSS skills.

Further reading:

Website – http://cf7skins.com/

Introducing CF7 Skins

Posted on by

We are pleased to announce that Contact Form 7 Skins is now available for download from the WordPress Plugin Directory. Contact Form 7 Skins is an extension for the Contact Form 7 plugin.

The Problem

Header image of the legendary Contact Form 7 plugin for WordPressAs one of the most popular WordPress plugins, Contact Form 7 has helped millions of users all over the world to add forms on their WordPress site.

While simple Contact forms are easy to create – building complex forms, and getting them to look how you want, does take some effort.

Experienced WordPress users, skilled at using HTML and CSS, are able to style their Contact Form 7 forms to their particular requirements … but this requires a level of skill beyond many people.

I decided to help solve this problem with Contact Form 7 Skins.

“It’s not that easy to get Contact From 7 forms looking like you want – particularly if you are not skilled at using both HTML and CSS.”

Our Solution

Contact Form 7 Skins works right within the normal Contact Form 7 interface, making it easier for regular WordPress users to create professional looking Contact Form 7 forms, using a range of compatible Templates and Styles.

Templates and Styles in CF7 Skins

Simply select from a list of compatible Templates that cover many common forms and then choose a Style for your form from a range of professional and beautiful Styles.

Each Template acts as an easy to follow guide, which can be adapted to your particular requirements. Every Style covers the full range of Contact Form 7 form elements.

Contact Form 7 Skins is highly customizable and easy to learn, even for beginners.

skins - features

“Contact Form 7 Skins makes styling of Contact Form 7 forms much easier – even if you don’t have HTML + CSS skills.”

Why I created Contact Form 7 Skins

I decided to start building Contact Form 7 Skins not long after I started answering questions in the Contact Form 7 Support Forum. I began doing this most days after hearing someone suggest that answering questions on a plugin you are familiar with was a simple & effective way to contribute back to WordPress.

I knew Contact Form 7 pretty well (or so I thought at the time). I also knew that the plugin author was Japanese – so I figured being a native English speaker (I’m Australian) might help.

I quickly discovered that styling of Contact Form 7 forms was a common issue in the forum. I found myself answering very similar questions day after day.

So I wrote an article on Styling Contact Form 7 Forms to provide a more comprehensive explanation of the topic than I could give in the support forum. This allowed me to answer these repeat questions much more quickly & easily and at the same time give people a more detailed answer.

Contact Form 7’s author, Takayuki Miyoshi, kindly linked to the post from the Contact Form 7 Documentation. When he did that I was immediately surprised by the number of hits. I knew that Contact Form 7 was very popular, but with the number of people reading the article each day, I finely grasped how widespread usage of Contact Form 7 really was.

Users can simply select from a range of Templates & Styles

While the article is used by lots of people, it’s directed at people who have suitable HTML & CSS skills.

I decided I wanted to solve the problem of styling Contact Form 7 forms in a simple, practical way for regular WordPress users – that don’t have HTML & CSS skills.

The number of people reading the article each day indicated to me that there should be opportunities for a Freemium plugin that did this well.

“Contact Form 7 Skins was written to help regular WordPress users who would like to have great looking Contact Form 7 forms, but don’t have suitable HTML & CSS skills.”

CF7 Skins works within the normal Contact Form 7 plugin interface

Response to the plugin has been very positive with significant numbers of people downloading the free version of the plugin right from day one. I’m also encouraged by the number of people making the choice to purchase the Pro version each week.

Why I choose to use a Freemium Plugin Model

I really wanted to ensure that development of CF7 Skins was sustainable in the long-term. The truth is a high percentage of the plugins released each year are not maintained over time.

It’s an open secret that every Plugin Developer needs to be getting some benefit from ongoing development of the plugin (one way or the other) for development to be sustainable over the longer term.

Most WordPress users also look for plugins that are well supported and regularly updated. So it’s in everyone’s interest I think to try to come up with a sustainable business model.

In my case I made the decision that ongoing development of CF7 Skins should be made possible by sales of renewable annual licenses of our Pro Version and Add-ons.

“Ongoing development of CF7 Skins is made possible by sales of renewable annual licenses of our Pro Version and Add-ons.”

Pro Version and Add-ons

CF7 Skins Pro provides a wider range of Templates & Styles for commonly used forms plus Premium Email Support. If you are building complex Contact Form 7 forms and use your WordPress website to help make money in your business, then purchasing our Pro version can make good sense.

Our range of Add-ons aims to bring the functionality available in other premium WordPress Form plugins directly within Contact Form 7. Using a CF7 Skins Add-on can offer a number of advantages including your existing familiarity with using Contact Form 7 – you don’t need to learn another WordPress Form plugin.

CF7 Skins Multi – our premium Add-on for multi-part Contact Form 7 forms – is now available for purchase.

features-highlighted-500

CF7 Skins Multi allows you to easily break your Contact Form 7 forms into multiple steps. Forms can be divided where required, quickly & easily, right within the Contact Form 7 plugin interface.

“Now you can build multi-part forms quickly and easily, right within the Contact Form 7 interface.”

Who am I

NeilMurrayI’m Neil Murray aka buzztone in the WordPress Forums. I’m a WordPress Developer based on the Sunshine Coast in Australia.

Feel free to contact me if you have any questions.

NOTES:

The free version has identical functionality, just a smaller range of Templates & Styles. It’s a completely viable option for many Contact Form 7 users. Ideal for those who would just like an attractive Contact form. We welcome people using the free version. We understand that a widely popular free plugin is the first step to having a successful Freemium plugin.

But if you are building more complex Contact Form 7 forms and you use your WordPress website to help make more money in your business then our Pro version and CF7 Skins Add-on or two can make good sense.

> Premium Email Support

“Contact Form 7 Skins helps you create beautiful forms without writing any HTML or CSS code.”

CF7 Skins Beta Release Announcement

Posted on by

We are glad to announce the availability of CF7 Skins for beta testing. We have put a lot of work into it and we need your help to make it even better for the final launch.

What is CF7 Skins?

Header image of the legendary Contact Form 7 plugin for WordPressAs one of the most popular WordPress plugins, Contact Form 7 has helped millions of users all over the world to add forms into their WordPress site. It comes with built in capability to use templates and custom styling, but most WordPress users have little or no knowledge of how to do that.

We decided to help solve this problem with CF7 Skins.

CF7 Skins provides you beautiful skins and ready to use templates for your forms. Instead of choosing tags and writing HTML to create complex forms, simply choose a template from several available choices and apply a professional designed CSS style to your form.

Templates and Styles in CF7 Skins

CF7 Skins helps you create beautiful forms without writing any HTML or CSS code.

Ready to try CF7 Skins?

Want to try out CF7 Skins in its beta stage? Simply visit our beta testing page and sign up. We’ll send you download details and all the information you need to get started. After that you can simply install and activate CF7 Skins and have fun with it.

Following completion of Beta Testing it’s planned the free version of CF7 Skins will be made available for download from the WordPress Plugin Directory. The premium version CF7 Skins Pro will continue to be controlled by a license key available for purchase at Pricing.

What are our expectations of Beta Testing participants?

As beta testers you will be helping us make CF7 Skins ready for public release. We would like you to create different kind of forms using CF7 Skins templates and styles. Preview your forms and see if everything is working fine.

After testing it for a while, you can send us your feedback. We need information from you like how you used it, what you liked or disliked about it.

Found a Bug?

If you come across any issues during beta testing, then please report them here. We may need more information from you like your setup to solve the issue. We may also need you to apply fixes to the issue and report back.

Please note, that even though the plugin is usable, secure, and well coded, it is still not ready to be used on mission critical live sites. Please test it only on your staging, development, or local environments.

With your help, we are hoping to locate and squash any major bugs before final release. Click here to sign up as a beta tester.

Using Fieldsets in your forms

Posted on by

Explain to users why they should use Fieldsets in their forms and how to do that using CF7 Skins.

https://www.google.com.au/search?q=why+use+fieldsets

The grouping and labelling of thematically related controls within a form is an important aspect of providing semantic information so users can understand and complete a form successfully.

The HTML 4.1 specification introduced a method for grouping and labeling related form controls.

The fieldset element allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The proper use of this element makes documents more accessible.

The legend element allows authors to assign a caption to a fieldset. The legend improves accessibility when the fieldset is rendered non-visually.

See Fieldsets, Legends and Screen Readers
http://stackoverflow.com/questions/9741328/why-do-we-need-a-fieldset-tag
http://www.456bereastreet.com/archive/200904/use_the_fieldset_and_legend_elements_to_group_html_form_controls/

Why we use Fieldset, Legend & Lists in CF7 Skins

Posted on by

Using Fieldsets & Labels

http://www.pixy.cz/blogg/clanky/css-fieldsetandlabels.html

Styling Forms using Unordered & Ordered Lists

http://stackoverflow.com/questions/860745/p-vs-ol-or-ul-for-form-styling
http://stackoverflow.com/questions/1395514/is-it-acceptable-to-use-tables-for-forms-or-is-it-still-more-correct-to-use-div
http://stackoverflow.com/questions/109488/is-it-bad-design-to-use-table-tags-when-displaying-forms-in-html

Better Contact Form 7 Checkboxes & Radio Buttons

Posted on by

Article explains use of important options available for Checkboxes & Radio Buttons in Contact Form 7.

Include example of completed CF7 tag with option.

See http://contactform7.com/checkboxes-radio-buttons-and-menus/

Checkbox & Radio Button Tag Syntax

See http://contactform7.com/tag-syntax/#form_tag

Setting Default Options

default:(num) default:2
default:1_2_3 Pre-checked options. The integer following default: is the position in the order of items. 1 is the first one. If you want to make two or more items selected, joint integers with underbar (_), as default:1_2_3.

Make checkboxes exclusive

exclusive Make checkboxes exclusive. I mean, when you check a checkbox in a group, others are unchecked, so it accepts zero checked or one checked. This is a JavaScript gimmick, so requires JavaScript. Radio button doesn’t support this option.

Add other field to checkboxes & radio buttons

free_text Append a free input text field to last item.

Layout Options for Checkboxes and Radio Buttons

label_first By default, a checkbox or a radio button are put first, and a label last. By adding label_first option, you can reverse them.

See also http://contactform7.com/custom-layout-for-checkboxes-and-radio-buttons/

How to place CF7 Form Fields side by side

Posted on by

CF7_Singleline

You can use Ordered List elements to display multiple fields on single line.

HTML:

<ol class="singleline">
<li> <label for="your-name">Your Name (required)&nbsp</label> [text 1="your-name" language="*"][/text] </li>
<li> <label for="your-email">Your Email (required)&nbsp</label> [email* your-email] </li>
</ol>

Added to Form section of CF7 interface.

CSS:

.wpcf7-form .singleline ol {
list-style: none;
margin: 0;
}
 
.wpcf7-form .singleline li {
display: inline-block;
float: left;
margin-right: 10px;
padding-right: 10px;
}

Added to Child Theme style.css

See Styling Contact Form 7 Forms for a general explanation of styling CF7 forms using CSS. If you are not familiar with CSS, this page also includes some links to where you can learn CSS.

Above is taken from http://wordpress.org/support/topic/create-field-side-to-side – a question I answered the Contact Form 7 Support Forum.

EXAMPLE:

Error: Contact form not found.

CF7 CSS Classes

Posted on by

For CF7 forms we have several ids & classes which can be used to ensure that our CSS changes don’t inadvertantly effect other elements on your website.

 
class="wpcf7":
 
<div id="wpcf7-f800-p709-o1" class="wpcf7">
 
div.wpcf7 {  /* ../contact-form-7/includes/css/styles.css */
	margin: 0;
	padding: 0;
}
 
class="wpcf7-form":
 
<form class="wpcf7-form" novalidate="novalidate" method="post" 
action="/ONLINE/CF7/cf7skinsPoC/styles/premium/cagney/#wpcf7-f800-p709-o1">
 
class="wpcf7-form-control":
 
<span class="wpcf7-form-control wpcf7-checkbox">
 
class="wpcf7-form-control-wrap":
 
<span class="wpcf7-form-control-wrap checkbox-0">
 
span.wpcf7-form-control-wrap {  /* ../contact-form-7/includes/css/styles.css */
	position: relative;
}
 
class="wpcf7-text":
 
<input id="cf7s-item1a" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required
cf7s-textfield" type="text" placeholder="default" aria-required="true" maxlength="100"
size="60" value="" name="cf7s-text-01">
 
class="wpcf7-textarea":
 
<textarea class="wpcf7-form-control wpcf7-textarea" rows="10" cols="40" name="cf7s
textarea-01"></textarea>
 
class="wpcf7-email":
 
<input class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email"
type="email" size="40" value="" name="cf7s-email-01">
 
class="wpcf7-url":
 
<input class="wpcf7-form-control wpcf7-text wpcf7-url wpcf7-validates-as-url" type="url"
size="40" value="" name="cf7s-url-01">
 
class="wpcf7-tel":
 
<input class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" type="tel"
size="15" value="" name="cf7s-tel-01">
 
class="wpcf7-number":
 
<input class="wpcf7-form-control wpcf7-number wpcf7-validates-as-number" type="number"
value="" name="cf7s-number-01">
 
class="wpcf7-range":
 
<input class="wpcf7-form-control wpcf7-range wpcf7-validates-as-number" type="range"
value="" name="cf7s-range-01">
 
class="wpcf7-date":
 
<input class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date" type="date" 
value="" name="cf7s-date-01">
 
class="wpcf7-file":
 
<input class="wpcf7-form-control wpcf7-file" type="file" size="40" value="1" 
name="cf7s-file-01">
 
class="wpcf7-quiz":
class="wpcf7-quiz-label":
 
<span class="wpcf7-quiz-label">12+48=?</span><input class="wpcf7-form-control wpcf7-quiz" 
type="text" aria-required="true" size="40" name="cf7s-quiz-01"><input type="hidden" 
value="1c7a729e1466603f91d3595d6afcac26" name="_wpcf7_quiz_answer_cf7s-quiz-01">
 
class="wpcf7-acceptance":
 
<input class="wpcf7-form-control wpcf7-acceptance" type="checkbox" value="1" name="cf7s 
acceptance-01">
 
class="wpcf7-captchac":
 
<img class="wpcf7-form-control wpcf7-captchac wpcf7-captcha-cf7s-captcha-01" width="72" 
height="24" src="http://localhost/ONLINE/CF7/cf7skinsPoC/wp-content/images/wpcf7_captcha
/1692768786.png" alt="captcha">
 
class="wpcf7-captchar":
 
<span class="wpcf7-form-control-wrap cf7s-captcha-01"><input class="wpcf7-form-control 
wpcf7-captchar" type="text" size="40" value="" name="cf7s-captcha-01"></span>
 
class="wpcf7-list-item":
 
<span class="wpcf7-list-item">
 
span.wpcf7-list-item {  /* ../contact-form-7/includes/css/styles.css */
	margin-left: 0.5em;
}
 
class="wpcf7-list-item-label":
 
<span class="wpcf7-list-item-label">Lieber.gleich.richtig.® Imagemappe</span>
 
class="wpcf7-checkbox":
 
<span class="wpcf7-form-control wpcf7-checkbox">
 
class="wpcf7-radio":
 
<span class="wpcf7-form-control wpcf7-radio">
 
class="wpcf7-select":
 
<select class="wpcf7-form-control wpcf7-select" multiple="multiple" name="cf7s-menu-01[]">
 
class="wpcf7-submit":
 
<input class="wpcf7-form-control wpcf7-submit" type="submit" value="Senden">

Back to Styling Contact Form 7 Forms