Contact Form 7 Form Structure
We used Firebug to produce the following diagram which shows the overall structure of the default CF7 form we are using in this article.
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.
See Why we use Fieldset, Legend & Lists in CF7 Skins and Making your form easy to read by using Fieldsets ).
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 styleStyle When you select a CF7 Skins Style the aesthetic design (CSS code) is automatically created and applied to your form. 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
