Category: WordPress

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.

A stylish footer is more than just a place for links—it’s a chance to leave a lasting impression. If you’re using the Blocksy theme on WordPress and want to create a custom gradient background for your footer, you’re in the right place.

This guide will show you how to add a gradient footer using both Blocksy Customizer and custom CSS. Whether you’re a beginner or a pro, you’ll find multiple ways to create a beautiful footer that stands out.

Why Use a Gradient Background for Your Footer?

A gradient footer can transform the overall design of your website. But it’s not just about looks—it can improve the user experience and branding when done correctly.

Benefits of a Gradient Footer:

• Visually Appealing: Gradients make your footer look modern and professional.
• Brand Consistency: Using brand colors keeps your design cohesive.
• Section Separation: It helps clearly separate content from the footer area.
• Highlight Important Links: A well-designed footer can draw attention to CTAs.

Best Practice: Stick with 2-3 colors that blend well together for a subtle and professional look.

Method 1: Adding a Gradient Footer Using the Blocksy Customizer (No Code)

The easiest way to add a gradient footer in Blocksy is through the WordPress Customizer. This method works without needing to touch any code and is ideal for beginners.

Steps to Add a Gradient Footer with the Blocksy Customizer:

1. Log into Your WordPress Dashboard.
2. Go to Appearance > Customize > Footer.
3. Click on the Footer Design section.
4. Select the footer area you want to edit (Main Footer, Widgets Section, or Footer Bar).
5. Locate the Background Color Settings.
6. Click the Gradient option.
7. Pick your gradient colors and adjust the angle for the desired effect.
8. Click Publish to save your changes.

✅ Pro Tip: Stick to lighter gradients for a minimal look and avoid complex color combinations that can distract users.

Method 2: Adding a Gradient Footer Using Custom CSS (Free Version)

If you’re using the free version of Blocksy and the Customizer doesn’t support gradients directly, you can achieve the same effect with CSS code.

Steps to Add a Gradient Footer Using CSS:

1. Log in to Your WordPress Dashboard.
2. Go to Appearance > Customize > Additional CSS.
3. Paste the following CSS code:

/* Custom Gradient Footer for Blocksy */
#colophon {
    background: linear-gradient(135deg, #ff7e5f, #feb47b);
    color: white;
    padding: 20px;
}

4. Adjust the gradient colors by changing the hex codes.
5. Click Publish to apply the changes.

✅ Tip: If you need more complex gradients, use CSS gradient generators like CSS Gradient to generate the code.

Method 3: Adding a Multi-Color Gradient Footer Using CSS

Want to create a vibrant multi-color gradient? You can easily do it by adding more color stops in your CSS.

/* Multi-Color Gradient Footer */
#colophon {
    background: linear-gradient(120deg, #ff7e5f, #feb47b, #86a8e7, #91eae4);
    padding: 20px;
    color: white;
}

Key Adjustments for Multi-Color Gradients:

• #ff7e5f: Coral Pink
• #feb47b: Peach
• #86a8e7: Sky Blue
• #91eae4: Aqua

✅ Pro Tip: Use 3-4 colors for a modern gradient. Too many colors can overwhelm your footer design.

Method 4: Creating an Animated Gradient Footer (Advanced CSS)

If you want to add some movement to your footer, you can create a dynamic gradient animation using CSS.

/* Animated Gradient Footer */
@keyframes gradientAnimation {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

#colophon {
    background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4);
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;
    padding: 20px;
    color: white;
}

✅ Pro Tip: Use subtle animations and keep performance in mind. Avoid fast transitions that might feel distracting.

Method 5: Using Blocksy Pro for Advanced Gradient Features

If you have the Blocksy Pro version, it comes with advanced gradient controls built into the Customizer.

How to Enable Gradient Footers with Blocksy Pro:

1. Install and Activate Blocksy Pro.
2. Go to Appearance > Customize > Footer.
3. Click on the footer section you want to edit.
4. Enable Advanced Styling Options.
5. Choose Gradient Background.
6. Adjust the gradient angle, colors, and intensity.
7. Publish the changes.

✅ Why Upgrade? Blocksy Pro offers more control, such as:

• Multiple Gradient Stops.
• Transparency Controls.
• Hover Effects.

Best Gradient Color Combinations for Footers

Choosing the right colors can make or break your gradient design. Here are some tested gradient combinations for a footer that works well with Blocksy:

✅ Pro Tip: Stick with colors that match your brand identity for a cohesive design.

Troubleshooting: Gradient Footer Not Working?

If your gradient footer isn’t displaying as expected:

• Clear Cache: Try clearing your WordPress and browser cache.
• Update Blocksy: Ensure you’re running the latest version of Blocksy.
• Check CSS Conflicts: Ensure no conflicting CSS rules override your gradient.
• Responsive Check: Test the footer on mobile devices for full compatibility.

Final Thoughts

A custom gradient footer can elevate the look of your Blocksy site significantly. Whether you use Blocksy Pro or CSS tweaks, you can create beautiful gradient effects that boost branding and user engagement.

✅ Want to take your WordPress design to the next level? Hire a WordPress Expert on Codeable for professional customizations.

FAQ Section

How do I make my Blocksy footer full-width?

Go to Appearance > Customize > Footer and select Full Width Layout.

Can I create a gradient button in the Blocksy footer?

Yes! You can style buttons with gradient backgrounds using similar CSS code.

Is CSS better than using the Customizer for gradients?

The Customizer is great for simple gradients, but CSS gives you more control and creativity.

Will a gradient footer slow down my website?

No, if you use CSS gradients instead of image-based gradients.

Can I add gradients to other sections like the header?

Yes! Use the same CSS techniques for your header or any other section.

What’s the best gradient tool for beginners?

Try CSS Gradient for easy code generation.

Do gradients affect SEO?

No, gradients don’t affect SEO directly but readability matters, so ensure contrast is high.

Now you’re ready to create stunning gradient footers in Blocksy! 🚀