HTML mail text not showing up

Hi @solgudinde

I hope you are doing good today.

If you use <style> tags in your email confirmation this will be an issue for sure as those tags will be removed. Instead of this use inline styles for each element.

If you will have trouble with that, please:
– export your form, share it on google drive or dropbox, and share a link in your next reply
– share your HTML/CSS example in google drive so w could have a better picture

Kind Regards,
Kris

Hi again,

Thank you for the reply. I don’t know how to make it inline style at all.

Here’s my link: HTML code

Hi @solgudinde

This is the actual HTML of your form notification – that you put into the “Body” box of notification setting?

If yes, it will not work. It’s a complex HTML+CSS that would be in most part “stripped out” and in some part sanitized (HTML encoded) to be “database-safe” and to prevent possible execution of any possibly malicious and unsolicited scripts. it’s mostly due to security reasons.

Solution suggesting by my colleague earlier is a workaround that should work but mostly for a basic/simple CSS – not with that complex HTML+CSS.

This kind of HTML/CSS would require Formiantor to allow unsanitized HTML in notification settings and I’m not quite sure if it’s currently possible. I have asked our developers for advice on this and I’m awaiting their response.

I or one of my colleagues will update you about it here again soon.

Kind regards,
Adam

Hi Adam,

Okay, I see. It has to be more simple than that then.

Would you happen to know a HTML builder online that works with Forminator?

Best wishes,

Like, is there any possibility then to make something more graphic instead of just changing background colour etc. for the mail?

Hi @solgudinde

It’s not really about the “HTML Builder”/tool that you use to create such HTML. It’s about the fact that the code you put in the message body will anyway be modified by Forminator script to remove certain parts of it.

However, I already got response from our developers (as I asked them for advice on this) and there is a workaround. Here’s what to do:

1. add a bit of additional code to the site, this way:

– create an empty file with a .php extension (e.g. “forminator-mail-html-template.php”)
– copy and paste following code (exactly “as is”) into it

<?php 

add_action(
	'wp_ajax_forminator_save_builder',
	function() {
		add_filter(
			'wp_kses_allowed_html',
			function( $tags, $context ) {
				$tags[ 'style' ] = array();
				return $tags;
			},
			10,
			2
		);
	}
);

– save the file and use your favorite FTP client or a tool such as “File Manager” in cPanel to upload that file to the “/wp-content/mu-plugins” folder of your site’s WordPress installation on server

2. Edit notification

Once the code is added, edit your e-mail notification in Forminator
– switch message editor from “Visual” to “Text” tab
– replace your existing template with template code form this link

https://pastebin.com/rXCuaD0T

This is the same template that you provided, just with code cleaned up a bit in terms of syntax.

– save the notification and update the form.

It should then work.

Kind regard,
Adam

Hi Adam,

Thanks for the so well rounded support!

I think I understand what to do and how to do it, except for this part of the instructions:

save the file and use your favorite FTP client or a tool such as “File Manager” in cPanel to upload that file to the “/wp-content/mu-plugins” folder of your site’s WordPress installation on server

Is there any way you can expand this explanation so I, someone who isn’t very knowledgeable in this field, understand it? I have made the .php file, and downloaded FileZilla.

Best wishes, and have a nice weekend!

Edit: I realised that File Manager was a WP Plugin, I will now try

• This reply was modified 2 years, 2 months ago by solgudinde.

Okay, I tested it, and it almost looks right, but there’s a lot of coding in text format showing up above the visual mail.

As seen here: https://ibb.co/Dz7DZhd

Besides that, there’s just a few small details with the link on “hjemmeside” being big, and the menu “Booking” being off: https://ibb.co/9wDmjtD

Thank you so much!

Hi @solgudinde

Could you please try this workaround instead?

<?php
/**
* Plugin Name: [Forminator Pro] - Allow style in e-mail
* Plugin URI: https://premium.wpmudev.org/
* Description: Allow an e-mail template with style
* Author: Prashant Singh @ WPMUDEV
* Author URI: https://premium.wpmudev.org/
* License: GPLv2 or later
*/

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

add_action(
	'wp_ajax_forminator_save_builder',
	function() {
		add_filter(
			'wp_kses_allowed_html',
			function( $tags, $context ) {
				$tags[ 'style' ] = array();
				return $tags;
			},
			10,
			2
		);
	}
);

add_shortcode('wpmu_mail_render', 'wpmu_render_mail_html');
function wpmu_render_mail_html(){
	ob_start();
	?>
	  ... Add your email HTML here ...
	<?php
	$end_result = ob_get_clean();
	return $end_result;
}
add_filter( 'forminator_replace_variables', 'do_shortcode' );

Add the HTML of your email replacing the … Add your email HTML here …

Then inside the Forminator use the shortcode:

[wpmu_mail_render]

Let us know the result you got.
Best Regards
Patrick Freitas

Hi Patrick,

Can you show a screenshot of where I am to find this? I don’t see a HTML option anywhere in the reciepient mail box. I only see the option between text and visual. As seen here:

We don’t have the premium version of Forminator either.

Thank you so much for your help!

Best wishes

HI @solgudinde

The solution that Patrick shared is slightly different than the one I suggested so here’s step by step how to add it:

1. remove the code that I previously shared with you from the site

2. now again create an empty file with .php extension (e.g. “another-forminator-html-fix.php”)

3. copy and paste Patrick’s code into it

Now comes the most important part. Inside that code there is this line

... Add your email HTML here ...

so you need to replace this particular line with entire code of your HTML e-mail template. So instead of putting mail template code into notification in Forminator settings, you put it in place of this line in Patrick’s code

4. then save the file and upload it to the “/wp-content/mu-plugins” (just like you did previously)

5. and now edit your e-mail notificaiton in Formiantor and replace entire message with this single thing

[wpmu_mail_render]

Save notification and update the form and test it.

Best regards,
Adam

Thank you sooooo much! It worked!

If I need different mails for different forms, is there any way of doing it using this method too?

Best regards!

Hello @solgudinde

All you have to “duplicate” for another form/email is the following part in the latest code provided:

add_shortcode('wpmu_mail_render', 'wpmu_render_mail_html');
function wpmu_render_mail_html(){
	ob_start();
	?>
	  ... Add your email HTML here ...
	<?php
	$end_result = ob_get_clean();
	return $end_result;
}

This actually builds the [wpmu_mail_render] shortcode you’re using in Forminator, so similarly you can copy/paste this whole block to create a second shortcode like [wpmu_mail_render_2]:

add_shortcode('wpmu_mail_render_2', 'wpmu_render_mail_html_2');
function wpmu_render_mail_html_2(){
	ob_start();
	?>
	  ... Add your email HTML here ...
	<?php
	$end_result = ob_get_clean();
	return $end_result;
}

You can add this new block on the same file you used before, starting in a new line at the bottom.

Let us know if more assistance is needed.

Thank you,
Dimitris

Hi again Dimitris,

Thank you for your response!

Should I add the whole

<?php
/**
* Plugin Name: [Forminator Pro] - Allow style in e-mail
* Plugin URI: https://premium.wpmudev.org/
* Description: Allow an e-mail template with style
* Author: Prashant Singh @ WPMUDEV
* Author URI: https://premium.wpmudev.org/
* License: GPLv2 or later
*/

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

add_action(
	'wp_ajax_forminator_save_builder',
	function() {
		add_filter(
			'wp_kses_allowed_html',
			function( $tags, $context ) {
				$tags[ 'style' ] = array();
				return $tags;
			},
			10,
			2
		);
	}
);

prior to

`add_shortcode(‘wpmu_mail_render_2’, ‘wpmu_render_mail_html_2’);
function wpmu_render_mail_html_2(){
ob_start();
?>
… Add your email HTML here …
<?php
$end_result = ob_get_clean();
return $end_result;
}`

for it to work in the same file?

Other than that, it works perfectly, and I’m so happy for your help!

Best wishes

Hi @solgudinde

No need to repeat the whole code. It is only about that part where you need to change/add numbers if more templates need to be used:

add_shortcode('wpmu_mail_render_2', 'wpmu_render_mail_html_2');
function wpmu_render_mail_html_2(){
	ob_start();
	?>
	  ... Add your email HTML here ...
	<?php
	$end_result = ob_get_clean();
	return $end_result;
}

add_shortcode('wpmu_mail_render_3', 'wpmu_render_mail_html_3');
function wpmu_render_mail_html_3(){
	ob_start();
	?>
	  ... Add your email HTML here ...
	<?php
	$end_result = ob_get_clean();
	return $end_result;
}

etc.

Kind Regards,
Kris