Default CF7 Form

We used Firebug to produce the following diagram which shows the overall structure of the default CF7 form we are using in this article.

CF7_Form_Structure_A4

The diagram shows how each element of the form is created using standard HTML form elements and how those elements are arranged in relation to each other.

The default Contact Form 7 form uses paragraph elements (<p>Paragraph Content</p>) as the basis for the form. While this is probably the simpliest way to create a form, it has a number of shortcomings, which we intend to discuss in further future articles.

CF7 Skins - great looking Contact Form 7 forms made easy

You may notice the CSS classes & ids that Contact Form 7 adds to the individual HTML form elements – for example:

  • <div> id=”wpcf7-f8-p275-o1″ class=”wpcf7″ > – <div> for the complete form which is given a unique id
  • <span> class=”wpcf7-form-control-wrap your-name”> … </span> – inline element which wraps each text field

With experience, using Firebug or Chrome Dev Tools should give you all the information you need to change the style of yor CF7 forms quickly and easily, but it may definately help you initially to produce a hand drawn paper sketch similar to this diagram.

Back to Styling Contact Form 7 Forms

%d bloggers like this: