Forms: fix invalid field ids (#41564)

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/13186765778

Upstream-Ref: Automattic/jetpack@347017a

CHANGELOG.md

@@ -21,6 +21,7 @@ This is an alpha version! The changes listed here are not final.
 ### Fixed
 - Fix submit button width and alignment
 - Forms: Fix block style variations not showing in the editor.
+- Forms: Fix invalid html IDs.
 - Forms: Hide fields without options.
 
 ## [0.36.0] - 2025-02-03

src/contact-form/class-contact-form-field.php

@@ -655,7 +655,7 @@ public function render_textarea_field( $id, $label, $value, $class, $required, $
 	/**
 	 * Return the HTML for the radio field.
 	 *
-	 * @param int    $id - the ID.
+	 * @param string $id - the ID (starts with 'g' - see constructor).
 	 * @param string $label - the label.
 	 * @param string $value - the value of the field.
 	 * @param string $class - the field class.
@@ -670,11 +670,20 @@ public function render_radio_field( $id, $label, $value, $class, $required, $req
 
 		$field_style = 'style="' . $this->option_styles . '"';
 
+		$used_html_ids = array();
+
 		foreach ( (array) $this->get_attribute( 'options' ) as $option_index => $option ) {
 			$option = Contact_Form_Plugin::strip_tags( $option );
 			if ( is_string( $option ) && $option !== '' ) {
 				$radio_value = $this->get_option_value( $this->get_attribute( 'values' ), $option_index, $option );
-				$radio_id    = "$id-$radio_value";
+				$radio_id    = $id . '-' . sanitize_html_class( $radio_value );
+
+				// If exact id was already used in this radio group, append option index.
+				// Multiple 'blue' options would give id-blue, id-blue-1, id-blue-2, etc.
+				if ( isset( $used_html_ids[ $radio_id ] ) ) {
+					$radio_id .= '-' . $option_index;
+				}
+				$used_html_ids[ $radio_id ] = true;
 
 				$field .= "<p class='contact-form-field'>";
 				$field .= "<input
@@ -745,7 +754,7 @@ private function render_consent_field( $id, $class ) {
 	/**
 	 * Return the HTML for the multiple checkbox field.
 	 *
-	 * @param int    $id - the ID.
+	 * @param string $id - the ID (starts with 'g' - see constructor).
 	 * @param string $label - the label.
 	 * @param string $value - the value of the field.
 	 * @param string $class - the field class.
@@ -764,11 +773,20 @@ public function render_checkbox_multiple_field( $id, $label, $value, $class, $re
 
 		$field_style = 'style="' . $this->option_styles . '"';
 
+		$used_html_ids = array();
+
 		foreach ( (array) $this->get_attribute( 'options' ) as $option_index => $option ) {
 			$option = Contact_Form_Plugin::strip_tags( $option );
 			if ( is_string( $option ) && $option !== '' ) {
 				$checkbox_value = $this->get_option_value( $this->get_attribute( 'values' ), $option_index, $option );
-				$checkbox_id    = "$id-$checkbox_value";
+				$checkbox_id    = $id . '-' . sanitize_html_class( $checkbox_value );
+
+				// If exact id was already used in this checkbox group, append option index.
+				// Multiple 'blue' options would give id-blue, id-blue-1, id-blue-2, etc.
+				if ( isset( $used_html_ids[ $checkbox_id ] ) ) {
+					$checkbox_id .= '-' . $option_index;
+				}
+				$used_html_ids[ $checkbox_id ] = true;
 
 				$field .= "<p class='contact-form-field'>";
 				$field .= "<input