Code Coverage
 
Lines
Functions and Methods
Classes and Traits
Total
0.00%
0 / 156
0.00%
0 / 1
 CRAP
0.00%
0 / 1
Form_View
0.00%
0 / 156
0.00%
0 / 1
 12
0.00%
0 / 1
 display
0.00%
0 / 156
0.00%
0 / 1
 12
1<?php
2/**
3 * Contact_Form_View class.
4 *
5 * @package automattic/jetpack-forms
6 */
7
8namespace Automattic\Jetpack\Forms\ContactForm;
9
10use Automattic\Jetpack\Assets;
11use Automattic\Jetpack\Forms\Jetpack_Forms;
12
13/**
14 * Template for form builder
15 */
16class Form_View {
17
18    /**
19     * Display form view.
20     */
21    public static function display() {
22        /**
23         * Filter to modify the limit of 5 additional contact form fields.
24         *
25         * @module contact-form
26         *
27         * @since 3.2.0
28         *
29         * @param int 5 Maximum number of additional fields.
30         */
31        $max_new_fields = apply_filters( 'grunion_max_new_fields', 5 );
32
33        Assets::register_script(
34            'grunion',
35            '../../dist/contact-form/js/grunion.js',
36            __FILE__,
37            array(
38                'dependencies' => array( 'jquery', 'jquery-ui-sortable', 'jquery-ui-draggable' ),
39                'version'      => \JETPACK__VERSION,
40            )
41        );
42
43        wp_localize_script(
44            'grunion',
45            'GrunionFB_i18n',
46            array(
47                'nameLabel'             => esc_attr( _x( 'Name', 'Label for HTML form "Name" field in contact form builder', 'jetpack-forms' ) ),
48                'emailLabel'            => esc_attr( _x( 'Email', 'Label for HTML form "Email" field in contact form builder', 'jetpack-forms' ) ),
49                'urlLabel'              => esc_attr( _x( 'Website', 'Label for HTML form "URL/Website" field in contact form builder', 'jetpack-forms' ) ),
50                'commentLabel'          => esc_attr( _x( 'Comment', 'noun', 'jetpack-forms' ) ),
51                'newLabel'              => esc_attr( _x( 'New Field', 'Default label for new HTML form field in contact form builder', 'jetpack-forms' ) ),
52                'optionsLabel'          => esc_attr( _x( 'Options', 'Label for the set of options to be included in a user-created dropdown in contact form builder', 'jetpack-forms' ) ),
53                'optionLabel'           => esc_attr( _x( 'Option', 'Label for an option to be included in a user-created dropdown in contact form builder', 'jetpack-forms' ) ),
54                'firstOptionLabel'      => esc_attr( _x( 'First option', 'Default label for the first option to be included in a user-created dropdown in contact form builder', 'jetpack-forms' ) ),
55                'problemGeneratingForm' => esc_attr( _x( "Oops, there was a problem generating your form. You'll likely need to try again.", 'error message in contact form builder', 'jetpack-forms' ) ),
56                'moveInstructions'      => esc_attr__( "Drag up or down\nto re-arrange", 'jetpack-forms' ),
57                'moveLabel'             => esc_attr( _x( 'move', 'Label to drag HTML form fields around to change their order in contact form builder', 'jetpack-forms' ) ),
58                'editLabel'             => esc_attr( _x( 'edit', 'Link to edit an HTML form field in contact form builder', 'jetpack-forms' ) ),
59                'savedMessage'          => esc_attr__( 'Saved successfully', 'jetpack-forms' ),
60                'requiredLabel'         => esc_attr( _x( '(required)', 'This HTML form field is marked as required by the user in contact form builder', 'jetpack-forms' ) ),
61                'exitConfirmMessage'    => esc_attr__( 'Are you sure you want to exit the form editor without saving? Any changes you have made will be lost.', 'jetpack-forms' ),
62                'maxNewFields'          => (int) $max_new_fields,
63            )
64        );
65
66        ?>
67        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
68        <html xmlns="http://www.w3.org/1999/xhtml">
69        <head>
70        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
71        <title><?php esc_html_e( 'Contact Form', 'jetpack-forms' ); ?></title>
72        <script type="text/javascript">
73            var ajaxurl = <?php echo wp_json_encode( admin_url( 'admin-ajax.php' ), JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_AMP ); ?>;
74            var postId = <?php echo isset( $_GET['post_id'] ) ? absint( $_GET['post_id'] ) : ''; // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- not making a site change. ?>;
75            var ajax_nonce_shortcode = <?php echo wp_json_encode( wp_create_nonce( 'grunion_shortcode' ), JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_AMP ); ?>;
76            var ajax_nonce_json = <?php echo wp_json_encode( wp_create_nonce( 'grunion_shortcode_to_json' ), JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_AMP ); ?>;
77        </script>
78        <?php wp_print_scripts( 'grunion' ); ?>
79        <script type="text/javascript">
80            jQuery(document).ready(function () {
81                FB.ContactForm.init();
82                FB.ContactForm.resizePop();
83            });
84            jQuery(window).resize(function() {
85                setTimeout(function () { FB.ContactForm.resizePop(); }, 50);
86            });
87        </script>
88        <style>
89            /* Reset */
90            html { height: 100%; }
91            body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
92            body { background: #f6f7f7; font-family:"Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif; font-size:12px; color: #333; line-height:1.5em; height: 100%; width: 100%; padding-bottom: 20px !important; }
93            a { color: #21759B; text-decoration: none; }
94            a:hover { text-decoration: underline; text-shadow: none !important; }
95            h1 { font-size: 21px; color:#5A5A5A; font-family:Georgia,"Times New Roman",Times,serif; font-weight:normal; margin-bottom: 21px; }
96            h3 { font-size: 13px; color: #646970; margin-bottom: 18px; }
97            input { width: 301px; }
98            input[type="text"] { padding: 3px 5px; margin-right: 4px; -moz-border-radius:3px; border-radius:3px; -webkit-border-radius:3px; }
99            input[type="text"]:focus { border: 2px solid #80B8D9; outline: 0 !important; }
100            input[type="checkbox"], input[type="radio"] { width: auto !important; float: left; margin-top: 3px; margin-right: 8px; }
101            input.fieldError, select.fieldError, textarea.fieldError { border: 2px solid #D56F55; }
102            img { border: none; }
103            label { color: #222; font-weight: bold; display: block; margin-bottom: 4px; }
104            label.radio { width: auto; margin: -2px 0 0 5px; }
105            label span.label-required { color: #a7aaad; margin-left: 4px; font-weight: normal; }
106            td { vertical-align: top; }
107            select { width: 300px; }
108            textarea { height: 100px; width: 311px; }
109            /* Core */
110            #media-upload-header { border-bottom: 1px solid #dcdcde; font-weight:bold; margin:0; padding:3px 5px 0 5px; position:relative; background: #FFF; }
111            #sidemenu { bottom:-1px; font-size:12px; list-style:none outside none; padding-left:10px; position:relative; left:0; margin:0 5px; overflow:hidden; }
112            #sidemenu a { text-decoration:none; border-top: 1px solid #FFF; display:block; float:left; line-height:28px; padding:0 13px; outline: none; }
113            #sidemenu a.current { background-color:#f6f7f7; border-color:#dcdcde #dcdcde #f6f7f7; color:#d63638; -moz-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0; -webkit-border-radius:4px 4px 0 0; border-style:solid; border-width:1px; font-weight:normal; }
114            #sidemenu li { display:inline; margin-bottom:6px; line-height:200%; list-style:none outside none; margin:0; padding:0; text-align:center; white-space:nowrap; }
115            .button { background-color:#f2f2f2; border-color:#BBBBBB; min-width:80px; text-align:center; color:#464646; text-shadow:0 1px 0 #FFFFFF; border-style:solid; border-width:1px; cursor:pointer; width: auto; font-size:11px !important; line-height:13px; padding:3px 11px; margin-top: 12px; text-decoration:none; -moz-border-radius:11px; border-radius:11px; -webkit-border-radius:11px }
116            .button-primary { background-color:#21759B; font-weight: bold; border-color:#298CBA; text-align:center; color:#EAF2FA; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3); border-style:solid; border-width:1px; cursor:pointer; width: auto; font-size:11px !important; line-height:13px; padding:3px 11px; margin-top: 21px; text-decoration:none; -moz-border-radius:11px; border-radius:11px; -webkit-border-radius:11px }
117            .clear { clear: both; }
118            .fb-add-field { padding-left: 10px; }
119            .fb-add-option { margin: 0 0 14px 100px; }
120            .fb-container { margin: 21px; padding-bottom: 20px; }
121            .fb-desc, #fb-add-field { margin-top: 34px; }
122            .fb-extra-fields { margin-bottom: 2px; }
123            .fb-form-case { background: #FFF; padding: 13px; border: 1px solid #E2E2E2; width: 336px; -moz-border-radius:4px; border-radius:4px; -webkit-border-radius:4px }
124            .fb-form-case a { outline: none; }
125            .fb-form-case input[type="text"], .fb-form-case textarea { background: #E1E1E1; }
126            .fb-radio-label { display: inline-block; float: left; width: 290px; }
127            .fb-new-fields { position: relative; border: 1px dashed #FFF; background: #FFF; padding: 4px 10px 10px; cursor: default; }
128            .fb-new-fields:hover { border: 1px dashed #BBDBEA; background: #F7FBFD; }
129            .fb-options { width: 170px !important; }
130            .fb-remove { background: url('<?php echo Jetpack_Forms::plugin_url(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>/images/grunion-remove-field.gif') no-repeat; position: absolute; cursor: pointer !important; right: -26px; top: 27px; width: 20px; height: 23px; }
131            .fb-remove:hover { background: url('<?php echo Jetpack_Forms::plugin_url(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>/images/grunion-remove-field-hover.gif') no-repeat; }
132            .fb-remove-small { top: 2px !important; }
133            .fb-remove-option { position: absolute; top: 1px; right: 10px; width: 20px; height: 23px; background: url('<?php echo Jetpack_Forms::plugin_url(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>/images/grunion-remove-option.gif') no-repeat; }
134            .fb-remove-option:hover { background: url('<?php echo Jetpack_Forms::plugin_url(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>/images/grunion-remove-option-hover.gif') no-repeat; }
135            .fb-reorder { cursor: move; position: relative; }
136            .fb-reorder:hover div { display: block !important; width: 130px !important; position: absolute; top: 0; right: 0; z-index: 200; padding: 5px 10px; color: #555; font-size: 11px; background: #FFF; border: 1px solid #CCC; -moz-border-radius:4px; border-radius:4px; -webkit-border-radius:4px; }
137            .fb-right { position: absolute; right: 0; top: 0; width: 315px; margin: 57px 21px 0 0; }
138            .fb-right .fb-new-fields { border: none; background: #f6f7f7; padding: 0; }
139            .fb-right input[type="text"] { width: 195px; margin-bottom: 14px; }
140            .fb-right label { color: #444; width: 100px; float: left; font-weight: normal; }
141            .fb-right select { width: 195px !important; margin-bottom: 14px; }
142            .fb-right textarea { margin-bottom: 13px; }
143            .fb-right p { color: #999; line-height: 19px; }
144            .fb-settings input[type="text"], .fb-settings textarea { background-image: none !important; }
145            .fb-success { position: absolute; top: -3px; right: 100px; padding: 6px 23px 4px 23px; background: #FFFFE0; font-weight: normal; border: 1px solid #E6DB55; color: #333; -moz-border-radius:4px; border-radius:4px; -webkit-border-radius:4px; }
146            .right { float: right; }
147            /* rtl */
148            body.rtl{ direction: rtl; font-family:Tahoma,Arial,sans-serif}
149            .rtl input[type="text"] { margin-left: 4px; margin-right: 0; }
150            .rtl input[type="checkbox"], .rtl input[type="radio"] { float: right; }
151            .rtl input[type="radio"] { margin-left: 8px; margin-right: 0; }
152            .rtl label.radio { margin: -2px 5px 0 0; }
153            .rtl label span.label-required { margin-right: 4px; margin-left:0 }
154            .rtl #sidemenu {  padding-right:10px; padding-left: 0; left:auto; right: 0; }
155            .rtl #sidemenu a { float:right; }
156            .rtl .fb-add-field { padding-right: 10px; padding-left: 0; }
157            .rtl .fb-add-option { margin: 0 100px 14px 0; }
158            .rtl .fb-radio-label { margin-right: 8px; margin-left: 0; float: right; }
159            .rtl .fb-remove { right: auto; left: -26px; transform: scaleX(-1); }
160            .rtl .fb-remove-option { right: auto; left: 10px; }
161            .rtl .fb-reorder:hover div { left: 0; right: auto; }
162            .rtl .fb-right { left: 0; right: auto; margin: 57px 0 0 21px; }
163            .rtl .fb-right label { float: right; }
164            .rtl .fb-success { right: auto; left: 100px;}
165            .rtl .right { float: left; }
166            @media only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5) {
167                .fb-remove { background: url('<?php echo Jetpack_Forms::plugin_url(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>/images/grunion-remove-field-2x.png') no-repeat; background-size: 20px 23px; }
168                .fb-remove:hover { background: url('<?php echo Jetpack_Forms::plugin_url(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>/images/grunion-remove-field-hover-2x.png') no-repeat; background-size: 20px 23px; }
169                .fb-remove-option { background: url('<?php echo Jetpack_Forms::plugin_url(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>/images/grunion-remove-option-2x.png') no-repeat; background-size: 20px 23px; }
170                .fb-remove-option:hover { background: url('<?php echo Jetpack_Forms::plugin_url(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>/images/grunion-remove-option-hover-2x.png') no-repeat; background-size: 20px 23px; }
171            }
172        </style>
173        </head>
174        <?php // phpcs:enable WordPress.Security.EscapeOutput.OutputNotEscaped ?>
175        <body
176        <?php
177        if ( is_rtl() ) {
178            echo 'class="rtl"'; }
179        ?>
180        >
181            <div id="media-upload-header">
182                <div id="fb-success" class="fb-success" style="display: none;"><?php esc_html_e( 'Your new field was saved successfully', 'jetpack-forms' ); ?></div>
183                <ul id="sidemenu">
184                    <li id="tab-preview"><a class="current" href=""><?php esc_html_e( 'Form builder', 'jetpack-forms' ); ?></a></li>
185                    <li id="tab-settings"><a href=""><?php esc_html_e( 'Email notifications', 'jetpack-forms' ); ?></a></li>
186                </ul>
187            </div>
188            <div class="fb-right">
189                <div id="fb-desc" class="fb-desc">
190                    <h3><?php esc_html_e( 'How does this work?', 'jetpack-forms' ); ?></h3>
191                    <p><?php esc_html_e( 'By adding a contact form, your readers will be able to submit feedback to you. All feedback is automatically scanned for spam, and the legitimate feedback will be emailed to you.', 'jetpack-forms' ); ?></p>
192                    <h3 style="margin-top: 21px;"><?php esc_html_e( 'Can I add more fields?', 'jetpack-forms' ); ?></h3>
193                    <p>
194                    <?php
195                    printf(
196                        // translators: "Click here" as an HTML link.
197                        esc_html( _x( 'Sure thing. %1$s to add a new text box, textarea, radio, checkbox, or dropdown field.', '%1$s = "Click here" in an HTML link', 'jetpack-forms' ) ),
198                        '<a href="#" class="fb-add-field" style="padding-left: 0;">' . esc_html__( 'Click here', 'jetpack-forms' ) . '</a>'
199                    );
200                    ?>
201                    </p>
202                    <h3 style="margin-top: 21px;"><?php esc_html_e( 'Can I view my feedback within WordPress?', 'jetpack-forms' ); ?></h3>
203                    <p>
204                    <?php
205                    printf(
206                        // translators: "Feedback" as an HTML link.
207                        esc_html( _x( 'Yep, you can read your feedback at any time by clicking the "%1$s" link in the admin menu.', '%1$s = "Feedback" in an HTML link', 'jetpack-forms' ) ),
208                        '<a id="fb-feedback" href="' . esc_url( admin_url( 'edit.php?post_type=feedback' ) ) . '">' . esc_html__( 'Feedback', 'jetpack-forms' ) . '</a>'
209                    );
210                    ?>
211                    </p>
212                    <div class="clear"></div>
213                </div>
214                <div id="fb-email-desc" class="fb-desc" style="display: none;">
215                    <h3><?php esc_html_e( 'Do I need to fill this out?', 'jetpack-forms' ); ?></h3>
216                    <p><?php esc_html_e( 'Nope. However, if you’d like to modify where your feedback is sent, or the subject line you can. If you don&#8217;t make any changes here, feedback will be sent to the author of the page/post and the subject will be the name of this page/post.', 'jetpack-forms' ); ?></p>
217                    <h3 style="margin-top: 21px;"><?php esc_html_e( 'Can I send a notification to more than one person?', 'jetpack-forms' ); ?></h3>
218                    <p><?php esc_html_e( 'Yep. You can enter multiple email addresses in the Email address field, and separate them with commas. A notification email will then be sent to each email address.', 'jetpack-forms' ); ?></p>
219                    <div class="clear"></div>
220                </div>
221                <div id="fb-add-field" style="display: none;">
222                    <h3><?php esc_html_e( 'Edit this new field', 'jetpack-forms' ); ?></h3>
223
224                    <label for="fb-new-label"><?php esc_html_e( 'Label', 'jetpack-forms' ); ?></label>
225                    <input type="text" id="fb-new-label" value="<?php esc_attr_e( 'New field', 'jetpack-forms' ); ?>" />
226
227                    <label for="fb-new-label"><?php esc_html_e( 'Field type', 'jetpack-forms' ); ?></label>
228                    <select id="fb-new-type">
229                        <option value="checkbox"><?php esc_html_e( 'Checkbox', 'jetpack-forms' ); ?></option>
230                        <option value="checkbox-multiple"><?php esc_html_e( 'Checkbox with Multiple Items', 'jetpack-forms' ); ?></option>
231                        <option value="select"><?php esc_html_e( 'Drop down', 'jetpack-forms' ); ?></option>
232                        <option value="email"><?php esc_html_e( 'Email', 'jetpack-forms' ); ?></option>
233                        <option value="name"><?php esc_html_e( 'Name', 'jetpack-forms' ); ?></option>
234                        <option value="radio"><?php esc_html_e( 'Radio', 'jetpack-forms' ); ?></option>
235                        <option value="text" selected="selected"><?php esc_html_e( 'Text', 'jetpack-forms' ); ?></option>
236                        <option value="textarea"><?php esc_html_e( 'Textarea', 'jetpack-forms' ); ?></option>
237                        <option value="url"><?php esc_html_e( 'Website', 'jetpack-forms' ); ?></option>
238                    </select>
239                    <div class="clear"></div>
240
241                    <div id="fb-options" style="display: none;">
242                        <div id="fb-new-options">
243                            <label for="fb-option0"><?php esc_html_e( 'Options', 'jetpack-forms' ); ?></label>
244                            <input type="text" id="fb-option0" optionid="0" value="<?php esc_attr_e( 'First option', 'jetpack-forms' ); ?>" class="fb-options" />
245                        </div>
246                        <div id="fb-add-option" class="fb-add-option">
247                            <a href="#" id="fb-another-option"><?php esc_html_e( 'Add another option', 'jetpack-forms' ); ?></a>
248                        </div>
249                    </div>
250
251                    <div class="fb-required">
252                        <label for="fb-new-label"></label>
253                        <input type="checkbox" id="fb-new-required" />
254                        <label for="fb-new-label" class="fb-radio-label"><?php esc_html_e( 'Required?', 'jetpack-forms' ); ?></label>
255                        <div class="clear"></div>
256                    </div>
257
258                    <input type="hidden" id="fb-field-id" />
259                    <input type="submit" class="button" value="<?php esc_attr_e( 'Save this field', 'jetpack-forms' ); ?>" id="fb-save-field" name="save">
260                </div>
261            </div>
262            <form id="fb-preview">
263                <div id="fb-preview-form" class="fb-container">
264                    <h1><?php esc_html_e( 'Here&#8217;s what your form will look like', 'jetpack-forms' ); ?></h1>
265                    <div id="sortable" class="fb-form-case">
266
267                        <div id="fb-extra-fields" class="fb-extra-fields"></div>
268
269                        <a href="#" id="fb-new-field" class="fb-add-field"><?php esc_html_e( 'Add a new field', 'jetpack-forms' ); ?></a>
270                    </div>
271                    <input type="submit" class="button-primary" tabindex="4" value="<?php esc_attr_e( 'Add this form to my post', 'jetpack-forms' ); ?>" id="fb-save-form" name="save">
272                </div>
273                <div id="fb-email-settings" class="fb-container" style="display: none;">
274                    <h1><?php esc_html_e( 'Email settings', 'jetpack-forms' ); ?></h1>
275                    <div class="fb-form-case fb-settings">
276                        <label for="fb-fieldname"><?php esc_html_e( 'Enter your email address', 'jetpack-forms' ); ?></label>
277                        <input type="text" id="fb-field-my-email" style="background: #FFF !important;" />
278
279                        <label for="fb-fieldemail" style="margin-top: 14px;"><?php esc_html_e( 'What should the subject line be?', 'jetpack-forms' ); ?></label>
280                        <input type="text" id="fb-field-subject" style="background: #FFF !important;" />
281                    </div>
282                    <input type="submit" class="button-primary" value="<?php esc_attr_e( 'Save and go back to form builder', 'jetpack-forms' ); ?>" id="fb-prev-form" name="save">
283                </div>
284            </form>
285        </body>
286        </html>
287        <?php
288    }
289}