不使用插件让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 );

 

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"Yongwp.com",如遇到无法解压的请联系管理员!
WordPress外贸建站 » 不使用插件让CONTACT FORM 7 提示弹窗显示

查看优质的WP整站案例

立即查看 联系我们