Contact Form 7: как использовать WP шорткод и HTML в уведомлениях после сабмита формы

В этом примере рассказано, как создать свой шорткод в виде ссылки на скачиваемый документ, который будет работать в уведомлениях CF7, а также скрывать форму после успешной её отправки и концентрировать внимание пользователя на сообщении об успешной отправке (ну и нашей ссылке конечно же!).

В коде упоминается только суть - создание шорткода, его обработка в уведомлениях и на стороне фронта. Другие моменты опущены (стили, попапы и так далее), так как они у всех разные.

Шорткод будет такой:

[link text="текст ссылки" url="сама ссылка"]

Пример использования:

Скачать чек-лист можно по [link text="ссылке" url="https://disk.yandex.ru/i/dierbEef10iufA"]

Получится на выходе:

Скачать чек-лист можно по <a href="https://disk.yandex.ru/i/dierbEef10iufA" target="_blank">ссылке</a>

Код файла: CF7_Notification_Shortcodes.php

<?php

( new CF7_Notification_Shortcodes() )->hooks();

/**
 * Allows you to use shortcodes in the CF7 form settings in the "Notifications when submitting a form" tab.
 */
class CF7_Notification_Shortcodes {

	private array $shortcodes = [];

	public function hooks(): void {
		add_filter( 'wpcf7_submission_result', [ $this, 'special_mail_tags' ] );
		add_action( 'wp_enqueue_scripts', [ $this, 'attach_assets' ] );
	}
	
	public function attach_assets() {
		wp_enqueue_script( 
			'wpcf7submit_notification_with_html_tags', 
			// IMPORTANT: Replace the path to the file js to the one where you will have it
			get_template_directory_uri() . '/js/wpcf7submit_notification_with_html_tags.js',
			[ 'contact-form-7' ]
		);
	}

	public function special_mail_tags( $result ) {
		if ( empty( $result['message'] ) ) {
			return $result;
		}

		$this->register_shortcode_link();

		$result['message'] = do_shortcode( $result['message'] );

		$this->remove_shorcodes();

		return $result;
	}

	private function register_shortcode_link(): void {
		$shortcode = 'link';

		add_shortcode( $shortcode, static function ( $atts ) {
			return sprintf(
				'<a href="%s" target="_blank">%s</a>',
				esc_url( $atts['url'] ),
				esc_html( $atts['text'] )
			);
		} );

		$this->shortcodes[] = $shortcode;
	}

	public function remove_shorcodes(): void {
		foreach ( $this->shortcodes as $shortcode ) {
			remove_shortcode( $shortcode );
		}
	}

}

Код файла: wpcf7submit_notification_with_html_tags.js

document.addEventListener('wpcf7submit', function (event) {
	try {
		// Api
		let formCssId = event.detail.apiResponse.into.substring(1);
		let message = event.detail.apiResponse.message;
		let status = event.detail.apiResponse.status;
		// Dom
		let doc = new DOMParser().parseFromString(message, 'text/html');
		let htmlMessage = doc.body.innerHTML;
		let containerForm = document.getElementById(formCssId);
		let form = containerForm.querySelector('form');
		let containerMessage = form.querySelector('.wpcf7-response-output');

		setTimeout(function () {
			containerMessage.innerHTML = htmlMessage;

			// If you need to replace the form with a notification, otherwise delete it
			if ('mail_sent' === status) {
				form.innerHTML = containerMessage.outerHTML;
			}
		}, 100);
	} catch (error) {
		console.log(error);
	}
}, false);

Этот код предназначен для обработки уведомлений, отправляемых с помощью плагина контактной формы Contact Form 7 (CF7) в WordPress.

Код позволяет добавлять в эти уведомления шорткоды WordPress.

В этом коде используется шорткод link. Он позволяет добавлять в уведомления ссылки. Вы можете задать URL ссылки и отображаемый текст.

После этого в уведомлениях CF7 можно использовать шорткод:

[link url="http://example.com" text="Example"]

После обработки шорткод будет преобразован в HTML-код ссылки:

<a href="http://example.com" target="_blank" rel="noopener">Example</a>

Кроме того, код содержит JavaScript-обработчик события 'wpcf7submit', который обрабатывает результаты отправки формы CF7. Этот обработчик добавляет в HTML-структуру формы текст уведомления с HTML-тегами, включая обработанный шорткод 'link'.