We all come across scenarios where we face common Contact Form 7 issues. For example the common issue is to use a human readable label for select dropdown menus instead of “—“. Luckily Contact 7 provides filters which can be used to solve some of the common issues.

Shortcodes Within Contact Form 7 Forms

One of the most common Contact Form 7 issues is to change the html output before the form is displayed in browsers. We can modify the html output of the Contact Form 7 forms using the wpcf7_form_elements WordPress filter.

By default Contact Form 7 plugin doesn’t render shortcodes but we can solve this problem easily by using wpcf7_form_elements WordPress filter. At the most basic level following is what you have to do in order to make the Contact Form 7 plugin to render shortcodes within the form html output:

add_filter( 'wpcf7_form_elements', 'thememates_wpcf7_form_elements' );

function thememates_wpcf7_form_elements( $form ) {
  $form = do_shortcode( $form );
  
  return $form;
}

Modify Placeholder for Conctact Form 7 Select DropDown Menus

If you add a dropdown select menu to a Contact Form 7 form and tick the “Insert a blank item as the first option” option then it will add “—” as the select menu placeholder. This is not a user-friendly approach hence we need to change it to more meaningful. For example for a country select menu we would want it to say “Choose a country” instead of “—“. To achieve this change once again we can use the wpcf7_form_elements WordPress filter. Let’s suppose we have a single select menu in our form then this is how we will achieve our desired result:

add_filter('wpcf7_form_elements', 'thememates_wpcf7_form_elements');
function thememates_wpcf7_form_elements($html) {
    $text = 'Choose country';
    $html = str_replace('---',  $text , $html);
    return $html;
}

What if we have multiple select menus within a single Contact Form 7 form or 1 or more dropdown select menus in multiple forms? Well we can achieve that too using wpcf7_form_elements WordPress filter with some logic. Following is piece of code which will change the placeholder values for multiple dropdown select menus by targeting them through their ids:

add_filter('wpcf7_form_elements', 'thememates_wpcf7_form_elements');
function thememates_wpcf7_form_elements($html) {
    function thememates_replace_include_blank($name, $text, &$html) {
        $matches = false;
        preg_match('/<select name="' . $name . '"[^>]*>(.*)<\/select>/iU', $html, $matches);
        if ($matches) {
            $select = str_replace('<option value="">---</option>', '<option value="">' . $text . '</option>', $matches[0]);
            $html = preg_replace('/<select name="' . $name . '"[^>]*>(.*)<\/select>/iU', $select, $html);
        }
    }
    thememates_replace_include_blank('country-select-menu', 'Choose country', $html);
    thememates_replace_include_blank('state-select-menu', 'Choose state', $html);
    return $html;
}

Disable Default Conctact Form 7 Stylesheet

Sometimes you don’t want to load the default Contact Form 7 stylesheet but there is no option to disable it. Following is a single line of code which will stop loading of Contact Form 7 styles:

// don't load the default styles of Contact Form 7 plugin
add_filter( 'wpcf7_load_css', '__return_false' );

Conctact Form 7 Submission Success Message Not Showing

If you are someone who like to put custom html markup in Contact Form 7 forms then once in a while you might face this issue. This is one of the common Contact Form 5 issues which occur when you use your own html markup in the form building. The form submits the data fine but it doesn’t show the success response. I assume that it might be the same case for form failure. So if your Contact Form 7 form submits the data fine regarding of success or failure and you don’t see a response then check the html markup used for the form building. I have faced this issue and in my case it was an additional closing div due to which I wasn’t seeing any success message while I was receiving the test emails fine.

---

If you use any code snippets for solving a common Contact Form 5 issues then feel free to share with us via the comments form below and we will add them to this post with your name mentioned.