Code Coverage
 
Lines
Functions and Methods
Classes and Traits
Total
0.00%
0 / 24
n/a
0 / 0
 CRAP
n/a
0 / 0
1<?php
2/**
3 * Jetpack Forms Email Response Template
4 *
5 * The template contains several placeholders:
6 * %1$s is the hero text to display above the response (can be empty or filtered)
7 * %2$s is the response itself (form fields HTML).
8 * %3$s was a link to the response page in wp-admin (left empty for backwards compatibility)
9 * %4$s was a link to the embedded form to allow the site owner to edit it to change their email address (left empty for backwards compatibility)
10 * %5$s is the footer HTML (metadata: time, IP, browser, source URL).
11 * %6$s style HTML tag.
12 * %7$s tracking pixel
13 * %8$s is the actions HTML (buttons).
14 * %9$s is powered by email logo.
15 * %10$s is the respondent info section (avatar, name, email).
16 * %11$s is the metadata section (Date, Source, Device, IP).
17 * %12$s is an optional banner rendered at the very top of the email (e.g. test-submission notice).
18 *
19 * @package automattic/jetpack
20 */
21
22if ( ! defined( 'ABSPATH' ) ) {
23    exit( 0 );
24}
25
26$link_color           = \Automattic\Jetpack\Forms\ContactForm\Feedback_Email_Renderer::LINK_COLOR;
27$text_color           = \Automattic\Jetpack\Forms\ContactForm\Feedback_Email_Renderer::TEXT_COLOR;
28$text_secondary_color = \Automattic\Jetpack\Forms\ContactForm\Feedback_Email_Renderer::TEXT_SECONDARY_COLOR;
29$font_size_metadata   = \Automattic\Jetpack\Forms\ContactForm\Feedback_Email_Renderer::FONT_SIZE_METADATA;
30$font_size_button     = \Automattic\Jetpack\Forms\ContactForm\Feedback_Email_Renderer::FONT_SIZE_BUTTON;
31
32// Print-friendly styles: @media print hides decorative icons, tightens spacing,
33// and removes non-essential elements. Works for clients that preserve <style> tags
34// in print (Apple Mail ~52%, Outlook, Thunderbird). Gmail strips <style> when
35// printing so @media print has no effect there — a known limitation.
36// Defined as a variable so it can also be injected into <body> for Outlook.com.
37$print_style = '@media print {
38    body, .body { background-color: #ffffff !important; }
39    .container { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
40    .wrapper { padding: 16px 0 !important; }
41    .main { border-radius: 0 !important; }
42    .field-icon-cell { display: none !important; width: 0 !important; max-width: 0 !important; padding: 0 !important; overflow: hidden !important; }
43    .form-fields-inner { padding: 0 !important; }
44    .actions, .powered-by-table, .preheader { display: none !important; }
45    .collapse { display: none !important; }
46}';
47
48// phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable -- used in class-contact-form.php
49$template = '
50<!DOCTYPE html>
51<html>
52<head>
53    <meta charset="UTF-8">
54    <meta name="viewport" content="width=device-width, initial-scale=1.0">
55    %6$s
56</head>
57<body>
58    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
59        <tr>
60            <td class="collapse">&nbsp;</td>
61            <td class="container">
62                <div class="content">
63                    <span class="preheader">%1$s</span>
64
65                    <!-- Top-of-email banner (e.g. test-submission notice) -->
66                    %12$s
67
68                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="main">
69                        <tr>
70                            <td class="wrapper">
71                                <!-- Header title -->
72                                %1$s
73
74                                <!-- Respondent Info -->
75                                %10$s
76
77                                <!-- Metadata -->
78                                %11$s
79
80                                <!-- Form Fields -->
81                                <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%%" class="form-fields" style="margin-top: 8px;">
82                                    <tr>
83                                        <td class="form-fields-inner" style="padding: 16px 16px 24px;">
84                                            %2$s
85                                        </td>
86                                    </tr>
87                                </table>
88
89                                %3$s
90                                %4$s
91
92                                <!-- Actions -->
93                                <div class="actions">
94                                    %8$s
95                                </div>
96
97                                <!-- Powered By -->
98                                %9$s
99                            </td>
100                        </tr>
101                    </table>
102                </div>
103            </td>
104            <td class="collapse">&nbsp;</td>
105        </tr>
106    </table>
107    %7$s
108</body>
109</html>
110';
111
112// phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable -- used in class-contact-form.php
113$style = '<style media="all" type="text/css">
114    body {
115        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
116        -webkit-font-smoothing: antialiased;
117        font-size: 14px;
118        line-height: 1.5;
119        -ms-text-size-adjust: 100%;
120        -webkit-text-size-adjust: 100%;
121        color: ' . $text_color . ';
122    }
123
124    table {
125        border-collapse: separate;
126        mso-table-lspace: 0pt;
127        mso-table-rspace: 0pt;
128        width: 100%;
129    }
130
131    table td {
132        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
133        font-size: 14px;
134        vertical-align: top;
135    }
136
137    body {
138        background-color: #f6f7f7;
139        margin: 0;
140        padding: 0;
141    }
142
143    .body {
144        background-color: #f6f7f7;
145        width: 100%;
146    }
147
148    .container {
149        margin: 0 auto !important;
150        max-width: 830px;
151        padding: 0;
152        padding-top: 24px;
153        padding-bottom: 24px;
154        width: 830px;
155    }
156
157    .content {
158        box-sizing: border-box;
159        display: block;
160        margin: 0 auto;
161        max-width: 830px;
162        padding: 0;
163    }
164
165    .main {
166        background: #ffffff;
167        border-radius: 8px;
168        width: 100%;
169    }
170
171    .wrapper {
172        box-sizing: border-box;
173        padding: 40px 48px;
174    }
175
176    .preheader {
177        color: transparent;
178        display: none;
179        height: 0;
180        max-height: 0;
181        max-width: 0;
182        opacity: 0;
183        overflow: hidden;
184        mso-hide: all;
185        visibility: hidden;
186        width: 0;
187    }
188
189    /* Header */
190    .email-header {
191        font-size: 20px;
192        font-weight: 600;
193        color: ' . $text_color . ';
194        margin: 0 0 24px 0;
195        padding: 0;
196    }
197
198    .respondent-name {
199        font-size: 16px;
200        font-weight: 500;
201        color: ' . $text_color . ';
202        margin: 0 0 2px 0;
203    }
204
205    .respondent-email {
206        font-size: 14px;
207        color: ' . $text_secondary_color . ';
208        margin: 0;
209        line-height: 1.4;
210    }
211
212    .metadata-table {
213        width: 100%;
214    }
215
216    .metadata-table td {
217        padding: 4px 0;
218        font-size: ' . $font_size_metadata . ';
219        vertical-align: top;
220    }
221
222    .metadata-label {
223        color: #636363;
224        width: 110px;
225        padding-right: 12px;
226    }
227
228    .metadata-value {
229        color: ' . $text_color . ';
230    }
231
232    .metadata-value a {
233        color: ' . $link_color . ';
234        text-decoration: underline;
235    }
236
237    /* Form Fields */
238    .form-fields {
239        margin-top: 8px;
240    }
241
242    .form-fields-inner {
243        padding: 16px 16px 24px;
244    }
245
246    .action-button {
247        display: inline-block;
248        padding: 12px 24px;
249        border-radius: 4px;
250        font-size: ' . $font_size_button . ';
251        font-weight: 500;
252        text-decoration: none;
253        margin: 0 6px;
254    }
255
256    .action-button-primary {
257        background-color: #3858e9;
258        color: #ffffff !important;
259    }
260
261    .action-button-secondary {
262        background-color: transparent;
263        color: ' . $link_color . ' !important;
264        border: 1px solid ' . $link_color . ';
265    }
266
267    .powered-by {
268        text-align: center;
269        padding: 16px 0;
270    }
271
272    h1 {
273        font-size: 20px;
274        font-weight: 600;
275    }
276
277    p {
278        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
279        font-size: 14px;
280        font-weight: normal;
281        margin: 0;
282        margin-bottom: 16px;
283    }
284
285    .respondent-avatar-cell {
286        width: 64px;
287        vertical-align: middle;
288    }
289
290    .respondent-avatar-wrapper {
291        width: 48px;
292        height: 48px;
293        border-radius: 24px;
294        background-color: #f0f0f0;
295        text-align: center;
296        line-height: 48px;
297        font-size: 18px;
298        font-weight: 600;
299        color: #50575e;
300    }
301
302    .respondent-details-cell {
303        vertical-align: middle;
304    }
305</style>
306<style media="all" type="text/css">
307    /* Responsive */
308    @media only screen and (max-width: 640px) {
309        .main p,
310        .main td,
311        .main span {
312            font-size: 14px !important;
313        }
314
315        .wrapper {
316            padding: 16px !important;
317        }
318
319        .content {
320            padding: 0 !important;
321        }
322
323        .container {
324            padding: 0 !important;
325            padding-top: 8px !important;
326            padding-bottom: 8px !important;
327            width: 100% !important;
328        }
329
330        .main {
331            border-left-width: 0 !important;
332            border-radius: 0 !important;
333            border-right-width: 0 !important;
334        }
335
336        .test-submission-banner {
337            width: calc(100% - 16px) !important;
338            margin: 0 8px 24px 8px !important;
339        }
340
341        .collapse {
342            display: none;
343        }
344
345        h1 {
346            padding: 0 16px;
347        }
348
349        .powered-by {
350            padding: 0 16px 16px !important;
351        }
352
353        .form-fields-inner {
354            padding: 8px 8px 16px !important;
355        }
356
357        .metadata-label {
358            width: 90px !important;
359        }
360
361        .actions {
362            width: 100% !important;
363            padding: 0 !important;
364        }
365
366        .actions .button-table,
367        .actions .button-table tbody,
368        .actions .button-table tr,
369        .actions .button-cell {
370            display: block !important;
371            width: 100% !important;
372            max-width: 100% !important;
373        }
374
375        .button-cell {
376            text-align: center !important;
377            padding: 4px 0 !important;
378        }
379
380        .action-button {
381            display: block !important;
382            width: 100% !important;
383            box-sizing: border-box !important;
384            text-align: center !important;
385        }
386    }
387
388    ' . $print_style . '
389
390    @media all {
391        .ExternalClass {
392            width: 100%;
393        }
394
395        .ExternalClass,
396        .ExternalClass p,
397        .ExternalClass span,
398        .ExternalClass font,
399        .ExternalClass td,
400        .ExternalClass div {
401            line-height: 100%;
402        }
403
404        .apple-link a {
405            color: inherit !important;
406            font-family: inherit !important;
407            font-size: inherit !important;
408            font-weight: inherit !important;
409            line-height: inherit !important;
410            text-decoration: none !important;
411        }
412
413        #MessageViewBody a {
414            color: inherit;
415            text-decoration: none;
416            font-size: inherit;
417            font-family: inherit;
418            font-weight: inherit;
419            line-height: inherit;
420        }
421    }
422</style>';