不使用插件让CONTACT FORM 7 提示弹窗显示

不会代码 插件：
【Popup Message Contact Form 7 】链接：wordpress.org/plugins/popup-message-contact-form-7/

为什么我们不使用任何插件来显示Contact Form 7弹出成功消息？因为无需插件即可做到这一点非常简单，结果我们可以为所有表单创建一个弹出窗口，或者为所有表单创建单独的弹出窗口，因此模态可以具有您喜欢的任何设计，依此类推。通常，插件允许您配置选项，而配置则几乎是不可能的。

在我们的案例中，我们将为所有联系表单7成功消息显示一个弹出窗口。

为了显示带有弹出窗口的Contact Form 7消息，我们将使用Fancybox 3。您可以将Fancybox与其他样式和脚本分别集成到自定义主题（子主题）或插件中，但是我们正在使用SASS，并使用Gulp.js将所有样式和脚本编译成两个文件：app.css和app.js。这是将它们实现到您的自定义主题的代码：

function wp_enqueue_scripts_func() {

	if ( !is_admin() ) {
	  wp_enqueue_style( 'theme-css', get_template_directory_uri() . '/dist/css/app.css', array(), '' );

		// Deregister the jquery version bundled with WordPress.
		wp_deregister_script( 'jquery' );
		// CDN hosted jQuery placed in the header, as some plugins require that jQuery is loaded in the header.
		wp_enqueue_script( 'jquery', get_template_directory_uri() . '/dist/js/jquery.min.js', array(), '3.3.1', false );
		// Deregister the jquery-migrate version bundled with WordPress.
		wp_deregister_script( 'jquery-migrate' );
		// CDN hosted jQuery migrate for compatibility with jQuery 3.x
		wp_register_script( 'jquery-migrate', '//code.jquery.com/jquery-migrate-3.0.1.min.js', array('jquery'), '3.0.1', false );

		wp_enqueue_script( 'theme-script', get_template_directory_uri() . '/dist/js/app.js', array('jquery'), '', true );

		wp_localize_script( 'theme-script', 'theme', array(
			'url' => home_url(),
			'themeUrl' => get_template_directory_uri(),
			'ajaxurl' => admin_url( 'admin-ajax.php' )
		) );
	}
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_scripts_func' );

将Contact Form 7插件安装到WordPress网站中并配置要显示给访问者的表单。现在，填写表格并提交之后，人们可以获取成功或错误消息。我们将在灯箱内显示成功消息，而不会显示错误消息的模式。最好使用regexp处理它们，以使它们看起来不错而不重复。我们可以做到这一点，但是当我们为一个客户开发一个网站时，就出现了本文的想法，并且需要它。因此，要显示表单的字段不正确，我们将不显示任何消息，而对于错误的输入将仅显示一个红色边框。如果您的表单包含例如两个字段（名称和电子邮件），就足够了。

/**
 * Display Contact Form 7 messages in a popup.
 */
function ContactForm7_popup() {
	$return = <<<EOT
	<script>
		jQuery(".wpcf7-form input[type='submit'], .wpcf7-form button").click(function(event) {
			jQuery( document ).one( "ajaxComplete", function(event, xhr, settings) {
				var data = xhr.responseText;
				var jsonResponse = JSON.parse(data);
				// console.log(jsonResponse);
				if(! jsonResponse.hasOwnProperty('into') || $('.wpcf7' + jsonResponse.into).length === 0) return;
				// alert(jsonResponse.message);
				$.fancybox.open(
					'<div class="message">' + jsonResponse.message + '</div>',
					{
						smallBtn : true,
						toolbar : false
					}
				);
			});
		});
	</script>
	<style>
		div.wpcf7-response-output, div.wpcf7-validation-errors { display: none !important; }
		span.wpcf7-not-valid-tip { display: none; }
		input[aria-invalid="true"], select[aria-invalid="true"] { border-color: #ff2c00; // background-color: rgba(153,0,0,0.3); }
	</style>

EOT;
	echo $return;
}
add_action( 'wp_footer', 'ContactForm7_popup', 20 );