Simple contact form with modal response

Question

Alright, I know there are many questions/answers for a modal contact form, but I would like to know how I can have a normal contact form on the page and when submitted, the PHP action is popped up in a modal, saying "Thanks for contacting us", or something along those lines, and then the ability to close. I've done HTML contact forms and hooked in the PHP action before, just never in a modal... Any simple solutions (without the use of plugins)?

If anyone has this question and wants it answered, please be sure to vote up.

Answer 1

If you want to have a javascript-free solution, then your form-handling script will need to be able to present all states of the form. These include:

• initial unfilled form
• response to first submission which may be:
  • display of partially or incorrectly filled form with errors marked
  • thank-you message
• response to thank-you message

A modal popup is only a translucent container element (eg <div> ) styled to be z-positioned on top of all the other html (except its children) and to cover the entire viewport. It contains a form and anything else you might like. When it is not in use, its display attribute is set to none .

So your php form handler might work something like this:

$modalclass='modalhide';
$filteredpost=array();

if(isset($_POST['submit1']){ //user submitted form data
    //validate submitted data
    $filteredpost = my_cleanup_function($_POST); 
    if(my_form_is_good($filteredpost){
      $modalclass='modalshow';
      $filteredpost=array();
    } 
} 

echo <<< EOF
<form method='POST' name='mainform' action='myhandler.php'>
   //other form fields
   <input type='submit' name='submit1'>
</form>
<div class='$modalclass'>
   <form name='thanksmodal' method='POST' action='myhandler.php'>
      //content of some sort
      <input type='submit' name='thankssubmit'>
   </form>
</div>
EOF;

The AJAX method is similar except that a javascript intercepts the submit button actions, submits to a form-handling script asynchronously and presents the results. There are lots of javascript libraries around to make this easier. jQuery and jQuery-UI are my two favourites.