Contact form module doesn't produce valid XHTML

[Kitserve]

When a contact form is inserted into a page, it automatically gets wrapped in <p> tags, even if it is put outside of them using the HTML editor. This isn't valid XHTML, see e.g. http://stackoverflow.com/questions/1022041/why-doesnt-form-nested-in-p-validate-as-xhtml.

[Sander (sanderth-deactivatedaccount)]

I am aware of this problem. It also applies to any other module inserted by the module tags, and is caused by TinyMCE wrapping the module tags in <p> tags. I'm not (yet) sure how to fix this problem, so if anyone has any ideas...

Oh, this idea just popped in my mind: we could put the modules in a div, for example <div class="contactform">module code here</div>...

[Kitserve (ubuntu-kitserve)]

Wrapping the contact form (and other modules) in a <div> will only work if the module tags aren't input into TinyMCE but controlled by some other means. Otherwise you'll end up with <p><div class="contactform"><!-- contactform code --></div></p>, which doesn't fix the problem.

I have a workaround but it's a bit of a hack, by changing the last section of contactform.site.php to the following:

 //Then show the contactform.
 ?>
</p><!-- ADDED THIS -->
  <form method="post" action="" id="contactform">
   <div>
    <label for="contactform_name"><?php echo $lang['general']['name']; ?></label>
    <br />
    <input name="contactform_name" id="contactform_name" type="text" />
    <br />
    <label for="contactform_sender"><?php echo $lang['general']['email']; ?></label>
    <br />
    <input name="contactform_sender" id="contactform_sender" type="text" />
    <br />
    <label for="contactform_message"><?php echo $lang['general']['message']; ?></label>
    <br />
    <textarea name="contactform_message" id="contactform_message" rows="7" cols="45"></textarea>
    <br />
    <input type="submit" name="submit" value="<?php echo $lang['general']['send']; ?>" />
   </div>
  </form>
<p><!-- ADDED THIS -->
 <?php
}
?>

All it does is close the <p> tag before outputting the contact form, and then open another one afterwards so the tags match. It validates correctly and the layout seems unaffected (on Firefox and my site theme, haven't tried other browsers and themes), it's not exactly elegant though!

[Sander (sanderth-deactivatedaccount)]

I agree, that's not an elegant solution, not a good idea IMO.

But I just tested nesting the module tag between <div> tags (in TinyMCE), and for me it seems to work. I think you were putting the div in the module code, but you should put it in TinyMCE directly, like this: <div class="module_contactform">{pluck show_module(contactform)}</div>

[Uranium235 (uranium235)]

Maybe I'm stating the obvious here, but the fix could be to change tinymce.php at line 72

from
 tinyMCE.execCommand('mceInsertContent', false, '{pluck show_module(' + code + ')}');
to
 tinyMCE.execCommand('mceInsertContent', false, '<div class="module_' + code + '">{pluck show_module(' + code + ')}</div>');

[Uranium235 (uranium235)]

... unless of course if spaces or other special characters are allowed in code, that would need a little more care.

[Uranium235 (uranium235)]

fixed in lp:~uranium235/pluck-cms/pluck-cms