Support

Home Forums Event Espresso Premium Nicely formatted HTML registration confirmation emails – Impossible Mission?

Nicely formatted HTML registration confirmation emails – Impossible Mission?

Posted: January 27, 2014 at 10:46 am


Chris Stambaugh

January 27, 2014 at 10:46 am

Hi,

I’ve been struggling, trying to create a nicely formatted HTML email to go out to attendees of any event.

It seems that the shortcodes break the HTML formatting.

This seems like a huge flaw to me in trying to run professional events. Is there a way around it?

Thanks,

Paul


Tony

  • Support Staff

January 28, 2014 at 5:58 am

Hi Paul,

Can I ask which shortcodes are breaking the formatting?

Are you using any html email templates?


Chris Stambaugh

January 29, 2014 at 11:39 am

Yes, I’m using an email template. Even when I try to use a simple table, the formatting breaks.

I have two lines that look like this:

<code>This class starts at [start_time] on [start_date] and runs until [end_time] on [end_date].

[venue_title]</code>

In between the [end_date] tag and the [venue_title] tag, the formatting breaks.


Dean

January 31, 2014 at 4:52 am

Hi Paul,

Could you post the HTML content of the email? Perhaps to a pastebin.com?


Chris Stambaugh

January 31, 2014 at 10:36 am

I’m finding this process frustrating as given our time difference, I can only get 1 reply a day which makes for slooowwww progress.

Anyway. here’s the code…

<code>&lt;table
style=&quot;color: rgb(34, 34, 34); font-family: arial,sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; width: 480px;&quot;
border=&quot;1&quot;&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td
style=&quot;margin: 0px; font-family: arial,sans-serif;&quot;&gt;&lt;br&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;&lt;tbody&gt;
    &lt;tr&gt;
      &lt;td
style=&quot;margin: 0px; font-family: arial,sans-serif;&quot;
bgcolor=&quot;#ffffff&quot;&gt;&amp;nbsp;&lt;img
src=&quot;http://www.bsop.ca/wp-content/uploads/2014/01/bsop_logo.082812_480.jpg&quot;
alt=&quot;Burwell School of Photography Logo&quot;
style=&quot;min-height: 87px; width: 480px; height: 87px;&quot;&gt;&lt;/td&gt;
      &lt;td
style=&quot;margin: 0px; font-family: arial,sans-serif;&quot;&gt;&lt;br&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td
style=&quot;margin: 0px; font-family: arial,sans-serif;&quot;&gt;&lt;br&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td
style=&quot;margin: 0px; font-family: arial,sans-serif;&quot;&gt;***This
is an automated response - Do Not Reply***&lt;br&gt;
      &lt;br&gt;
Thank you [fname] [lname] for registering for [event].&lt;br&gt;
      &lt;br&gt;
This event starts at [start_time] on [start_date] and runs until
[end_time] on [end_date].&lt;br&gt;
      &lt;br&gt;
Location:&lt;br&gt;
      &lt;br&gt;
[location]&lt;br&gt;
      &lt;br&gt;
Phone: [location_phone]&lt;br&gt;
      &lt;br&gt;
Google Map: [google_map_link]&lt;br&gt;
      &lt;br&gt;
We hope that you will find this event both informative and enjoyable.
Should you have any questions, please contact [contact].&lt;br&gt;
      &lt;br&gt;
If you have not done so already, please submit your payment in the
amount of [cost].&lt;br&gt;
      &lt;br&gt;
Click here to review your payment information [payment_url].&lt;br&gt;
      &lt;br&gt;
[edit_attendee_link]&lt;br&gt;
      &lt;br&gt;
Thank You.&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code>


Chris Stambaugh

January 31, 2014 at 10:37 am

<pre class=”brush: html; gutter: true; first-line: 1; highlight: []; html-script: false”><table
style="color: rgb(34, 34, 34); font-family: arial,sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; width: 480px;"
border="1">
<tbody>
<tr>
<td
style="margin: 0px; font-family: arial,sans-serif;"><br>
</td>
</tr>
</tbody><tbody>
<tr>
<td
style="margin: 0px; font-family: arial,sans-serif;"
bgcolor="#ffffff"> <img
src="http://www.bsop.ca/wp-content/uploads/2014/01/bsop_logo.082812_480.jpg&quot;
alt="Burwell School of Photography Logo"
style="min-height: 87px; width: 480px; height: 87px;"></td>
<td
style="margin: 0px; font-family: arial,sans-serif;"><br>
</td>
</tr>
<tr>
<td
style="margin: 0px; font-family: arial,sans-serif;"><br>
</td>
</tr>
<tr>
<td
style="margin: 0px; font-family: arial,sans-serif;">***This
is an automated response – Do Not Reply***<br>
<br>
Thank you [fname] [lname] for registering for [event].<br>
<br>
This event starts at [start_time] on [start_date] and runs until
[end_time] on [end_date].<br>
<br>
Location:<br>
<br>
[location]<br>
<br>
Phone: [location_phone]<br>
<br>
Google Map: [google_map_link]<br>
<br>
We hope that you will find this event both informative and enjoyable.
Should you have any questions, please contact [contact].<br>
<br>
If you have not done so already, please submit your payment in the
amount of [cost].<br>
<br>
Click here to review your payment information [payment_url].<br>
<br>
[edit_attendee_link]<br>
<br>
Thank You.</td>
</tr>
</tbody>
</table>


Tony

  • Support Staff

February 3, 2014 at 7:46 am

Hi Paul,

I used the code you posted and did run into issues, however these were not due to the shortcodes.

The reason the format is breaking is due to how WordPress handles the code once saved and/or when switching between Visual & Text mode.

With the code you posted the forum altered some small parts but after fixing the outcome was this http://d.pr/i/yLVU

This was due to the whitespace added to breakup the wording (when switching from Text to Visual then back again you’ll find any P tags are no longer there).

Removing all white-space resulted in the format (table) correctly outputting this: http://d.pr/i/wr2z

Then to space the wording use P tags rather than whitespace and BR tags. So you end up with this http://d.pr/f/FKr3

Output http://d.pr/i/JtJb

Unfortunately, if you switch between Visual and Text mode within WP those P tags will be once again lost, breaking the layout.

The best advice I can offer currently is to work locally on the templates, copy and paste them into the editor in Text mode, then save and test.

If you ever switch to Visual mode on the editor itself, remember not to save the email after doing so.

Hope that helps 🙂


Chris Stambaugh

February 3, 2014 at 7:53 am

Excellent! Thanks for the help!

Paul


Chris Stambaugh

February 3, 2014 at 4:30 pm

The big problem is that when I post my beautiful code from Dreamweaver, that a bunch of p and br codes get added. I’ve tried adding various plugins that allow for RAW HTML to be pasted in, but they don’t seem to work for the code editor for editing EventEspresso emails. So, I’m stuck editing within WordPress, which I guess is workable, but not very preferable.

Any way of updating the HTML editor used in EventEspresso so it doesn’t add these br and p html codes to my pasted code from Dreamweaver?


Josh

  • Support Staff

February 5, 2014 at 7:54 am

Hi Paul,

It is possible to disable the WP autop function by means of a filter:

http://davidwalsh.name/disable-autop


Chris Stambaugh

February 5, 2014 at 11:35 am

Josh,

Yes, you’d think that would work, but have you tried it? Doesn’t make the slightest bit of difference in my experience. As soon as I paste the code and click Save Options, a ton of br / codes get added. SUPER frustrating.

Any other ideas?

Best regards,

Paul


Josh

  • Support Staff

February 5, 2014 at 12:04 pm

I did try it and it worked for me. (no tags added for line breaks). Does the code that you’re pasting in from Dreamweaver contain line breaks?

It may help to rule out if there is a theme function or another plugin that’s altering the wpautop filter (usually they’re shortcode functions in themes or plugins that are the culprit). A quick way to test this is by temporarily deactivating all plugins and switch to one of the twenty* themes, or try it out on a vanilla WP install.


Josh

  • Support Staff

February 5, 2014 at 12:04 pm

I did try it and it worked for me. (no tags added for line breaks). Does the code that you’re pasting in from Dreamweaver contain line breaks?

It may help to rule out if there is a theme function or another plugin that’s altering the wpautop filter (usually they’re shortcode functions in themes or plugins that are the culprit). A quick way to test this is by temporarily deactivating all plugins and switch to one of the twenty* themes, or try it out on a vanilla WP install.


Chris Stambaugh

February 6, 2014 at 7:35 am

I’ve tried disabling all non essential plugins (mine is a production site), yet the problem remains.

However, if I create a post and paste my HTML in there, I don’t get the extra tags added.

If I create a new page and paste my HTML in there, I don’t get the extra tags added.

I only get the extra tags added to the Email Settings section of Event Esspresso. To me, that points to a problem with Event Espresso.

Very, very, very frustrating. I’d really appreciate a solution that works.

Paul


Josh

  • Support Staff

February 6, 2014 at 7:49 am

Hi Paul,

I have one question about what you reported here:

> If I create a new page and paste my HTML in there, I don’t get the extra tags added.

Is that with the wpautop filter disabled or no? Also, are you posting this in while in the HTML view or the visual editor mode?

One more thing that you can do that will help us help you: Can you post the contents of your html formatted email into a pastebin and link to it here?

Thanks.


Chris Stambaugh

February 6, 2014 at 8:04 am

With wpautop filter disabled or not, I don’t get the extra br and p tags when creating a post or page.

I am posting in while in the HTML (text) view.

Here’s an example email (from Eventbrite), that I’m trying to use as a template, but it is next to impossible with the reformatting that goes on in the Event Espresso email editor. This is just the plain email, without an Event Espresso customization added or even trying to make it into a registration email. Just trying to see if I can get it to spit out a template like this as a nicely formatted email.

http://pastebin.com/gk3jsKch

Paul


Josh

  • Support Staff

February 6, 2014 at 9:49 am

Hi Paul,

Thanks for posting the html code, and it helps me see what’s going on. It turns out that there are line breaks within the html tags in the html that you posted, and the WordPress wpautop function is adding more br tags for each of them. If you look at the source of the posts you tried testing on the front end (not within the editor), you’ll see br tags for each of the line breaks in the source. At least that’s what I’m seeing, here’s a screenshot of the source of a post that has the html pasted in.

So it turns out that this isn’t an Event Espresso function that’s adding the new lines, it’s a core WP function. The WP codex says that this is the default behavior:

Preserve line breaks. When set to true, any line breaks remaining after paragraph conversion are converted to HTML
. Line breaks within script and style sections are not affected.

http://codex.wordpress.org/Function_Reference/wpautop#Parameters

There are a couple ways to fix this:

1) If you can remove the new lines from the html that you’re copying from before pasting into a WP editor, that will fix the issue you’re seeing. Here’s a gist of the same html you sent, with most of the new lines removed:

https://gist.github.com/joshfeck/6f34b1897b205499eb4b

2) A simpler way would be to set the wpautop function so it doesn’t add the line breaks. If you look in /event-espresso/includes/functions/admin.php you’ll see this function on line 85:

function espresso_admin_format_content($content = '') {
	return wpautop(stripslashes_deep(html_entity_decode($content, ENT_QUOTES, "UTF-8")));
}

which you can change to:

function espresso_admin_format_content($content = '') {
	return wpautop(stripslashes_deep(html_entity_decode($content, ENT_QUOTES, "UTF-8")), $br=0);
}

What that will do is tell WordPress to not preserve the line breaks in the html.

What we can do in a future version of ee is add a filter there where the $br value is set so this can be changed without directly editing core files. But for now, making that small edit should get you going on your way.


Chris Stambaugh

February 6, 2014 at 8:55 pm

Hi,

Thanks so much for your help. We’re getting closer in that the code I see in the editor looks good now, but the emails being sent are still formatted badly.

See this example: http://pastebin.com/BDESLs3g

Lots of br and p tags still being added to the email source. Even a P tag before the html tag.

Maybe there is somewhere else (html generator? just guessing) where this auto formatting needs to be disabled?

Thanks,

Paul


Chris Stambaugh

February 6, 2014 at 8:57 pm

Just for clarification, the html referenced in my previous message is a copy/past taken from the email message source.

Paul


Dean

February 7, 2014 at 4:34 am

Hi Paul,

I think I’ve found a fix but like Josh’s code above it requires a core code edit.

In includes/functions/email.php on line 577 change this

return wp_mail($send_to, stripslashes_deep(html_entity_decode($email_subject, ENT_QUOTES, "UTF-8")), stripslashes_deep(html_entity_decode(wpautop($email_body), ENT_QUOTES, "UTF-8"), $br=0), $headers);

to this

return wp_mail($send_to, stripslashes_deep(html_entity_decode($email_subject, ENT_QUOTES, "UTF-8")), stripslashes_deep(html_entity_decode($email_body, ENT_QUOTES, "UTF-8"), $br=0), $headers);

What this is doing is simply removing the WP auto formatting completely from the email.

Example with added [fname] email tag http://take.ms/rvLPX


Chris Stambaugh

February 7, 2014 at 9:24 am

Awesome! That makes all the difference. Thanks for sticking with this issue.

Any chance of building in this functionality in the future so that I don’t have to edit the php files each time there’s an upgrade?

Best regards,

Paul


Josh

  • Support Staff

February 7, 2014 at 11:00 am

Hi Paul,

What we’re planning on is adding some filters so that the wpautop function can be selectively changed/removed by means of a little function plugin/code snippet in a function file.

If we remove these wholesale it will likely break everyone else’s emails that depend on wpautop being there.

The support post ‘Nicely formatted HTML registration confirmation emails – Impossible Mission?’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso