Styling not applied in contac us module due to ECC markup

12 Jahre 5 Monate her #4380 von robd

Styling not applied in contac us module due to ECC markup wurde erstellt von robd

Hi,

I've noticed that the markup generated on the contact us module differs when ECC is in use (whether using recaptcha or normal calculation modes). It can be proved by turning the module off. It's mainly the CSS classes that get applied to the elements (which get refreshed on pageload) that cause the issue.

As a result, the template CSS for forms is not applied to the form elements, as the classes on the input element, their labels and surrounding divs are changed.

You can see the extension in use and the problem here:
Example here

This is the HTML markup generated when the extension is in use:

<div id="component-contact" class="contact">
		
	
		<h2 class="contact-name contentheading"><cufon class="cufon cufon-canvas" alt="Get " style="width: 47px; height: 23px; "><canvas width="74" height="26" style="width: 74px; height: 26px; top: -2px; left: -4px; "></canvas><cufontext>Get </cufontext></cufon><cufon class="cufon cufon-canvas" alt="in " style="width: 29px; height: 23px; "><canvas width="57" height="26" style="width: 57px; height: 26px; top: -2px; left: -4px; "></canvas><cufontext>in </cufontext></cufon><cufon class="cufon cufon-canvas" alt="touch" style="width: 82px; height: 23px; "><canvas width="96" height="26" style="width: 96px; height: 26px; top: -2px; left: -4px; "></canvas><cufontext>touch</cufontext></cufon></h2>
	
	
	<br>

	
	
<script type="text/javascript">
	function validateForm( frm ) {
		var valid = document.formvalidator.isValid(frm);
		if (valid == false) {
			// do field validation
			if (frm.email.invalid) {
				alert( "Please enter a valid e-mail address:" );
			} else if (frm.text.invalid) {
				alert( "Please make sure the form is complete and valid." );
			}
			return false;
		} else {
			frm.submit();
		}
	}
</script>

<form action="/contact-us" class="form-validate" method="post" name="emailForm" id="emailForm">
	<div class="[b]uheic1mbeum[/b]">
		<label for="irm9zn5tpa">
		Enter your Name:</label>
		<input type="text" name="aaoeara27r6" id="irm9zn5tpa" size="30" class="inputbox nrod3tet4xq" value="">
	</div>
	<div class="uheic1mbeum"><label for="rlfnm5f8s4j"></label><input type="text" id="rlfnm5f8s4j" name="x3ow5flk" size="30" class="inputbox nrod3tet4xq xr7yhset"><label id="uheic1mbeummsg" for="uheic1mbeum">
		E-mail address*:</label>
		<input type="text" id="uheic1mbeum" name="wpx6x658lq" size="30" value="" class="inputbox nrod3tet4xq required validate-email" maxlength="100">
	</div>
	<div class="uheic1mbeum"><label for="c5u5c5oqg7">
		Message Subject:</label>
		<input type="text" name="vgsskwcz9" id="c5u5c5oqg7" size="30" class="inputbox nrod3tet4xq" value="">
	</div>
		<div class="uheic1mbeum"><label id="v7shn185u" for="ut7y8ikr7b" class="textarea">
		Enter your Message*:</label>
		<textarea name="cxkk7ami4at" id="ut7y8ikr7b" class="inputbox nrod3tet4xq required" rows="10" cols="40"></textarea>
	</div>
		<div class="uheic1mbeum_checkbox">
	<input type="checkbox" name="ups2g" id="g4s4hzk9" value="1">
	<label for="g4s4hzk9" class="copy">
	E-mail a copy of this message to your own address.	</label>
	</div>
		<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6Lds4MgSAAAAAI5yyI3ao1z61qmxXQhbe8hFq7Me"></script><script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha.js"></script><div id="recaptcha_widget_div" style="" class=" recaptcha_nothad_incorrect_sol recaptcha_isnot_showing_audio"><div id="recaptcha_area"><table id="recaptcha_table" class="recaptchatable recaptcha_theme_clean"> <tbody><tr height="73"> <td class="recaptcha_image_cell" width="302"><center><div id="recaptcha_image" style="width: 300px; height: 57px; "><img style="display:block;" height="57" width="300" src="http://www.google.com/recaptcha/api/image?c=03AHJ_VuvURdbiDgOZ_OXFVktg95BWbyIbLF7uI9JM1tQd7dOpzPDaXQ9o3kIOnjAz4OKHmPsDBiELKK34eUHEDaFxEqzXy4Hg9iadU-i4fbK6iBQd_hd_dSfJzFhcHwoAjYNnF5rdl2bzBnnNGDeAUzGiGAu8XmKHTQ"></div></center></td> <td style="padding: 10px 7px 7px 7px;"> <a id="recaptcha_reload_btn" href="javascript:Recaptcha.reload ();" title="Get a new challenge"><img id="recaptcha_reload" width="25" height="18" alt="Get a new challenge" src="http://www.google.com/recaptcha/api/img/clean/refresh.png"></a> <a id="recaptcha_switch_audio_btn" class="recaptcha_only_if_image" href="javascript:Recaptcha.switch_type('audio');" title="Get an audio challenge"><img id="recaptcha_switch_audio" width="25" height="15" alt="Get an audio challenge" src="http://www.google.com/recaptcha/api/img/clean/audio.png"></a><a id="recaptcha_switch_img_btn" class="recaptcha_only_if_audio" href="javascript:Recaptcha.switch_type('image');" title="Get a visual challenge"><img id="recaptcha_switch_img" width="25" height="15" alt="Get a visual challenge" src="http://www.google.com/recaptcha/api/img/clean/text.png"></a> <a id="recaptcha_whatsthis_btn" href="http://www.google.com/recaptcha/help?c=03AHJ_VuvURdbiDgOZ_OXFVktg95BWbyIbLF7uI9JM1tQd7dOpzPDaXQ9o3kIOnjAz4OKHmPsDBiELKK34eUHEDaFxEqzXy4Hg9iadU-i4fbK6iBQd_hd_dSfJzFhcHwoAjYNnF5rdl2bzBnnNGDeAUzGiGAu8XmKHTQ" target="_blank" title="Help"><img id="recaptcha_whatsthis" width="25" height="16" src="http://www.google.com/recaptcha/api/img/clean/help.png" alt="Help"></a> </td> <td style="padding: 18px 7px 18px 7px;"> <img id="recaptcha_logo" alt="" width="71" height="36" src="http://www.google.com/recaptcha/api/img/clean/logo.png"> </td> </tr> <tr> <td style="padding-left: 7px;"> <div class="recaptcha_input_area" style="padding-top: 2px; padding-bottom: 7px;"> <span id="recaptcha_challenge_field_holder" style="display: none; "><input type="hidden" name="recaptcha_challenge_field" id="recaptcha_challenge_field" value="03AHJ_VuvURdbiDgOZ_OXFVktg95BWbyIbLF7uI9JM1tQd7dOpzPDaXQ9o3kIOnjAz4OKHmPsDBiELKK34eUHEDaFxEqzXy4Hg9iadU-i4fbK6iBQd_hd_dSfJzFhcHwoAjYNnF5rdl2bzBnnNGDeAUzGiGAu8XmKHTQ"></span><input style="border: 1px solid #3c3c3c; width: 302px;" name="recaptcha_response_field" id="recaptcha_response_field" type="text" autocomplete="off"> </div> </td> <td></td> <td style="padding: 4px 7px 12px 7px;"> <img id="recaptcha_tagline" width="71" height="17" src="http://www.google.com/recaptcha/api/img/clean/tagline.png"> </td> </tr> </tbody></table> </div></div><script>Recaptcha.widget = Recaptcha.$("recaptcha_widget_div"); Recaptcha.challenge_callback();</script>

	<noscript>
  		&lt;iframe src="http://www.google.com/recaptcha/api/noscript?k=6Lds4MgSAAAAAI5yyI3ao1z61qmxXQhbe8hFq7Me" height="300" width="500" frameborder="0"&gt;&lt;/iframe&gt;&lt;br/&gt;
  		&lt;textarea name="recaptcha_challenge_field" rows="3" cols="40"&gt;&lt;/textarea&gt;
  		&lt;input type="hidden" name="recaptcha_response_field" value="manual_challenge"/&gt;
	</noscript><br><button class="button validate" type="submit">Send</button>
	<input type="hidden" name="view" value="contact">
	<input type="hidden" name="id" value="1">
	<input type="hidden" name="task" value="submit">
	<input type="hidden" name="9a03306dbbab73e1a94f56fef1c31241" value="1"></form>
</div>

This is the HTML generated when the extension is disabled (or when the user has logged in)

<div id="component-contact" class="contact">
		
	
		<h2 class="contact-name contentheading"><cufon class="cufon cufon-canvas" alt="Get " style="width: 47px; height: 23px; "><canvas width="74" height="26" style="width: 74px; height: 26px; top: -2px; left: -4px; "></canvas><cufontext>Get </cufontext></cufon><cufon class="cufon cufon-canvas" alt="in " style="width: 29px; height: 23px; "><canvas width="57" height="26" style="width: 57px; height: 26px; top: -2px; left: -4px; "></canvas><cufontext>in </cufontext></cufon><cufon class="cufon cufon-canvas" alt="touch" style="width: 82px; height: 23px; "><canvas width="96" height="26" style="width: 96px; height: 26px; top: -2px; left: -4px; "></canvas><cufontext>touch</cufontext></cufon></h2>
	
	
	<br>

	
	
<script type="text/javascript">
	function validateForm( frm ) {
		var valid = document.formvalidator.isValid(frm);
		if (valid == false) {
			// do field validation
			if (frm.email.invalid) {
				alert( "Please enter a valid e-mail address:" );
			} else if (frm.text.invalid) {
				alert( "Please make sure the form is complete and valid." );
			}
			return false;
		} else {
			frm.submit();
		}
	}
</script>

<form action="/contact-us" class="form-validate" method="post" name="emailForm" id="emailForm">
	<div class="contact_email">
		<label for="contact_name">
		Enter your Name:</label>
		<input type="text" name="name" id="contact_name" size="30" class="inputbox" value="">
	</div>
	<div class="contact_email"><label id="contact_emailmsg" for="contact_email">
		E-mail address*:</label>
		<input type="text" id="contact_email" name="email" size="30" value="" class="inputbox required validate-email" maxlength="100">
	</div>
	<div class="contact_email"><label for="contact_subject">
		Message Subject:</label>
		<input type="text" name="subject" id="contact_subject" size="30" class="inputbox" value="">
	</div>
		<div class="contact_email"><label id="contact_textmsg" for="contact_text" class="textarea">
		Enter your Message*:</label>
		<textarea name="text" id="contact_text" class="inputbox required" rows="10" cols="40"></textarea>
	</div>
		<div class="contact_email_checkbox">
	<input type="checkbox" name="email_copy" id="contact_email_copy" value="1">
	<label for="contact_email_copy" class="copy">
	E-mail a copy of this message to your own address.	</label>
	</div>
		<button class="button validate" type="submit">Send</button>
	<input type="hidden" name="view" value="contact">
	<input type="hidden" name="id" value="1">
	<input type="hidden" name="task" value="submit">
	<input type="hidden" name="e25feddf1331fc184bd57e5d65f65925" value="1"></form>
</div>

Any idea if I can can get the original classes applied to the elements, or are the classes being changed deliberately to what appears to be random values?

Thanks in advance for any help,

Rob.

Bitte Anmelden, um der Konversation beizutreten.