Why Add a Phone Number Field to Your Contact Form?

A phone number field in your contact form offers several advantages:

  • Improve Communication: Allowing visitors to submit their phone numbers helps you reach out to potential leads quickly and personally.
  • Better Lead Conversion: Collecting phone numbers enables faster follow-ups, improving your chances of converting visitors into customers.
  • Enhance Customer Support: If you offer customer support, having a phone number in the form can help resolve issues faster by allowing you to call the customer directly.

Step 1: Add a Basic Phone Number Field in Contact Form 7

Adding a phone number field to your form is simple. Here’s how to do it:

Step 1.1: Open Your Contact Form in Contact Form 7

  1. From your WordPress dashboard, go to Contact > Contact Forms.
  2. Select the form you want to edit, or create a new form by clicking Add New.

Step 1.2: Add the Phone Number Field

  1. In the form editor, place the following code where you want the phone number field to appear:
<label for="phone">Phone Number</label>
[tel* phone id:phone]

Here’s what each part of the code means:

  • [tel* phone]: This shortcode creates a required phone number field. The * makes the field mandatory, meaning the user must fill it out before submitting the form.
  • id:phone: This gives the phone number field a unique ID, which can be useful for styling and other purposes.
  • label for="phone": This ensures that the label is associated with the phone number field for better accessibility.

Step 1.3: Save the Form

Once you’ve added the phone number field, click Save to store the changes.


Step 2: Customize the Phone Number Field

If you want to customize the phone number field further, there are several options you can use to improve the user experience and the validation process.

Step 2.1: Add Placeholder Text

To make it clear to users what format the phone number should be in, you can add placeholder text in the input field.

<label for="phone">Phone Number</label>
[tel* phone id:phone placeholder "Enter your phone number"]

This will display the text “Enter your phone number” inside the phone number field, giving users a hint of what to type.

Step 2.2: Format the Phone Number Field

To make sure the phone number is entered in the correct format, you can use a regular expression (regex) to validate the field.

<label for="phone">Phone Number</label>
[tel* phone id:phone placeholder "Enter your phone number" pattern="^[\+]?[0-9]{1,4}?[0-9]{7,10}$"]

This regex allows for phone numbers that may optionally start with a “+” (international code) and ensures that the number entered is between 7 to 10 digits long.

Step 2.3: Use JavaScript to Mask the Phone Number

For a more user-friendly approach, you can use a JavaScript library like Inputmask to create a mask for phone number entry. This can help format the number as the user types it, making it easier to collect consistent data.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Finputmask%2F5.0.6-beta.28%2Finputmask.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

 

document.getElementById('phone').inputmask('(999) 999-9999'); // Example mask

This script will display the phone number in the format (123) 456-7890 as the user types it.


Step 3: Add Validation for the Phone Number Field

To ensure the phone number is entered correctly, it’s important to validate the input. Contact Form 7 provides built-in validation for the required fields, but you can add custom validation to check for a valid phone number.

Step 3.1: Use JavaScript for Phone Number Validation

If you want more advanced validation (for example, to ensure the phone number contains only numbers or follows a specific format), you can use JavaScript to check the value before submitting the form.

document.addEventListener('wpcf7submit', function(event) {
  var phoneNumber = document.getElementById('phone').value;
  var phoneRegex = /^[\+]?[0-9]{1,4}?[0-9]{7,10}$/;

  if (!phoneRegex.test(phoneNumber)) {
    alert('Please enter a valid phone number.');
    event.preventDefault(); // Prevent form submission
  }
}, false);

This script listens for the form submission event and checks the phone number against the specified regex pattern. If the phone number doesn’t match, the form submission is prevented, and an error message is shown.


Step 4: Style the Phone Number Field

You can style the phone number field to match the design of your site using custom CSS. Here’s an example of styling the phone number input field:

#phone {
  font-size: 16px;
  padding: 10px;
  width: 100%;
  border: 2px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

#phone:focus {
  border-color: #0073e6;
}

FAQ: Common Questions About the Phone Number Field in Contact Form 7

1. Can I make the phone number field optional?

Yes! Simply remove the * from the [tel* phone] shortcode to make it optional:

<label for="phone">Phone Number</label>
[tel phone id:phone placeholder "Enter your phone number"]

2. How do I add country codes to the phone number field?

To allow users to enter their country code, you can add a dropdown field with country codes and then combine it with the phone number field. Here’s an example:

<label for="country-code">Country Code</label>
[select country-code "US +1" "CA +1" "UK +44" "IN +91"]

<label for="phone">Phone Number</label>
[tel* phone id:phone placeholder "Enter your phone number"]

You can then use JavaScript to combine the selected country code with the phone number value.

3. Can I use a phone number field in multiple forms?

Yes! The phone number field can be used in any form created with Contact Form 7. Simply add the same [tel* phone] shortcode to other forms where you need to collect phone numbers.

4. How can I validate international phone numbers?

For international phone number validation, you can use a more advanced regex pattern that allows for varying phone number formats based on the country. You can also use third-party libraries like libphonenumber to validate and format international numbers.

5. Can I use a phone number field in the Contact Form 7 email?

Yes! You can include the phone number field in the email body by using the corresponding form tag, for example:

Phone Number: [phone]

Adding a phone number field to your Contact Form 7 form is a simple but powerful way to collect contact information from your website visitors. Whether you’re collecting phone numbers for customer support, sales, or general inquiries, the customization options available in Contact Form 7 ensure you can tailor the phone number field to fit your needs.

From basic phone fields to advanced validation and styling, you now have all the tools you need to create effective phone number fields in Contact Form 7.


Need Help with Customizing Contact Form 7?

Hire a certified WordPress expert from Codeable to help you customize your Contact Form 7 fields and enhance your form functionality.

Get a Free Estimate