Custom HTML Templates

  • Resolved RafaelDeJongh

    (@rafaeldejongh)


    8 years, 3 months ago

    So I made my own HTML template which is similar to my Contact Form 7 template, and I thought I would just copy and paste the same template I use there, but all of the tags are getting stripped! Template in question: https://codepen.io/RafaelDeJongh/pen/zRrJjY

    I don’t really need the addon to create templates with, I rather just need a way to enter my own template in the notifications settings.

    So how would I perform such a task where I just use this template, without the need of that additional plugin?

Viewing 4 replies - 1 through 4 (of 4 total)
  • NateWr

    (@natewr)

    8 years, 3 months ago

    Hi @rafaeldejongh,

    If you’re familiar with WordPress’ hooks system, the easiest thing to do is to use the settings filter to override the setting values with your own. The filters you’ll want to use are:

    
rtb-setting-template-booking-admin
rtb-setting-template-booking-user
rtb-setting-template-confirmed-user
rtb-setting-template-rejected-user
rtb-setting-subject-admin-notice
    Thread Starter RafaelDeJongh

    (@rafaeldejongh)

    8 years, 3 months ago

    Alright great, I’ll take a look at those hooks!
    Much appreciated!

    Thread Starter RafaelDeJongh

    (@rafaeldejongh)

    8 years, 3 months ago

    Well that worked better than expected! Thanks for the assistance.

    Would be great to have a default html editor though!

    For those who want to do the same here’s an example of the code with my template:

    
function reservation_admin_message(){
  return '<!doctype html><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="nl"><head><meta http-equiv="content-type" content="text/html;charset=utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta name="format-detection" content="telephone=no"/><style>body{margin:0;padding:0;min-width:100%;width:100%!important;height:100%!important} body,table,td,div,p,a{-webkit-font-smoothing:antialiased;text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height:100%} table,td{mso-table-lspace:0;mso-table-rspace:0;border-collapse:collapse!important;border-spacing:0} img{border:0;line-height:100%;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;max-width:100%;height:auto} #outlook a{padding:0} #mainbody{background:#ffffff} .ReadMsgBody{width:100%} .ExternalClass{width:100%} .ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{line-height:100%} a{color:#222222}a:hover{color:#e3c64e} a img{transition:all .3s ease}a:hover img{opacity:.9} strong{font-weight:600} .resbtn{width:100%;display:block;border-radius:5px}</style> <title>getRank - Reservering</title></head><body topmargin="0" rightmargin="0" bottommargin="0" leftmargin="0" marginwidth="0" marginheight="0" width="100%" style="border-collapse:collapse;border-spacing:0;margin:0;padding:0;width:100%;height:100%;-webkit-font-smoothing:antialiased;text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height:100%;background-color:#fafafa;color:#000000" bgcolor="#fafafa" text="#000"><table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0;margin:0;padding:0;width:100%" class="background">
  <tr>
   <td align="center" valign="top" style="border-collapse:collapse;border-spacing:0;margin:0;padding:0" bgcolor="#fafafa">
    <table id="mainbody" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" width="750" style="border-collapse:separate!important;border-spacing:0;padding:0;width:inherit;max-width:750px;margin-top:50px;-webkit-box-shadow:0 1px 4px #dddddd;-moz-box-shadow:0 1px 4px #dddddd;box-shadow:0 1px 4px #dddddd;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;border:1px solid #dddddd;background:#ffffff!important" class="container">
     <tr style="border-collapse:collapse;border-spacing:0;margin:0;padding:0;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-moz-border-radius-topleft:8px;-moz-border-radius-topright:8px;border-top-left-radius:8px;border-top-right-radius:8px">
      <td align="center" class="header" valign="top" style="border-collapse:collapse;border-spacing:0;margin:0;padding:0;padding-left:6%;padding-right:6%;width:88%;padding-top:10px;padding-bottom:10px;background:#e3c64e;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-moz-border-radius-topleft:8px;-moz-border-radius-topright:8px;border-top-left-radius:8px;border-top-right-radius:8px"><img border="0" vspace="0" hspace="0" src="https://www.tzotkiekske.be/wp-content/uploads/2017/10/tzotkiekske-logo-w.png" width="300" height="70" alt="‘t zot kiekske" title="‘t zot kiekske" style="color:#000000;font-size:10px;margin:0;padding:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;border:none;display:block;max-width:100%;height:auto"/>
      </td>
     </tr>
     <tr>
      <td align="center" valign="top" style="border-collapse:collapse;border-spacing:0;margin:0;padding:15px 6%;width:88%;font-size:20px;font-weight:bold;line-height:130%;color:#000000;font-family:sans-serif" class="header">
      Er is een nieuwe reservering aangevraagd door:
      </td>
     </tr>
     <tr>
      <td align="center" valign="top" style="border-collapse:collapse;border-spacing:0;margin:0;padding:0 6% 20px;width:88%;font-size:17px;font-weight:400;line-height:160%;color:#000000;font-family:sans-serif;white-space:pre-line;text-align:left;border-width:2px 0 2px 0;border-style:solid;border-color:#e3c64e;" class="paragraph">
      <strong style="font-weight:600">Gereserveerd voor:</strong> {date}
      <strong style="font-weight:600">Reserverende:</strong> {user_name}
      <strong style="font-weight:600">Met:</strong> {party} personen
      <strong style="font-weight:600">E-mail:</strong> <a href="mailto:{user_email}?subject=‘t zot kiekske reserveringsaanvraag: {user_name} - {party} Personen - Tegen: {date}">{user_email}</a>
      <strong style="font-weight:600">Telefoon:</strong> <a href="tel:{phone}">{phone}</a>
      <br>{message}
      </td>
     </tr>
     <tr>
      <td align="center" valign="top" style="border-collapse:collapse;border-spacing:0;margin:0;padding:20px 6%;width:88%;font-size:13px;font-weight:400;line-height:150%;font-family:sans-serif" class="footer">
        <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0;margin:0;padding:0;width:100%">
          <tr>
            <td align="center" valign="middle" style="margin:0;padding:0 10px;border-collapse:collapse;border-spacing:0;width:33.333%"><a href="{bookings_link}" target="_blank" style="background:#00a1f1;width:100%;display:block;border-radius:5px" class="resbtn"><img src="https://www.tzotkiekske.be/wp-content/uploads/2018/02/view.png" alt="Bekijk nog niet bevestigde reserveringen" title="Bekijk nog niet bevestigde reserveringen"/></a></td>
            <td align="center" valign="middle" style="margin:0;padding:0 10px;border-collapse:collapse;border-spacing:0;width:33.333%"><a href="{confirm_link}" target="_blank" style="background:#7dbb00;width:100%;display:block;border-radius:5px" class="resbtn"><img src="https://www.tzotkiekske.be/wp-content/uploads/2018/02/accept.png" alt="Bevestig deze reservering" title="Bevestig deze reservering"/></a></td>
            <td align="center" valign="middle" style="margin:0;padding:0 10px;border-collapse:collapse;border-spacing:0;width:33.333%"><a href="{close_link}" target="_blank" style="background:#ea4235;width:100%;display:block;border-radius:5px" class="resbtn"><img src="https://www.tzotkiekske.be/wp-content/uploads/2018/02/deny.png" alt="Weiger deze reservering" title="Weiger deze reservering"/></a></td>
            </tr>
       </table>
      </td>
     </tr>
     <tr>
      <td align="center" valign="top" style="border-collapse:collapse;border-spacing:0;margin:0;padding:20px 6%;width:88%;font-size:13px;font-weight:400;line-height:150%;font-family:sans-serif;border-top:2px solid #e3c64e" class="footer">
       Copyright &copy; 2018 | <a href="https://www.tzotkiekske.be" target="_blank">‘t zot kiekske</a> | <a href="mailto:info@tzotkiekske.be" target="_blank">info@tzotkiekske.be</a> | Alle rechten voorbehouden.
      </td>
     </tr>
     </td>
     </tr>
    </table>
   </td>
  </tr>
 </table>
</body>
</html>';
}
add_filter('rtb-setting-template-booking-admin','reservation_admin_message');

    I did had to remove the auto link formatting that was hard coded in the plugin but well after that everything works 😉

    NateWr

    (@natewr)

    8 years, 3 months ago

    Glad you were able to get it working!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Custom HTML Templates’ is closed to new replies.