Contact Form7

Contact Form7

Contact Form7

Contact Form7

Contact Form 7 Official Documentation Link:

Text Fields

Text input fields are the most common factors of a contact form. As you may know, HTML has two types of elements for text input fields: <input type="text"> for a single-line input; and <textarea>for multi-line input.

Contact Form 7 provides several types of form tags for representing these two types of HTML elements: text field (text and text*); email field (email and email*); telephone number field (teland tel*); URL field (url and url*); and textarea (textarea and textarea*). In this article, I will show you detailed information about the usage and semantics of these form tags.

Number Fields

A number field is a field for numeric value input. Contact Form 7 3.4 and higher provides two types of form-tag for number fields: number and range. These work the same except that they provide different types of user interface.

The new form-tag types, number and range, correspond with the HTML5 input types number and range, respectively. Currently, only some modern browsers support these input types.

Even among modern browsers, there may be differences in how those input fields are rendered on screen. In most cases, a number input is rendered as a spinner control while a range input is rendered as a slider control.

Older browsers and some modern browsers don’t support these input types and just render them as traditional text input fields.

Date Field

HTML5 has introduced date input type. Browsers supporting this input type render a date field as a calendar-style date picker UI that you choose a date from. Contact Form 7 supports date and date*types of form-tag that correspond with date input type.

Currently, only some modern browsers support this date input type. Older browsers and some modern browsers including Firefox don’t support this input type and just render it as a traditional text input field. Fortunately, Contact Form 7 can provide a fallback for those browsers.

If a value is specified in a date field, the value must be in YYYY-MM-DD format (e.g. 2013-04-08) according to the HTML5 specification. This is in most cases you don’t need to care about because browser’s date picker UI will set a value in the correct format.

Checkboxes, Radio Buttons and Menus

Contact Form 7 provides several types of form tags for representing checkboxes, radio buttons and drop-down menus. In this article, I will show you detailed information about the usage and semantics of these form tags.

Checkbox, Checkbox* and Radio

Both checkbox and checkbox* represent a group of checkboxes (<input type="checkbox"> in HTML). checkbox* requires the user to check at least one of the boxes.

radio represents a group of radio buttons (<input type="radio"> in HTML). Note that there is no required version of radio (“radio*”). The reason Contact Form 7 doesn’t provide “radio*” is because a radio button is a required field by nature. The HTML spec document explains it more in detail.

File Uploading and Attachment

In this post, I will explain the file uploading and attachment feature of Contact Form 7. With this feature, you can allow your users to upload their files via your form, and then an email with attachments of the files is sent to you.

To set up, two steps are needed: 1) Add file uploading fields in your form, 2) Set up your mail settings to attach the uploaded files. The two steps will be explained in the rest of this post.

Submit Button

A submit button is an essential component of a form. As you may know, HTML represents a submit button as an input element with submit type: <input type="submit">. You can use this HTML tag in a contact form of Contact Form 7, but you should use Contact Form 7’s own submitform tag instead.

This is the simplest form of submit tag:

[submit]

You can add a value like this:

[submit "Send Mail"]

Did you notice that the submit tag’s syntax is bit different than other form tags? The submit tag does not have name part, which other form tags have.

Contact Form 7 Official Documentation Link:

Have any recommendation to improve the documentation?

Submit your Feedback

Submit your feedback