Solving Common Contact Form 7 Issues

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.

Comment

There is no comment on this post. Be the first one.

Leave a comment