Hello everyone! I came here searching for a way to hide empty fields in the "good_template" but unfortunately it appears that no one had had this issue before. So in case there are others who wish to know how to do this, I thought it would be a good idea to write this little tutorial.

Background: I created a form using Tectite's FormMail as the submission script, and it had a lot of optional fields that would show or hide based on select menu choices (using jQuery). The form itself works wonderfully but when it came time to create the confirmation page, I hit a little snag. There were so many optional fields (some of which the user wouldn't even have seen on the original form) that a lot of them were empty and I didn't want the user to see them on the confirmation page.

Solution: More jQuery! This time on the good_template HTML page. It's a fairly simple script too:

$(document).ready(function() {
        var value = $.trim($(this).text())
        if(value == ""){
What it does is search for any HTML element on the page with the class "value" that doesn't contain any text. When it finds that element with those criteria, it then searches for the first <em>ancestor</em> element with the class "label" wrapped around the "value" element. It then hides the "label" element.

In your HTML, what you want to do is wrap your field references in anything with the class "value" (spans are good for this) and then wrap the field reference AND its label in anything with the class "label". Here's an example for an email field:

<div class="label">Email Address: <span class="value">$email</span></div>
If the user enters their email into the form, the entire div will appear normally. But if they don't enter their email (and thus the field will be sent through as empty), then the whole div will be hidden on the confirmation page.

You can also nest them any way you like.

<div class="label">Participant: <span class="value">$Participant_Name</span>, $Participant_Email, $Participant_PhoneNumber<span class="label">  Ext. <span class="value">$Participant_PhoneExtension</span></span></div>
In this case, if the user fills out all the fields except for the phone extension one, just the extension portion is hidden. If the name field isn't filled out (and thus you can assume that the rest of the fields wouldn't been filled out either), the whole div is hidden.

I also created a JSfiddle if you'd like to play around with it: http://jsfiddle.net/m6Q54/1/

If you use this, don't forget to ask include a link to the jQuery library somewhere on the page. Something like:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
If you have any questions, feel free to ask.

And last but not least, I'd like to say thanks to Tectite for creating this fantastic form!