Allows you to use html in cf7 notifications + replaces a successfully submitted form with a success message

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);