You are here: Home » All Posts » Contact Forms » Here is a simple popup contact form (modal popup)

Here is a simple popup contact form (modal popup)

in Contact Forms

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.

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
  3. $formproc->AddRecipient('name@your-website.com');//<<---Put your email address here
    
  4. Upload the folder contents to your website (to a sub-folder say, /contact)
  5. See the page a-page.php for an example of integrating a button/link to the popup contact form.
  6. Include the file popup-contactform.php at the beginning of your php file
  7. link to the style file popup-contact.css in the <head> section of your page
  8. PHP include contactform-code.php at the end of your php file (it should come in between <body> and </body>)
  9. To Open the Popup form on clicking a link, use the code below:
  10. <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.

Be Sociable, Share!
april February 17, 2012 at 3:34 am

modal?

Joe February 23, 2012 at 2:47 pm

Again just another home run! 99.9% of my clients could care less about a contact form being super flashy, or graphically intense. Most just want it to work and want it to work right. There is no second guessing with this form, and it saves me so much time when its 2:30am I am falling asleep at my desk and still need a form. This is my go to sleep saver!

Saad February 25, 2012 at 1:26 pm

if i want to check it on local host that mail function is working or not..cuse i want to check before uploading my site that mail fuction is alright or not…What to do…….?????

anoop March 1, 2012 at 10:48 am

great…i works fine in local host..but in server it shows javascript error..

Daniel Douglas March 7, 2012 at 9:01 pm

Followed the instructions completely but it does not work! :(

Art March 24, 2012 at 12:09 am

1. If you wanna to work this in its own folder, you must append absolute path to every link to .php, .js and .css files wherever you find it. after this its work fine.
2. readme.txt has some errors, right words in a-page.php

Point Lucea March 11, 2012 at 4:13 am

this contact form is awesome, if i could just get it in blue this would work well with my travel site

Jako Ariyo March 12, 2012 at 12:40 pm

I’ve followed all editing tips, yet the pop-up form still wouldn’t open. Can some of the guys who have successfully achieved this ‘feat’ kindly be a lifesaver and share their own methods please? Cheers!

craig March 22, 2012 at 3:09 pm

Guys if the pop up isnt working its because there is a missing variable in this line here which goes in the index.php: href=’javascript:fg_popup_form(“fg_formContainer”,”fg_backgroundpopup”,)
you will find this line in the original tutorial, all you need to do is add a variable, so just copy and paste this to replace the original and hey presto!:
href=’javascript:fg_popup_form(“fg_formContainer”,”fg_backgroundpopup”,”wrapper”)

Jako March 12, 2012 at 12:42 pm

Testing on localhost I keep getting this: ( ! ) Warning: require_once(itemsgalore.biz/contact_seller/popup-contactform.php) [function.require-once]: failed to open stream: No such file or directory in C:\Wamp\www\Itemsgalore.biz\contact_seller\popup-contactseller.php on line 10

lp59lp March 15, 2012 at 4:16 pm

Tried integrating both popup with and without captcha — neither one worked.
Firebug shows the first line in function fg_popup_form,
var bgdiv = document.getElementById(bg_div_id);
resolves to bgdiv = null

Script hangs after that.

Seems like a lot of effort on my part to make such a simple script work :(

craig March 22, 2012 at 3:12 pm

Replace this line: href=’javascript:fg_popup_form(“fg_formContainer”,”fg_backgroundpopup”,)

with this line in the index.php:
href=’javascript:fg_popup_form(“fg_formContainer”,”fg_backgroundpopup”,”wrapper”)

just add a third variable (like ‘wrapper’ above) and it works fine!

thanks to the devs for making this form for us!!

ES March 24, 2012 at 8:26 am

This is anything but simple. The only way I could get it to work was to put all my page file sin the ROOT.

Comments on this entry are closed.

Previous post:

Next post: