PluginProbe
Mailchimp List Subscribe Form / trunk
Mailchimp List Subscribe Form vtrunk
1.2.4 1.2.5 1.2.6 1.2.7 1.2.8 1.2.9 1.3 1.4 1.4.1 1.4.2 1.4.3 1.4.4 1.4.5 1.5 1.5.1 1.5.2 1.5.3 1.5.4 1.5.5 1.5.6 1.5.7 1.5.8 1.5.9 1.6.0 1.6.1 All 55 releases
← All changes | mailchimp_widget.php +115 -148 1.6.0trunk View file →
@@ -20,8 +20,10 @@
20 20 $before_title = isset( $args['before_title'] ) ? $args['before_title'] : '';
21 21 $after_title = isset( $args['after_title'] ) ? $args['after_title'] : '';
22 22 $before_widget = isset( $args['before_widget'] ) ? $args['before_widget'] : '';
23 23 $after_widget = isset( $args['after_widget'] ) ? $args['after_widget'] : '';
24 + $is_preview = isset( $args['is_preview'] ) ? (bool) $args['is_preview'] : false;
25 + $preview_data = isset( $args['preview_data'] ) ? $args['preview_data'] : array();
24 26
25 27 $mv = get_option( 'mc_merge_vars' );
26 28 $igs = get_option( 'mc_interest_groups' );
27 29
@@ -64,8 +66,11 @@
64 66 echo '<div class="mc_container">';
65 67 }
66 68
67 69 $header = get_option( 'mc_header_content' );
70 + if ( $is_preview && ! empty( $preview_data ) ) {
71 + $header = $preview_data['header'] ?? $header;
72 + }
68 73
69 74 // See if we have custom header content
70 75 if ( ! empty( $header ) ) {
71 76 // See if we need to wrap the header content in our own div
@@ -78,97 +83,18 @@
78 83 }
79 84 }
80 85
81 86 $sub_heading = trim( get_option( 'mc_subheader_content' ) );
82 -
83 - if ( get_option( 'mc_nuke_all_styles' ) !== '1' ) {
84 - ?>
85 - <style>
86 - .widget_mailchimpsf_widget .widget-title {
87 - line-height: 1.4em;
88 - margin-bottom: 0.75em;
87 + $list_id = get_option( 'mc_list_id' );
88 + $form_id = wp_unique_id( $list_id . '_' );
89 + if ( $is_preview && ! empty( $preview_data ) ) {
90 + $sub_heading = $preview_data['sub_heading'] ?? $sub_heading;
89 91 }
90 - .mc_custom_border_hdr,
91 - #mc_subheader {
92 - line-height: 1.25em;
93 - margin-bottom: 18px;
94 - }
95 - .mc_merge_var {
96 - margin-bottom: 1.0em;
97 - }
98 - .mc_var_label,
99 - .mc_interest_label {
100 - display: block;
101 - margin-bottom: 0.5em;
102 - }
103 - .mc_input {
104 - -moz-box-sizing: border-box;
105 - -webkit-box-sizing: border-box;
106 - box-sizing: border-box;
107 - padding: 10px 8px;
108 - width: 100%;
109 - }
110 - .mc_input.mc_phone {
111 - width: auto;
112 - }
113 - select.mc_select {
114 - margin-top: 0.5em;
115 - padding: 10px 8px;
116 - width: 100%;
117 - }
118 - .mc_address_label {
119 - margin-top: 1.0em;
120 - margin-bottom: 0.5em;
121 - display: block;
122 - }
123 - .mc_address_label ~ select {
124 - padding: 10px 8px;
125 - width: 100%;
126 - }
127 - .mc_list li {
128 - list-style: none;
129 - background: none !important;
130 - }
131 - .mc_interests_header {
132 - margin-top: 1.0em;
133 - margin-bottom: 0.5em;
134 - }
135 - .mc_interest label,
136 - .mc_interest input {
137 - margin-bottom: 0.4em;
138 - }
139 - #mc_signup_submit {
140 - margin-top: 1.5em;
141 - padding: 10px 8px;
142 - width: 80%;
143 - }
144 - #mc_unsub_link a {
145 - font-size: 0.75em;
146 - }
147 - #mc_unsub_link {
148 - margin-top: 1.0em;
149 - }
150 - .mc_header_address,
151 - .mc_email_format {
152 - display: block;
153 - font-weight: bold;
154 - margin-top: 1.0em;
155 - margin-bottom: 0.5em;
156 - }
157 - .mc_email_options {
158 - margin-top: 0.5em;
159 - }
160 - .mc_email_type {
161 - padding-left: 4px;
162 - }
163 - </style>
164 - <?php
165 - }
166 92 ?>
167 93
168 -<div id="mc_signup">
169 - <form method="post" action="#mc_signup" id="mc_signup_form">
170 - <input type="hidden" id="mc_submit_type" name="mc_submit_type" value="html" />
94 +<div id="mc_signup_<?php echo esc_attr( $form_id ); ?>">
95 + <form method="post" action="#mc_signup_<?php echo esc_attr( $form_id ); ?>" id="mc_signup_form_<?php echo esc_attr( $form_id ); ?>" class="mc_signup_form" data-list-id="<?php echo esc_attr( $list_id ); ?>">
96 + <input type="hidden" class="mc_submit_type" name="mc_submit_type" value="html" />
171 97 <input type="hidden" name="mcsf_action" value="mc_submit_signup_form" />
172 98 <?php wp_nonce_field( 'mc_submit_signup_form', '_mc_submit_signup_form_nonce', false ); ?>
173 99
174 100 <?php
@@ -173,9 +99,9 @@
173 99
174 100 <?php
175 101 if ( $sub_heading ) {
176 102 ?>
177 - <div id="mc_subheader">
103 + <div class="mc_subheader">
178 104 <?php echo wp_kses_post( $sub_heading ); ?>
179 105 </div><!-- /mc_subheader -->
180 106 <?php
181 107 }
@@ -182,11 +108,11 @@
182 108 ?>
183 109
184 110 <div class="mc_form_inside">
185 111
186 - <div class="updated" id="mc_message">
187 - <?php echo wp_kses_post( mailchimp_sf_global_msg() ); ?>
188 - </div><!-- /mc_message -->
112 + <div class="mc_message_wrapper">
113 + <?php echo wp_kses_post( mailchimp_sf_frontend_msg() ); ?>
114 + </div><!-- /mc_message_wrapper -->
189 115
190 116 <?php
191 117 // don't show the "required" stuff if there's only 1 field to display.
192 118 $num_fields = 0;
@@ -191,9 +117,13 @@
191 117 // don't show the "required" stuff if there's only 1 field to display.
192 118 $num_fields = 0;
193 119 foreach ( (array) $mv as $mv_var ) {
194 120 $opt = 'mc_mv_' . $mv_var['tag'];
195 - if ( $mv_var['required'] || get_option( $opt ) === 'on' ) {
121 + if ( $is_preview && ! empty( $preview_data ) ) {
122 + if ( $mv_var['required'] || ( isset( $preview_data['fields'][ $mv_var['tag'] ] ) && $preview_data['fields'][ $mv_var['tag'] ] ) ) {
123 + ++$num_fields;
124 + }
125 + } elseif ( $mv_var['required'] || get_option( $opt ) === 'on' ) {
196 126 ++$num_fields;
197 127 }
198 128 }
199 129
@@ -203,19 +133,21 @@
203 133 }
204 134
205 135 // Loop over our vars, and output the ones that are set to display
206 136 foreach ( $mv as $mv_var ) {
207 - if ( ! $mv_var['public'] ) {
208 - echo '<div style="display:none;">' . mailchimp_form_field( $mv_var, $num_fields ) . '</div>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Ignoring because form field is escaped in function
209 - } else {
210 - echo mailchimp_form_field( $mv_var, $num_fields ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Ignoring because form field is escaped in function
137 + $opt = 'mc_mv_' . $mv_var['tag'];
138 + $should_display = 'on' === get_option( $opt );
139 + if ( $is_preview && ! empty( $preview_data ) ) {
140 + $should_display = $preview_data['fields'][ $mv_var['tag'] ] ?? $should_display;
211 141 }
142 +
143 + echo mailchimp_form_field( $mv_var, $num_fields, $should_display ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Ignoring because form field is escaped in function
212 144 }
213 145
214 146 // Show an explanation of the * if there's more than one field
215 147 if ( $num_fields > 1 ) {
216 148 ?>
217 - <div id="mc-indicates-required">
149 + <div class="mc-indicates-required">
218 150 * = <?php esc_html_e( 'required field', 'mailchimp' ); ?>
219 151 </div><!-- /mc-indicates-required -->
220 152 <?php
221 153 }
@@ -223,9 +155,13 @@
223 155 // Show our Interest groups fields if we have them, and they're set to on
224 156 if ( is_array( $igs ) && ! empty( $igs ) ) {
225 157 foreach ( $igs as $ig ) {
226 158 if ( is_array( $ig ) && isset( $ig['id'] ) ) {
227 - if ( ( $igs && get_option( 'mc_show_interest_groups_' . $ig['id'] ) === 'on' ) ) {
159 + $should_display = 'on' === get_option( 'mc_show_interest_groups_' . $ig['id'] );
160 + if ( $is_preview && ! empty( $preview_data ) ) {
161 + $should_display = $preview_data['groups'][ $ig['id'] ] ?? $should_display;
162 + }
163 + if ( ( $igs && $should_display ) ) {
228 164 if ( 'hidden' !== $ig['type'] ) {
229 165 ?>
230 166 <div class="mc_interests_header">
231 167 <?php echo esc_html( $ig['title'] ); ?>
@@ -255,10 +191,10 @@
255 191 <div class="mergeRow">
256 192 <label class="mc_email_format"><?php esc_html_e( 'Preferred Format', 'mailchimp' ); ?></label>
257 193 <div class="field-group groups mc_email_options">
258 194 <ul class="mc_list">
259 - <li><input type="radio" name="email_type" id="email_type_html" value="html" checked="checked"><label for="email_type_html" class="mc_email_type"><?php esc_html_e( 'HTML', 'mailchimp' ); ?></label></li>
260 - <li><input type="radio" name="email_type" id="email_type_text" value="text"><label for="email_type_text" class="mc_email_type"><?php esc_html_e( 'Text', 'mailchimp' ); ?></label></li>
195 + <li><input type="radio" name="email_type" id="email_type_html_<?php echo esc_attr( $form_id ); ?>" value="html" checked="checked"><label for="email_type_html_<?php echo esc_attr( $form_id ); ?>" class="mc_email_type"><?php esc_html_e( 'HTML', 'mailchimp' ); ?></label></li>
196 + <li><input type="radio" name="email_type" id="email_type_text_<?php echo esc_attr( $form_id ); ?>" value="text"><label for="email_type_text_<?php echo esc_attr( $form_id ); ?>" class="mc_email_type"><?php esc_html_e( 'Text', 'mailchimp' ); ?></label></li>
261 197 </ul>
262 198 </div>
263 199 </div>
264 200
@@ -264,23 +200,35 @@
264 200
265 201 <?php
266 202 }
267 203
204 + // Add a honeypot field.
205 + mailchimp_sf_honeypot_field();
206 +
268 207 $submit_text = get_option( 'mc_submit_text' );
269 208
209 + // Preview.
210 + if ( $is_preview && ! empty( $preview_data ) ) {
211 + $submit_text = $preview_data['submit_text'] ?? $submit_text;
212 + }
270 213 ?>
271 214
272 215 <div class="mc_signup_submit">
273 - <input type="submit" name="mc_signup_submit" id="mc_signup_submit" value="<?php echo esc_attr( $submit_text ); ?>" class="button" />
216 + <input type="submit" name="mc_signup_submit" class="mc_signup_submit_button" id="mc_signup_submit_<?php echo esc_attr( $form_id ); ?>" value="<?php echo esc_attr( $submit_text ); ?>" class="button" />
274 217 </div><!-- /mc_signup_submit -->
275 218
276 219 <?php
277 - $user = get_option( 'mc_user' );
278 - if ( $user && get_option( 'mc_use_unsub_link' ) === 'on' ) {
220 + $user = get_option( 'mc_user' );
221 + $display_unsub_link = 'on' === get_option( 'mc_use_unsub_link' );
222 + if ( $is_preview && ! empty( $preview_data ) ) {
223 + $display_unsub_link = $preview_data['display_unsub_link'] ?? $display_unsub_link;
224 + }
225 +
226 + if ( $user && $display_unsub_link ) {
279 227 $api = mailchimp_sf_get_api();
280 228 $host = 'http://' . $api->datacenter . '.list-manage.com';
281 229 ?>
282 - <div id="mc_unsub_link" align="center">
230 + <div class="mc_unsub_link" align="center">
283 231 <a href="<?php echo esc_url( $host . '/unsubscribe/?u=' . $user['account_id'] . '&amp;id=' . get_option( 'mc_list_id' ) ); ?>" target="_blank"><?php esc_html_e( 'unsubscribe from list', 'mailchimp' ); ?></a>
284 232 </div><!-- /mc_unsub_link -->
285 233 <?php
286 234 }
@@ -299,8 +247,23 @@
299 247 }
300 248 }
301 249
302 250 /**
251 + * Add a hidden honeypot field
252 + *
253 + * @return void
254 + */
255 +function mailchimp_sf_honeypot_field() {
256 + ?>
257 + <div style="display: none; !important">
258 + <label for="mailchimp_sf_alt_email"><?php esc_html_e( 'Alternative Email:', 'mailchimp' ); ?></label>
259 + <input type="text" name="mailchimp_sf_alt_email" autocomplete="off"/>
260 + </div>
261 + <input type="hidden" class="mailchimp_sf_no_js" name="mailchimp_sf_no_js" value="1" />
262 + <?php
263 +}
264 +
265 +/**
303 266 * Generate and display markup for Interest Groups
304 267 *
305 268 * @param array $ig Set of Interest Groups to generate markup for
306 269 * @return void
@@ -316,12 +279,13 @@
316 279 $i = 1;
317 280 foreach ( $ig['groups'] as $interest ) {
318 281 $interest_name = $interest['name'];
319 282 $interest_id = $interest['id'];
283 + $unique_id = wp_unique_id( 'mc_interest_' . $ig['id'] . '_' . $interest_id . '_' );
320 284 $html .= '
321 285
322 - <input type="checkbox" name="' . esc_attr( $set_name . '[' . $interest_id . ']' ) . '" id="' . esc_attr( 'mc_interest_' . $ig['id'] . '_' . $interest_id ) . '" class="mc_interest" value="' . esc_attr( $interest_name ) . '" />
323 - <label for="' . esc_attr( 'mc_interest_' . $ig['id'] . '_' . $interest_id ) . '" class="mc_interest_label">' . esc_html( $interest_name ) . '</label>
286 + <input type="checkbox" name="' . esc_attr( $set_name . '[' . $interest_id . ']' ) . '" id="' . esc_attr( $unique_id ) . '" class="mc_interest" value="' . esc_attr( $interest_name ) . '" />
287 + <label for="' . esc_attr( $unique_id ) . '" class="mc_interest_label">' . esc_html( $interest_name ) . '</label>
324 288 <br/>';
325 289 ++$i;
326 290 }
327 291 break;
@@ -328,11 +292,12 @@
328 292 case 'radio':
329 293 foreach ( $ig['groups'] as $interest ) {
330 294 $interest_name = $interest['name'];
331 295 $interest_id = $interest['id'];
296 + $unique_id = wp_unique_id( 'mc_interest_' . $ig['id'] . '_' . $interest_id . '_' );
332 297 $html .= '
333 - <input type="radio" name="' . esc_attr( $set_name ) . '" id="' . esc_attr( 'mc_interest_' . $ig['id'] . '_' . $interest_id ) . '" class="mc_interest" value="' . esc_attr( $interest_id ) . '"/>
334 - <label for="' . esc_attr( 'mc_interest_' . $ig['id'] . '_' . $interest_id ) . '" class="mc_interest_label">' . esc_html( $interest_name ) . '</label>
298 + <input type="radio" name="' . esc_attr( $set_name ) . '" id="' . esc_attr( $unique_id ) . '" class="mc_interest" value="' . esc_attr( $interest_id ) . '"/>
299 + <label for="' . esc_attr( $unique_id ) . '" class="mc_interest_label">' . esc_html( $interest_name ) . '</label>
335 300 <br/>';
336 301 }
337 302 break;
338 303 case 'dropdown':
@@ -352,11 +317,12 @@
352 317 $i = 1;
353 318 foreach ( $ig['groups'] as $interest ) {
354 319 $interest_name = $interest['name'];
355 320 $interest_id = $interest['id'];
321 + $unique_id = wp_unique_id( 'mc_interest_' . $ig['id'] . '_' . $interest_id . '_' );
356 322 $html .= '
357 - <input type="checkbox" name="' . esc_attr( $set_name . '[' . $i . ']' ) . '" id="' . esc_attr( 'mc_interest_' . $ig['id'] . '_' . $interest_id ) . '" class="mc_interest" value="' . esc_attr( $interest_name ) . '" />
358 - <label for="' . esc_attr( 'mc_interest_' . $ig['id'] . '_' . $interest_id ) . '" class="mc_interest_label">' . esc_html( $interest_name ) . '</label>';
323 + <input type="checkbox" name="' . esc_attr( $set_name . '[' . $i . ']' ) . '" id="' . esc_attr( $unique_id ) . '" class="mc_interest" value="' . esc_attr( $interest_name ) . '" />
324 + <label for="' . esc_attr( $unique_id ) . '" class="mc_interest_label">' . esc_html( $interest_name ) . '</label>';
359 325 ++$i;
360 326 }
361 327 break;
362 328 }
@@ -365,18 +331,27 @@
365 331
366 332 /**
367 333 * Generate and display markup for form fields
368 334 *
369 - * @param array $data Array containing informaoin about the field
370 - * @param int $num_fields The number of fields total we'll be generating markup for. Used in calculating required text logic
335 + * @param array $data Array containing informaoin about the field.
336 + * @param int $num_fields The number of fields total we'll be generating markup for. Used in calculating required text logic.
337 + * @param bool $should_display Whether or not the field should be displayed.
338 + * @param string $label The label for the field.
371 339 * @return string
372 340 */
373 -function mailchimp_form_field( $data, $num_fields ) {
374 - $opt = 'mc_mv_' . $data['tag'];
375 - $html = '';
341 +function mailchimp_form_field( $data, $num_fields, $should_display = null, $label = '' ) {
342 + $html = '';
343 + $opt = 'mc_mv_' . $data['tag'];
344 + $opt_id = wp_unique_id( $opt . '_' );
345 + if ( is_null( $should_display ) ) {
346 + $should_display = 'on' === get_option( $opt );
347 + }
348 +
349 + $label = ( ! empty( $label ) ) ? $label : $data['name'];
350 +
376 351 // See if that var is set as required, or turned on (for display)
377 - if ( $data['required'] || get_option( $opt ) === 'on' ) {
378 - $label = '<label for="' . esc_attr( $opt ) . '" class="mc_var_label mc_header mc_header_' . esc_attr( $data['type'] ) . '">' . esc_html( $data['name'] );
352 + if ( $data['required'] || $should_display ) {
353 + $label = '<label for="' . esc_attr( $opt_id ) . '" class="mc_var_label mc_header mc_header_' . esc_attr( $data['type'] ) . '">' . wp_kses_post( $label );
379 354 if ( $data['required'] && $num_fields > 1 ) {
380 355 $label .= '<span class="mc_required">*</span>';
381 356 }
382 357 $label .= '</label>';
@@ -386,9 +361,9 @@
386 361 ' . $label;
387 362 switch ( $data['type'] ) {
388 363 case 'date':
389 364 $html .= '
390 - <input type="text" size="18" placeholder="' . esc_attr( $data['default_value'] ) . '" data-format="' . esc_attr( $data['options']['date_format'] ) . '" name="' . esc_attr( $opt ) . '" id="' . esc_attr( $opt ) . '" class="date-pick mc_input"/>';
365 + <input type="text" size="18" placeholder="' . esc_attr( $data['default_value'] ) . '" data-format="' . esc_attr( $data['options']['date_format'] ) . '" name="' . esc_attr( $opt ) . '" id="' . esc_attr( $opt_id ) . '" class="date-pick mc_input"/>';
391 366 break;
392 367 case 'radio':
393 368 if ( is_array( $data['options']['choices'] ) ) {
394 369 $html .= '
@@ -395,10 +370,10 @@
395 370 <ul class="mc_list">';
396 371 foreach ( $data['options']['choices'] as $key => $value ) {
397 372 $html .= '
398 373 <li>
399 - <input type="radio" id="' . esc_attr( $opt . '_' . $key ) . '" name="' . esc_attr( $opt ) . '" class="mc_radio" value="' . $value . '"' . checked( $data['default_value'], $value, false ) . ' />
400 - <label for="' . esc_attr( $opt . '_' . $key ) . '" class="mc_radio_label">' . esc_html( $value ) . '</label>
374 + <input type="radio" id="' . esc_attr( $opt_id . '_' . $key ) . '" name="' . esc_attr( $opt ) . '" class="mc_radio" value="' . $value . '"' . checked( $data['default_value'], $value, false ) . ' />
375 + <label for="' . esc_attr( $opt_id . '_' . $key ) . '" class="mc_radio_label">' . esc_html( $value ) . '</label>
401 376 </li>';
402 377 }
403 378 $html .= '
404 379 </ul>';
@@ -406,9 +381,9 @@
406 381 break;
407 382 case 'dropdown':
408 383 if ( is_array( $data['options']['choices'] ) ) {
409 384 $html .= '
410 - <select id="' . esc_attr( $opt ) . '" name="' . esc_attr( $opt ) . '" class="mc_select">';
385 + <select id="' . esc_attr( $opt_id ) . '" name="' . esc_attr( $opt ) . '" class="mc_select">';
411 386 foreach ( $data['options']['choices'] as $value ) {
412 387 $html .= '
413 388 <option value="' . esc_attr( $value ) . '"' . selected( $value, $data['default_value'], false ) . '>' . esc_html( $value ) . '</option>';
414 389 }
@@ -417,9 +392,9 @@
417 392 }
418 393 break;
419 394 case 'birthday':
420 395 $html .= '
421 - <input type="text" size="18" placeholder="' . esc_attr( $data['default_value'] ) . '" data-format="' . esc_attr( $data['options']['date_format'] ) . '" name="' . esc_attr( $opt ) . '" id="' . esc_attr( $opt ) . '" class="birthdate-pick mc_input"/>';
396 + <input type="text" size="18" placeholder="' . esc_attr( $data['default_value'] ) . '" data-format="' . esc_attr( $data['options']['date_format'] ) . '" name="' . esc_attr( $opt ) . '" id="' . esc_attr( $opt_id ) . '" class="birthdate-pick mc_input"/>';
422 397 break;
423 398 case 'birthday-old':
424 399 $days = range( 1, 31 );
425 400 $months = array(
@@ -437,9 +412,9 @@
437 412 esc_html__( 'December', 'mailchimp' ),
438 413 );
439 414
440 415 $html .= '
441 - <br /><select id="' . esc_attr( $opt ) . '" name="' . esc_attr( $opt . '[month]' ) . '" class="mc_select">';
416 + <br /><select id="' . esc_attr( $opt_id ) . '" name="' . esc_attr( $opt . '[month]' ) . '" class="mc_select">';
442 417 foreach ( $months as $month_key => $month ) {
443 418 $html .= '
444 419 <option value="' . $month_key . '">' . $month . '</option>';
445 420 }
@@ -446,9 +421,9 @@
446 421 $html .= '
447 422 </select>';
448 423
449 424 $html .= '
450 - <select id="' . esc_attr( $opt ) . '" name="' . esc_attr( $opt . '[day]' ) . '" class="mc_select">';
425 + <select id="' . esc_attr( $opt_id ) . '" name="' . esc_attr( $opt . '[day]' ) . '" class="mc_select">';
451 426 foreach ( $days as $day ) {
452 427 $html .= '
453 428 <option value="' . $day . '">' . $day . '</option>';
454 429 }
@@ -458,20 +433,20 @@
458 433 case 'address':
459 434 $countries = mailchimp_country_list();
460 435 $html .= '
461 436
462 - <label for="' . esc_attr( $opt . '-addr1' ) . '" class="mc_address_label">' . esc_html__( 'Street Address', 'mailchimp' ) . '</label>
463 - <input type="text" size="18" value="" name="' . esc_attr( $opt . '[addr1]' ) . '" id="' . esc_attr( $opt . '-addr1' ) . '" class="mc_input" />
464 - <label for="' . esc_attr( $opt . '-addr2' ) . '" class="mc_address_label">' . esc_html__( 'Address Line 2', 'mailchimp' ) . '</label>
465 - <input type="text" size="18" value="" name="' . esc_attr( $opt . '[addr2]' ) . '" id="' . esc_attr( $opt . '-addr2' ) . '" class="mc_input" />
466 - <label for="' . esc_attr( $opt . '-city' ) . '" class="mc_address_label">' . esc_html__( 'City', 'mailchimp' ) . '</label>
467 - <input type="text" size="18" value="" name="' . esc_attr( $opt . '[city]' ) . '" id="' . esc_attr( $opt . '-city' ) . '" class="mc_input" />
468 - <label for="' . esc_attr( $opt . '-state' ) . '" class="mc_address_label">' . esc_html__( 'State', 'mailchimp' ) . '</label>
469 - <input type="text" size="18" value="" name="' . esc_attr( $opt . '[state]' ) . '" id="' . esc_attr( $opt . '-state' ) . '" class="mc_input" />
470 - <label for="' . esc_attr( $opt . '-zip' ) . '" class="mc_address_label">' . esc_html__( 'Zip / Postal', 'mailchimp' ) . '</label>
471 - <input type="text" size="18" value="" maxlength="5" name="' . esc_attr( $opt . '[zip]' ) . '" id="' . esc_attr( $opt . '-zip' ) . '" class="mc_input" />
472 - <label for="' . esc_attr( $opt . '-country' ) . '" class="mc_address_label">' . esc_html__( 'Country', 'mailchimp' ) . '</label>
473 - <select name="' . esc_attr( $opt . '[country]' ) . '" id="' . esc_attr( $opt . '-country' ) . '">';
437 + <label for="' . esc_attr( $opt_id . '-addr1' ) . '" class="mc_address_label">' . esc_html__( 'Street Address', 'mailchimp' ) . '</label>
438 + <input type="text" size="18" value="" name="' . esc_attr( $opt . '[addr1]' ) . '" id="' . esc_attr( $opt_id . '-addr1' ) . '" class="mc_input" />
439 + <label for="' . esc_attr( $opt_id . '-addr2' ) . '" class="mc_address_label">' . esc_html__( 'Address Line 2', 'mailchimp' ) . '</label>
440 + <input type="text" size="18" value="" name="' . esc_attr( $opt . '[addr2]' ) . '" id="' . esc_attr( $opt_id . '-addr2' ) . '" class="mc_input" />
441 + <label for="' . esc_attr( $opt_id . '-city' ) . '" class="mc_address_label">' . esc_html__( 'City', 'mailchimp' ) . '</label>
442 + <input type="text" size="18" value="" name="' . esc_attr( $opt . '[city]' ) . '" id="' . esc_attr( $opt_id . '-city' ) . '" class="mc_input" />
443 + <label for="' . esc_attr( $opt_id . '-state' ) . '" class="mc_address_label">' . esc_html__( 'State', 'mailchimp' ) . '</label>
444 + <input type="text" size="18" value="" name="' . esc_attr( $opt . '[state]' ) . '" id="' . esc_attr( $opt_id . '-state' ) . '" class="mc_input" />
445 + <label for="' . esc_attr( $opt_id . '-zip' ) . '" class="mc_address_label">' . esc_html__( 'Zip / Postal', 'mailchimp' ) . '</label>
446 + <input type="text" size="18" value="" maxlength="5" name="' . esc_attr( $opt . '[zip]' ) . '" id="' . esc_attr( $opt_id . '-zip' ) . '" class="mc_input" />
447 + <label for="' . esc_attr( $opt_id . '-country' ) . '" class="mc_address_label">' . esc_html__( 'Country', 'mailchimp' ) . '</label>
448 + <select name="' . esc_attr( $opt . '[country]' ) . '" id="' . esc_attr( $opt_id . '-country' ) . '">';
474 449 foreach ( $countries as $country_code => $country_name ) {
475 450 $html .= '
476 451 <option value="' . esc_attr( $country_code ) . '"' . selected( $country_code, $data['options']['default_country'], false ) . '>' . esc_html( $country_name ) . '</option>';
477 452 }
@@ -479,22 +454,14 @@
479 454 </select>';
480 455 break;
481 456 case 'zip':
482 457 $html .= '
483 - <input type="text" size="18" maxlength="5" value="" name="' . esc_attr( $opt ) . '" id="' . esc_attr( $opt ) . '" class="mc_input" />';
458 + <input type="text" size="18" maxlength="5" value="" name="' . esc_attr( $opt ) . '" id="' . esc_attr( $opt_id ) . '" class="mc_input" />';
484 459 break;
485 460 case 'phone':
486 - if ( isset( $data['options']['phone_format'] ) && 'US' === $data['options']['phone_format'] ) {
487 - $html .= '
488 - <input type="text" size="2" maxlength="3" value="" name="' . esc_attr( $opt . '[area]' ) . '" id="' . esc_attr( $opt . '-area' ) . '" class="mc_input mc_phone" />
489 - <input type="text" size="2" maxlength="3" value="" name="' . esc_attr( $opt . '[detail1]' ) . '" id="' . esc_attr( $opt . '-detail1' ) . '" class="mc_input mc_phone" />
490 - <input type="text" size="5" maxlength="4" value="" name="' . esc_attr( $opt . '[detail2]' ) . '" id="' . esc_attr( $opt . '-detail2' ) . '" class="mc_input mc_phone" />
491 - ';
492 - } else {
493 - $html .= '
494 - <input type="text" size="18" value="" name="' . esc_attr( $opt ) . '" id="' . esc_attr( $opt ) . '" class="mc_input" />
495 - ';
496 - }
461 + $is_us_phone = isset( $data['options']['phone_format'] ) && 'US' === $data['options']['phone_format'];
462 + $html .= '
463 + <input type="tel" size="20" minlength="6" maxlength="20" pattern="^\+?[\d\s\-\(\)\.]*$" value="" name="' . esc_attr( $opt ) . '" id="' . esc_attr( $opt_id ) . '" class="mc_input mailchimp-sf-phone" placeholder="' . esc_attr( $is_us_phone ? '(###) ### - ####' : '' ) . '" />';
497 464 break;
498 465 case 'email':
499 466 case 'url':
500 467 case 'imageurl':
@@ -501,9 +468,9 @@
501 468 case 'text':
502 469 case 'number':
503 470 default:
504 471 $html .= '
505 - <input type="text" size="18" placeholder="' . esc_attr( $data['default_value'] ) . '" name="' . esc_attr( $opt ) . '" id="' . esc_attr( $opt ) . '" class="mc_input"/>';
472 + <input type="text" size="18" placeholder="' . esc_attr( $data['default_value'] ) . '" name="' . esc_attr( $opt ) . '" id="' . esc_attr( $opt_id ) . '" class="mc_input"/>';
506 473 break;
507 474 }
508 475 if ( ! empty( $data['help_text'] ) ) {
509 476 $html .= '<span class="mc_help">' . esc_html( $data['help_text'] ) . '</span>';