Jump to content

ProcessWire the perfect CMS for HTML Emails


mrjasongorman
 Share

Recommended Posts

I recently had a revelation when building HTML emails, what's the difference between HTML emails, and HTML web pages? Other than the horrible table syntax, the result is the same, it's still HTML.

This got me thinking why not use a CMS to help generate the HTML emails based on a template? Just like we using a CMS to help generate HTML web pages.

We started by setting up ProcessWire (our usual CMS of choice) and added the relevent fields for the sections of the email. Then we took a previous email moved the content into ProcessWire and hooked up the code to pull that content back into the correct places. Repeater fields allowed us to have repeatable sections that are easy to add too, change order of or remove, giving us huge flexibility when a client changes their mind last minute. The speed of setting up and dealing with ProcessWire allowed us to go from concept to working prototype within a day.

To use the emails, we just view source of the generated page, and copy and paste into the email system. Sometimes Litmus inliner is required to allow the email to work in Outlook, but we can run it through that before pasting into the email system. Future development could be integrating a css inliner into the generation step, to avoid using litmus inliner.

Hope this helps show how ProcessWire can be used in a different scenario.

  • Like 7
Link to comment
Share on other sites

I do something similar, but instead of styling the page for the email, I have a separate template file for emails that builds the html for the email using tables and inline css and sends that directly to the list of subscribers. In my case, a monthly enewsletter is composed of several different articles (each a separate child page). The template for these child pages has a field to select what month/year the article belongs to. The email sending script queries matching articles, compiles, and sends.

The possibilities are endless really :)

  • Like 5
Link to comment
Share on other sites

I did a "hotel review" app that sends emails to clients and catches responses nicely in a PageTable!! I also use PW fields to configure the survey page (add hotel logo, color styles, headlines). The users just have a list under root, each one representing a hotel, displaying the responses nicely inside brackets next to the title. New hotel for review? Just add a new page and configure! Happy clients with minimum effort and straightforward interface! 

  • Like 4
Link to comment
Share on other sites

Nice to hear others are using this technique too. For my case the emailing system we were required to use has an "editor" but it's terrible, with PW i can add condition switches in the CMS to arrange partials in the email to a particular order etc. So much potential.

  • Like 2
Link to comment
Share on other sites

Quote

I did a "hotel review" app that sends emails to clients and catches responses nicely in a PageTable!! I also use PW fields to configure the survey page (add hotel logo, color styles, headlines). The users just have a list under root, each one representing a hotel, displaying the responses nicely inside brackets next to the title. New hotel for review? Just add a new page and configure! Happy clients with minimum effort and straightforward interface! 

This is really cool !! Have still to learn this.

  • Like 1
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By Joachim
      Long time user and huge fan of PW, but this time I can't find an answer to my question this time:
      For my social media buttons, I have a Repeater field called var_link_web with two fields: one is for the URL, and the other is an Images field containing two images that are used as a background-image for a <div>, of which the second is the ':hover' version (although activated through JavaScript here). 
      There are four instances of this Repeater, of which two are 'turned off'.
      I use the following PHP in my _main.php to call them, wrapped in <p><?php == ?></p>:
      $s_m_button = $variables->var_link_web; foreach($s_m_button as $button){ $button_image = $button->var_link_image->first->height(80); $button_image2 = $button->var_link_image->eq(1)->height(80); echo " <a href='$button->var_link_url'> <div class='image_link' style='background-image:url({$button_image->url})' onMouseOver='this.style.backgroundImage=url({$button_image2->url})' onMouseOut='this.style.backgroundImage=url({$button_image->url})'> </div> </a>"; }; ($variables leads to an unpublished page with several fields I want to have easy access to, and is defined in _init.php.)
      However, this gives me the following result:

      I have no idea where the extra <p>'s come from. The URL field has the 'HTML Entity Encoder' turned on. What's even weirder is that the HTML source file seemingly renders correctly:
      <p> <a href='https://www.facebook.com/'> <div class='image_link' style='background-image:url(/site/assets/files/1045/icons-facebook-square.0x80.png)' onMouseOver='this.style.backgroundImage="url(/site/assets/files/1045/icons-facebook-square2.0x80.png)"' onMouseOut='this.style.backgroundImage="url(/site/assets/files/1045/icons-facebook-square.0x80.png)"'> </div> </a> <a href='https://www.instagram.com/'> <div class='image_link' style='background-image:url(/site/assets/files/1046/icons-instagram-square.0x80.png)' onMouseOver='this.style.backgroundImage="url(/site/assets/files/1046/icons-instagram-square2.0x80.png)"' onMouseOut='this.style.backgroundImage="url(/site/assets/files/1046/icons-instagram-square.0x80.png)"'> </div> </a> </p> Removing the JavaScript has no effect. I'm probably missing something obvious, but am at a loss here.
       
      Thank you in advance!
    • By franciccio-ITALIANO
      Hi, I have created over twenty different templates for the same site.
      In all of them, the same long piece of html code appears. 
      Could someone suggest me the php code I need to write in the template files to link that piece of html code, which is always the same everywhere?
      What strategies could I use to link it?
      The problem is that this long piece of code that is identical everywhere, MAY change IN TIME. So, when I fix it, I would have to change it in all twenty template files.... 
       
    • By Zendex
      Hi,
      I am trying to make a site for a studio, and I wanted to set a specific hover effect for my text. I want the background of the text to be lit up in the full height of the nav bar but it doesn't do it. I showed the expected result in the png in the attached files. I will also set the code here below, the top part is a css reset.
       
      HTML:
      <!doctype html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>Zendex</title>
          <link href="style.css" rel="stylesheet" type="text/css">
          <link rel="preconnect" href="https://fonts.gstatic.com"> 
      <link href="https://fonts.googleapis.com/css2?family=Offside&display=swap" rel="stylesheet">
      </head>
      <body>
          <div id="nav_bar">
              <div id="Zendex">ZENDEX</div>
      <ul>
          <a href="contact.html"><li>CONTACT</li></a>
          <a href="films.html"><li>FILMS</li></a>
          <a href="about.html"><li>ABOUT</li></a>
          <a href="home.html"><li>HOME</li></a>
              </ul>
          </div>
          <div class="main"></div>
      </body>
      </html>
      CSS:
      @charset "UTF-8";
      /* CSS Document */
      html, body, div, span, applet, object, iframe,
      h1, h2, h3, h4, h5, h6, p, blockquote, pre,
      a, abbr, acronym, address, big, cite, code,
      del, dfn, em, img, ins, kbd, q, s, samp,
      small, strike, strong, sub, sup, tt, var,
      b, u, i, center,
      dl, dt, dd, ol, ul, li,
      fieldset, form, label, legend,
      table, caption, tbody, tfoot, thead, tr, th, td,
      article, aside, canvas, details, embed, 
      figure, figcaption, footer, header, hgroup, 
      menu, nav, output, ruby, section, summary,
      time, mark, audio, video {
          margin: 0;
          padding: 0;
          border: 0;
          font-size: 100%;
          font: inherit;
          vertical-align: baseline;
      }
      article, aside, details, figcaption, figure, 
      footer, header, hgroup, menu, nav, section {
          display: block;
      }
      body {
          line-height: 1;
          background-color: #6A6969;
      }
      ol, ul {
          list-style: none;
      }
      blockquote, q {
          quotes: none;
      }
      blockquote:before, blockquote:after,
      q:before, q:after {
          content: '';
          content: none;
      }
      table {
          border-collapse: collapse;
          border-spacing: 0;
      }
      /*-------------------------------------------------------------------------------------------------------------------------------------------------*/
      #nav_bar{
          overflow: hidden;
          position: fixed;
          top: 0;
          width: 100vw;
          height: 125px;
          background-color: #484848;
          border: solid 1px black;
      }
      li{
          font-size: 24px;
          text-shadow: 1px 1px 100px white;
          font-family: 'Offside', cursive;
          float: right;
          margin: 45px 50px 0px 0px;
          height: 125px;
      }
      #Zendex{
          font-size: 24px;
          text-shadow: 1px 1px 100px white;
          font-family: 'Offside', cursive;
          float: left;
          margin: 45px 0px 0px 100px;
          color: azure;
      }
      #home{
          
      }
      #about{
          
      }
      #films{
          
      }
      #contact{
          
      }
      ul{
          margin: 0px 50px 0px 0px;
          color: azure;
          height: 125px;
      }
      a:link{
          color: white;
      }
      li:hover{
          height: 125px;
          background-color: #6A6969;
          color: white;
      }
       

    • By hellomoto
      I can't tell what's wrong; my local development version appears just fine, but I copy over the site files and db online and the homepage content is not being contained. This is what it should look like (same site in the same browser, running on my localhost): http://imgur.com/UFZFzrd
      What could be the problem here? Sorry to bring up something so irrelevant to PW here, I just know that you all are a valiant and helpful group, and no one on StackExchange seems to even know what I'm talking about.
      Thanks a lot.
    • By DooM
      Hey guys,
      I'm using Form builder module by Ryan and I'm trying to render HTML success message after form is sent using value from this field:

      but it renders exactly as it is written in the field, not as HTML. To render it I just use echo
      <?= $successMessage ?> What am I missing?
       
      Thanks for any help. 🧒
×
×
  • Create New...