WebDesignPub

Webdesign articles, tips and tutorials

Here is a simple popup contact form (modal popup)

A popup contact form has many benefits. You can add a button/link in every page that pops up the contact form in a modal popup. That makes the contact form easily accessible from any part of the website.

Your web site visitors do not have to ‘hunt’ for the ‘contact us’ page.

**Note:**Using Simfatic Forms you can build awesome contact forms in minutes. No coding required. Drag and drop build the form and and get it online fast. Supports CAPTCHA. Download the Full Featured Version of Simfatic Forms here

Download the popup contact form code

You can download the contact form that best fits your needs and then customize as required.

Simple popup contact form Simple popup contact form with three fields: Name, Email and Message Try the DemoDownload

Popup form with Captcha Popup contact form with Captcha image verification Try the DemoDownload

Features of the popup contact form

  • Easy to customize
  • Standards compliant (100% XHTML 1.0 strict validated, uses CSS)
  • Secured against spam bots and attacks
  • Ajax submission.
  • Hosted on your own web server
  • Free!

Installing the contact form on your web site

  1. Unzip the downloaded contact form code.
  2. Edit contactform.php and edit the email address to your email address

$formproc->AddRecipient('name@your-website.com');//<<---Put your email address here


  1. Upload the folder contents to your website (to a sub-folder say, /contact)
  2. See the page a-page.php for an example of integrating a button/link to the popup contact form.
  3. Include the file popup-contactform.php at the beginning of your php file
  4. link to the style file popup-contact.css in the <head> section of your page
  5. PHP include contactform-code.php at the end of your php file (it should come in between <body> and </body>)
  6. To Open the Popup form on clicking a link, use the code below:

<a href='javascript:fg_popup_form("fg_formContainer","fg_backgroundpopup");'>Contact us</a>


Customizing the form

To change the style of the form, edit popup-contact.css.

You can add any type of additional fields to the form. The fields will automatically appear in the form submission emails.

For client side validations, this script uses the JavaScript validation library. You can add additional client side validations using the same library. (See the documentation here: JavaScript form validation library).

Additional server side validations can be added in the file ‘include/fgcontactform.php’ Validate() function.

License

The code is shared under LGPL license. You can freely use it on commercial or non-commercial websites.