Merge pull request #173 from mailchimp/enhancement/172

Allow multiple Mailchimp forms on a single page.

Author: dkotter

README.md

@@ -73,10 +73,6 @@ If you are upgrading to version 1.6.0, you will need to updated any references t
 
 ## Frequently Asked Questions
 
-### Can I have multiple forms on one page?
-
-No, only one form should exist per page, no matter the display type (block, widget, or shortcode).
-
 ### Why am I not seeing all my fields in my form?
 
 You need to ensure that the fields are enabled both in your Mailchimp account (Audience > Signup forms) and in the settings of this plugin.  Once the fields are enabled in both places, then they'll appear in the editor and frontend of your site.

assets/css/frontend.css

@@ -9,7 +9,7 @@
 div.mc_interest{
 	width:100%;
 }
-#mc_signup_form label.mc_interest_label {
+.mc_signup_form label.mc_interest_label {
 	display:inline;
 }
 .mc_signup_submit {
@@ -35,7 +35,7 @@ ul.mc_list li {
 	margin-bottom: 0.75em;
 }
 .mc_custom_border_hdr,
-#mc_subheader {
+.mc_subheader {
 	line-height: 1.25em;
 	margin-bottom: 18px;
 }
@@ -86,15 +86,15 @@ select.mc_select {
 .mc_interest input {
 	margin-bottom: 0.4em;
 }
-#mc_signup_submit {
+.mc_signup_submit_button {
 	margin-top: 1.5em;
 	padding: 10px 8px;
 	width: 80%;
 }
-#mc_unsub_link a {
+.mc_unsub_link a {
 	font-size: 0.75em;
 }
-#mc_unsub_link {
+.mc_unsub_link {
 	margin-top: 1.0em;
 }
 .mc_header_address,
@@ -110,7 +110,7 @@ select.mc_select {
 .mc_email_type {
 	padding-left: 4px;
 }
-#mc-indicates-required {
+.mc-indicates-required {
 	width:100%;
 	margin-top: 1em;
 }

includes/blocks/mailchimp/block.json

@@ -46,7 +46,6 @@
   },
   "supports": {
     "html": false,
-    "multiple": false,
     "reusable": true,
     "align": [ "wide", "full" ],
     "__experimentalBorder": {

includes/blocks/mailchimp/edit.js

@@ -328,9 +328,9 @@ export const BlockEdit = (props) => {
 							value={header}
 							onChange={(header) => setAttributes({ header })}
 						/>
-						<div id="mc_signup">
-							<div id="mc_signup_form">
-								<div id="mc_subheader">
+						<div className="mc_signup">
+							<div className="mc_signup_form">
+								<div className="mc_subheader">
 									<RichText
 										className="mailchimp-block__sub-header"
 										tagName="h3"
@@ -359,7 +359,7 @@ export const BlockEdit = (props) => {
 										templateLock="insert"
 									/>
 									{show_required_indicator && (
-										<div id="mc-indicates-required">
+										<div className="mc-indicates-required">
 											<RichText
 												tagName="span"
 												value={required_indicator_text}
@@ -372,8 +372,7 @@ export const BlockEdit = (props) => {
 									)}
 									<div className="mc_signup_submit">
 										<RichText
-											id="mc_signup_submit"
-											className="button"
+											className="mc_signup_submit_button button"
 											tagName="button"
 											placeholder={__('Enter button text.', 'mailchimp')}
 											value={submit_text}
@@ -383,7 +382,7 @@ export const BlockEdit = (props) => {
 										/>
 									</div>
 									{!!show_unsubscribe_link && (
-										<div id="mc_unsub_link">
+										<div className="mc_unsub_link">
 											<RichText
 												tagName="a"
 												value={unsubscribe_link_text}

includes/blocks/mailchimp/editor.css

@@ -2,7 +2,7 @@
 div.mc_interest{
 	width:100%;
 }
-#mc_signup_form label.mc_interest_label {
+.mc_signup_form label.mc_interest_label {
 	display:inline;
 }
 .mc_signup_submit {
@@ -17,7 +17,7 @@ ul.mc_list li {
 	font-size: 14px;
 }
 
-#mc_message {
+.mc_message_wrapper {
 	display: none;
 }
 
@@ -44,37 +44,32 @@ ul.mc_list li {
 }
 
 h2.mailchimp-block__header:has(span:empty),
-div#mc_subheader:has(h3 span:empty) {
+div.mc_subheader:has(h3 span:empty) {
 	display: none;
 }
 
-.wp-block-mailchimp-mailchimp.is-selected div#mc_subheader:has(h3 span:empty),
-.wp-block-mailchimp-mailchimp.has-child-selected div#mc_subheader:has(h3 span:empty),
+.wp-block-mailchimp-mailchimp.is-selected div.mc_subheader:has(h3 span:empty),
+.wp-block-mailchimp-mailchimp.has-child-selected div.mc_subheader:has(h3 span:empty),
 .wp-block-mailchimp-mailchimp.is-selected h2.mailchimp-block__header:has(span:empty),
 .wp-block-mailchimp-mailchimp.has-child-selected h2.mailchimp-block__header:has(span:empty) {
     display: block;
 }
 
-#mc_signup_form .mailchimp_merge_field_hidden .mc_var_label,
-#mc_signup_form .mailchimp_interest_group_hidden .mc_interests_header {
+.mc_signup_form .mailchimp_merge_field_hidden .mc_var_label,
+.mc_signup_form .mailchimp_interest_group_hidden .mc_interests_header {
 	padding: 0.25em 0.5em;
 	margin: 0px;
 }
 
-#mc_subheader {
+.mc_subheader {
 	line-height: 1.25em;
 	margin-bottom: 18px;
 }
 
-#mc_signup_submit {
-	margin-top: 1.5em;
-	padding: 10px 8px;
-	width: 80%;
-}
-#mc_unsub_link a {
+.mc_unsub_link a {
 	font-size: 0.75em;
 }
-#mc_unsub_link {
+.mc_unsub_link {
 	margin-top: 1.0em;
 	text-align: center;
 }
@@ -123,17 +118,12 @@ select.mc_select {
 .mc_interest input {
 	margin-bottom: 0.4em;
 }
-#mc_signup_submit {
+.mc_signup_submit_button {
 	margin-top: 1.5em;
 	padding: 10px 8px;
 	width: 80%;
 }
-#mc_unsub_link a {
-	font-size: 0.75em;
-}
-#mc_unsub_link {
-	margin-top: 1.0em;
-}
+
 .mc_header_address,
 .mc_email_format {
 	display: block;
@@ -147,7 +137,7 @@ select.mc_select {
 .mc_email_type {
 	padding-left: 4px;
 }
-#mc-indicates-required {
+.mc-indicates-required {
 	width:100%;
 	margin-top: 1em;
 }

includes/blocks/mailchimp/markup.php

@@ -13,7 +13,6 @@
 ?>
 <div <?php echo get_block_wrapper_attributes(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
 	<?php
-
 	// Backwards compatibility for old block, which didn't have innerBlocks.
 	$block_instance = $block->parsed_block;
 	$inner_blocks   = $block_instance['innerBlocks'] ?? [];
@@ -27,6 +26,7 @@
 
 	// Make sure we have a list ID and it's valid.
 	$list_id  = $attributes['list_id'] ?? '';
+	$form_id  = wp_unique_id( $list_id . '_' );
 	$lists    = ( new Mailchimp_List_Subscribe_Form_Blocks() )->get_lists();
 	$list_ids = array_map(
 		function ( $single_list ) {
@@ -96,17 +96,17 @@ function ( $single_list ) {
 		}
 		if ( $sub_heading ) {
 			?>
-			<div id="mc_subheader">
+			<div class="mc_subheader">
 				<h3>
 					<?php echo wp_kses_post( $sub_heading ); ?>
 				</h3>
 			</div><!-- /mc_subheader -->
 			<?php
 		}
 		?>
-		<div id="mc_signup">
-			<form method="post" action="#mc_signup" id="mc_signup_form" class="mc_signup_form">
-				<input type="hidden" id="mc_submit_type" class="mc_submit_type" name="mc_submit_type" value="html" />
+		<div id="mc_signup_<?php echo esc_attr( $form_id ); ?>">
+			<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">
+				<input type="hidden" class="mc_submit_type" name="mc_submit_type" value="html" />
 				<input type="hidden" name="mcsf_action" value="mc_submit_signup_form" />
 				<input type="hidden" name="mailchimp_sf_list_id" value="<?php echo esc_attr( $list_id ); ?>" />
 				<input type="hidden" name="mailchimp_sf_update_existing_subscribers" value="<?php echo esc_attr( $update_existing_subscribers ); ?>" />
@@ -117,7 +117,7 @@ function ( $single_list ) {
 				wp_nonce_field( 'mc_submit_signup_form', '_mc_submit_signup_form_nonce', false );
 				?>
 				<div class="mc_form_inside">
-					<div class="mc_message_wrapper" id="mc_message">
+					<div class="mc_message_wrapper">
 						<?php echo wp_kses_post( mailchimp_sf_global_msg() ); ?>
 					</div>
 
@@ -136,7 +136,7 @@ function ( $single_list ) {
 					// Show an explanation of the * if there's more than one field
 					if ( $show_required_indicator ) {
 						?>
-						<div id="mc-indicates-required">
+						<div class="mc-indicates-required">
 							<?php echo esc_html( $required_indicator_text ); ?>
 						</div><!-- /mc-indicates-required -->
 						<?php
@@ -146,7 +146,7 @@ function ( $single_list ) {
 					mailchimp_sf_honeypot_field();
 					?>
 					<div class="mc_signup_submit">
-						<input type="submit" name="mc_signup_submit" class="mc_signup_submit_button" id="mc_signup_submit" value="<?php echo esc_attr( $submit_text ); ?>" class="button" />
+						<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" />
 					</div><!-- /mc_signup_submit -->
 
 					<?php
@@ -155,7 +155,7 @@ function ( $single_list ) {
 						$api  = mailchimp_sf_get_api();
 						$host = 'https://' . $api->datacenter . '.list-manage.com';
 						?>
-						<div id="mc_unsub_link" align="center">
+						<div class="mc_unsub_link" align="center">
 							<a href="<?php echo esc_url( $host . '/unsubscribe/?u=' . $user['account_id'] . '&amp;id=' . $list_id ); ?>" target="_blank">
 								<?php echo esc_html( $unsubscribe_link_text ); ?>
 							</a>

mailchimp.php

@@ -192,7 +192,7 @@ function mailchimp_sf_load_resources() {
 function mailchimp_sf_custom_style_css() {
 	ob_start();
 	?>
-	#mc_signup_form {
+	.mc_signup_form {
 		padding:5px;
 		border-width: <?php echo absint( get_option( 'mc_form_border_width' ) ); ?>px;
 		border-style: <?php echo ( get_option( 'mc_form_border_width' ) === 0 ) ? 'none' : 'solid'; ?>;