javascript - Contact Form 7 Error : labels and entered values overlaps in the form field. 对此有什么合适的解决方案？

Question

我正在尝试为我的 WordPress 网站创建一个联系页面，并且几乎完成了表单，但由于某种原因，我不知道在我重新加载时 标签和输入的值彼此重叠填写输入字段后的页面。

我在 WordPress 中使用“Contact Form 7”插件，这个插件的另一个扩展名为“Contact Form 7 的 Material 设计”，现在，问题是我不知道这个插件是使用 Materialize CSS 还是一些其他 CSS。

试了很多，但我无法找出这个问题的原因，有什么解决办法吗？

如果有，请提及并告诉要编辑哪个文件？如果我需要编辑任何 PHP/CSS/JS 文件，我可以在哪里找到它？

这是我得到的:

这是我期望的:

使用的代码(按照联系表 7 Material 设计插件扩展的说明)

[md-form]

[md-text label="House no."]
[text* house-name]
[/md-text]

[md-text label="Street no."]
[text* street-name]
[/md-text]

[md-text label="Post Ofiice"]
[text* po-name]
[/md-text]

[/md-form]

Answer 1

我终于成功解决了这个问题。

现在可以正常运行了，我只是在里面编辑了几行代码

/var/www/html/wp-content/plugins/material-design-for-contact-form-7/assets/js/cf7-material-design.js

按照指示/提到 here (谷歌的 Material 设计指南)在 GitHub

可以看到代码

$('.cf7md-text, .cf7md-textarea').each(function() {
            var $this = $(this),
                $input = $this.find('input, textarea'),
                $span = $this.find('.wpcf7-form-control-wrap'),
                $tpl = $this.find('.cf7md-text-html').find('> div'),
                $label = $tpl.find('label');

            // I DECLARED THIS VARIABLE
            var text404 = $(this).val();
            // Move input
            $input.detach().prependTo($tpl);
            // Insert template
            $tpl.detach().appendTo($span);
            // Add md class to input
            $input.addClass('mdc-textfield__input');


            // MY CUSTOM CODE STARTS HERE

                if(text404 !== null) {
                    $tpl.addClass('mdc-textfield--upgraded');
                    $label.addClass('mdc-textfield__label--float-above');
                } else {
                //  $this.removeClass('mdc-textfield__input');
                }

            // MY CUSTOM CODE ENDS HERE


            //$if($this.hasValue)
            //$input.addClass('mdc')
            // Add 'for' to label
            $label.attr('for', $input.attr('name'));
            // Add autosize to textareas
            if($this.hasClass('cf7md-textarea-autosize')){
                $input.attr('rows', '2');
                autosize($input);
            }
        });