title: How to close fancybox and reset input form values
body: <p>Hello I have a contact us form using fancybox, and I want to reset/clear the form input values when fancybox closes (either when user clicks outside the popup or using the "close" popup button)</p>
  
  <p>the element which holds the fancybox content is 'inline' so my guess was:</p>
  
  <pre><code>...
  $("#fancybox-overlay").fancybox({
  
  'afterClosed': function() {
          $('#inline').hide(250, function() {
              $('#name input').val('');
              $('#phone input').val('');
              $('#email input').val('');
              $('#subject input').val('');
              $('#msgcontent textarea').val('');
              $('#security_code input').val('');
  
              $('#name input').removeClass('error');
              $('#phone input').removeClass('error');
              $('#email input').removeClass('error');
              $('#subject input').removeClass('error');
              $('#msgcontent textarea').removeClass('error');
              $('#security_code input').removeClass('error');
              $('#security_code_error').html('');
          });
      }
  });
  </code></pre>
  
  <p>But the result is as below:
  before :
  <img src="https://i.stack.imgur.com/eRoW3.png" alt="enter image description here"></p>
  
  <p>and after:
  <img src="https://i.stack.imgur.com/izDYM.png" alt="enter image description here"></p>
  
  <p>Any help to make the form values reset/cleared during a "close" action from clicking outside the popup, will be very much appreciated. Thanks.</p>
  
  <p><strong>UPDATE:</strong>
  The html requested by @Spokey is:</p>
  
  <pre><code>&lt;div id="inline" style="z-index:999999;"&gt;
      &lt;h2 class="popupheader"&gt;...Contact Us: Send us a Message&lt;/h2&gt;
  
      &lt;div style="margin:2% 8%;background:#fff;border-radius:5px;width:auto;box-shadow: 3px 3px 10px #bbb;"&gt;
          &lt;p style="display:inline-block;padding:10px;"&gt;
              ...
          &lt;/p&gt;
          &lt;p style="display:inline-block;padding:10px;float:right;"&gt;
              ...
          &lt;/p&gt;
      &lt;/div&gt;
      &lt;form id="contact" name="contact" action="#" method="post"&gt;
          &lt;label for="name"&gt;Your Name&lt;/label&gt;
          &lt;input type="text" id="name" name="name" class="txt" style="margin-left: 3px"&gt;
          &lt;br&gt;
          &lt;label for="phone"&gt;Your Phone No.&lt;/label&gt;
          &lt;input type="text" id="phone" name="phone" class="txt" &gt;
          &lt;br&gt;
          &lt;label for="email"&gt;Your E-mail&lt;/label&gt;
          &lt;input type="email" id="email" name="email" class="txt"&gt;
          &lt;br&gt;
          &lt;label for="subject"&gt;Subject&lt;/label&gt;
          &lt;input type="text" id="subject" name="subject" class="txt" size="45"&gt;
          &lt;br&gt;
          &lt;label for="msgcontent"&gt;Enter a Message&lt;/label&gt;
          &lt;textarea id="msgcontent" name="msgcontent" class="txtarea" style="margin-left: 3px"&gt;&lt;/textarea&gt;
  
          &lt;br&gt;
  
          &lt;label for="security_code" style="width:auto;"&gt;Verify you are human&lt;/label&gt;
          &lt;img border="0" id="captcha" src="../../image.php" alt=""&gt;&amp;nbsp;&lt;a href="JavaScript: new_captcha();"&gt;
          &lt;img border="0" alt="" src="../../images/refresh.png" align="bottom"&gt;&lt;/a&gt;
          &lt;input name="security_code" id="security_code" class="txt" style="width:150px;vertical-align: top;margin: 0px;" size="20" type="text" &gt;
          &lt;span id="security_code_error" name="security_code_error" style="background:#fefefe;color:red;"&gt;&lt;/span&gt;&lt;? /*&lt;div class="field_error error_pos"&gt;&lt;?php if($error['security_code'] != "") echo $error['security_code']; ?&gt;&lt;/div&gt; */ ?&gt;
  &lt;br /&gt;
  &lt;hr style="color:#f2f2f2;border:1px solid #f2f2f2;width:auto;"&gt;
          &lt;button id="send" name="send"&gt;Send Message&lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>