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.

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.

Posted in Contact Forms Tagged with: , ,
89 comments on “Here is a simple popup contact form (modal popup)
  1. Kay says:

    Hello, I really like this form and want to use it. Is it possible to use this on html pages? Ideally I want the form to pop up from every ‘contact us’ link from any page.

    • Adam says:

      Hi and thank your for this tutorial/demo.
       
      I am wondering how to make the contact form NOT moveable and just fixed at the center of the screen.  I am not fluent in JS.  I appreciate any help!  Thanks in advance
       

  2. Megan says:

    I’m trying to use the pop-up contact form. It is working, but I have tried adding a few additional fields to the “contactform-code.php file and it is not displaying on my contact for when I upload the new file.
    Do I need to make any changes to the fgcontactform.php file once I have added fields to the other file?
    Thanks!
    Megan

    • Prasanth says:

      updating the contactform.php is good enough. I would suggest downloading other contact forms to see the difference.

    • Madjid says:

      Hi Megan,

      I am trying to use this Popup contact form with Captcha image verification.  I have the contact form working but my Captcha image is not working.  All I see is a red €œX€ and the words €œCaptcha image€.  I see that you were able to duplicate this. Any suggestion would be greatly appreciated. 

      Thanks,

      Madjid

      • Prasanth says:

        See whether you have GD library installed on your webserver. GD library for PHP is used for the image generation. You can request your hosting service to enable it.

  3. Erika says:

    Is there a way to remove the requirement and validation from certain fields?

  4. Gene says:

    I have two problems with the code which I am trying to reason out:
    The first is the form validation fails when it is submitted, I get “Automated submission prevention: case 1 failed”, and dumping the variables I see that the GetFormIDInputName(s) are indeed different, that post variable from the form does not match the function value.  Not sure what is causing this, but I got around this by disablng that test for now..
    The second problem is nothing happens after a successful submission, it doesn’t call itself so I can take an action with the info.  Gives the Thank You and close me popup, but doesn’t return the program,
    Also where are the email attributes set, there seems little information where to setup an email.
     

  5. Madjid says:

    I am trying to use this Popup contact form with Captcha image verification.  I have the contact form working but my Captcha image is not working.  All I see is a red “X” and the words “Captcha image”.  Any suggestion would be greatly appreciated. 

  6. sachin says:

    Hey thanks for this form………

  7. Rizme says:

    Hi,
     
    This is a really cool pop up contact us from and thanks for sharing it. For some reason When I click the contact us button nothing happens. I am just a beginner when it comes to web design. Please help.
     
    Thank you in advance
     
    Riz

  8. Primo says:

    Hi,
     
    I have used the form on my website it works (and looks) great, apart from of late it is returning any test messages i try to send with “Automated submission prevention: case 1 failed” i can find the reference on the include/fgcontactform.php file but i’m not sure what i do now to stop the message. i note above that Gene had the same prob on April 4th, i’m new to all coding esp php and i don’t want to play around not knowing what i’m doing.
    thanks for any help with this :o)
    Pri

  9. Chris says:

    Hi I was wondering how this would be done with rollover buttons, I have not had a lot of experice with PHP thanks.
    any assistance would be greatly appreshaated.

    Thanks.

  10. NARINE says:

    HI,
    I have upload it to my website but after filling the form it is not working?!!
    could you check what did i do wrong?!
    http://narinedesign.com/popup-captcha-form-1/a-page.php

  11. connie says:

    Hi, I love this form, thank you for posting it. How can I add two more arguments to the function call fg_popup_form?  I need to send it two pieces of variable data to incorporate into the body of the message. I located the function code in fg_moveable_popup.js so I could add the new arguments, but from there I get lost as to how to pass it along to the right place to incorporate it into the message body. Thank you for your help.

  12. Sebastian says:

    Hi,
     
    Do you know if it’s possible to use the contact form within a Joomla article?

  13. AB says:

    Hi, Thank you for making the script available for free. I am going to try it out on a business listings site that I am working on. Just need to know how I can send a different email address each time instead of a static one ( which is used in the example). This is relevant for my site which would have listings with different email addresses and an enquiry/email button for each.
    Much appreciated….

  14. Ad says:

    Hey thanks for this, I am new to php so some of this is over my head but I got it working on my site. My only problem was getting it to work when altering the file structure by having the page calling the form outside of the contact folder…. e.g changing require_once(‘../contact/popup-contactform.php’).  Obviously this isn’t crucial, and is more for convenience on larger site projects as you could call the form from any location inside the file structure.
    The scripts are great though and were exactly what I was looking for so many Thanks:)!!!
     
    Cheers!
     
     

  15. David says:

    This is awesome…thanks for sharing….

  16. Anonymous says:

    if anyone had problems with the THANKS pop up not displaying it’s because the code used eregi and split which are now deprecated.
    replace line 548 on fgcontactform.php to
    return preg_match(‘/^[_.0-9a-zA-Z-]+@([0-9a-zA-Z][0-9a-zA-Z-]+.)+[a-zA-Z]{2,6}$/’, $email);
    replace line 470 on class.phpmailer.php to
    $toArr = explode(‘,’, $to);
     
     

  17. Brett says:

    Hi there:
     
    It is a great from.  I would like to also insert the contact information into a mysql database.  Which page on the scripts would I add the code to do this?
     
    Thanks,
    Brett

  18. kimlog says:

    Hi,
    use this contact form that works well.
    Problem is when I write in Cyrillic.
    The mail I get monkeys
    Please help …..
    Best Regards

  19. Nanar says:

    This is a great form and I really want to use it in my website. but When I add it to my website it looks normal but after submitting the form noting happens.
    http://narinedesign.com/test.php
    I even upload the exact example but still it is not working fine
    http://narinedesign.com/simple/a-page.php
    Any Help would be greatly appreciated!!
    Thanks in advance

     

  20. Stuart Dutton says:

    Hi Could you advise how I get the form to reset to blank fields with this being a modal popup..  I need the form to reset after the close button has been used.. Any ideas..????

  21. Hi..
     
    I am wondering if there is a way or a function to pass name and email data from form to the thank you page..  ?  I am quite new to this and would appreciate any guidance you could provide.  Also the modal box seems to retain the thank you page once its finished unless you refresh the page..  The page I am working on may get multiple contact forms filled out during a session and was wondering if there was a way of resetting the form away from the thank you page ready for the next input..
     
    Thanks in advance.
     
    Best Regards
     
    Stuart :)

  22. kurniawan says:

    Thank you. just added to my website. easy to use.

  23. sydney says:

    How do i implement your form using smtp server  with authentication  to send mail
     
    Regards

  24. Kedar H says:

    Thank you very much. It is very nice and easy to implement. Great… :)

    • Jako says:

      Hi,
      Since you have had ‘better luck’ with this script, I wonder if you could kindly assist with my own rendering please? When I click on the link, nothing happens.

  25. Mark says:

    It is very good tool.
    Thanks for your help.

  26. Donna says:

    I am having the same error €œAutomated submission prevention: case 1 failed€. I don’t see a solution posted for the cause. What am I doing wrong?
    Thanks

  27. Zang says:

    hi,
    This is absolutely wonderful,  just want to say thank you very much, solved my problem, very stylish and secure too!! good job

  28. satish G says:

    Hello, I like this script very much, really its best of the best contact forms with full variety. I would like to integrate it on my site but no luck everything is fine captcha also works fine but i cant received email from my newly registered domain (website) contact form.

  29. raj says:

    My host says only through SMTP  with authentication  to send mail. Can someone please tell where i can get a simple download and paste scrip for SMTP mail servers ?

  30. Marie_Phil says:

    Thanks for this script. You save my problem.
     

  31. Jason says:

    Hi, I can’t include php file on my html files, is there any other way to use this form on html files.
    (I can’t change html to php or use htaccess , my file should stay html)
    Thanks for any help.

  32. great article, put it on my website, check it out.

  33. ModalFormer says:

    I like the design and programming of your modal form, however like some others here the form wouldn’t send. After submitting, nothing happens – not even an error code appears. I suspect could be due to my host which is GoDaddy.com. The most basic mail() command works there, but nothing else.
    Unfortunately I have run out of ideas on how to still use the original code. I am currently replacing the lines in SendFormSubmission() within fgcontactform. Seems the only viable option for now for me.
    Do you have any suggestions for me? Many thx in advance!

  34. ModalFormer says:

    Also, I noted a small error in the contactform-code.php: the line
    var formobj = document.forms['contactus']
    is missing a ; at the end. So the correct line should read:
    var formobj = document.forms['contactus'];
    in order to make the script work I believe…

  35. Amit Kondewar says:

    Thanks for valuable example

  36. r t says:

    Hi, how to insert the data into the database

  37. idris says:

    this is exactly what i was looking for…thank you for sharing!!!

  38. sebastian says:

    hi there,

    thanks for the tutorial, i have a little problem – the popup does not open but i have followed all steps exactly :)

    any clues?

  39. Vibhuti Ranjan says:

    very helpful this code.and easy way to use

    Thanks .

    • Jako says:

      As you have found the code easy to use, Vibhuti, perhaps you wouldn’t mind showing the changes YOU had to make to the scripts and where exactly you made those changes. You would be saving the life of a novice. Thanks, pal.

  40. ali says:

    please i want your help just i want popup code with out contact form can you please help me because this for my college project

  41. kay says:

    i am using Popup contact form with Captcha image verification but it keep returning this error: Automated submission prevention: case 1 failed; what could be the cause.

  42. Eric Aquili says:

    Hi,

    i downloaded the 2nd popup contact form with the Captcha verification and when i try loading it and click on contact us, the link to were it should execute is shown below javascript:fg_popup_form etc, but the popup form is not displayed. The strange thing is that i downloaded this form some months ago and it worked immediately…Any ideas on what might be the problem please?

    Thanks,Eric..

  43. gopal says:

    I tried to use it….. when the page opens up its showing the contact form div…. pls help

  44. Jenn says:

    I am having the same problem as Kay… ” i am using Popup contact form with Captcha image verification but it keep returning this error: Automated submission prevention: case 1 failed; what could be the cause.”

    Can anyone help?

  45. Before using my contact.php page, I uploaded all files including ‘a-page.php’ to do some testing of functionality — getting this error:

    Parse error: syntax error, unexpected ‘<' in /home/paulgs/chathamhousing.org/a-page.php on line 31

  46. resending, using .org instead of .com on my website (ooops)

    did not modify anything except placed .css in my ‘_css’ folder

    Parse error: syntax error, unexpected ‘<' in /home/paulgs/chathamhousing.org/a-page.php on line 31

  47. Elliot says:

    Hi,

    Great script. Tried to edit so form includes a subject line field. Can anyone help with the PHP?

    Thanks

  48. rufaro says:

    Hi I am using the pop up form with the captcha but the captcha image is not showing up. everything else works fine but the image isnt showing up when the form pop’s up. what could be the problem?

  49. Raph says:

    hello, how should i do if the a-page.php is not in the same folder??? bcz when i change “require_once(‘popup-contactform.php’)” into “require_once(‘myfoler/popup-contactform.php’)”, “” into “” and “require_once(‘contactform-code.php’)” into “require_once(‘myfolder/contactform-code.php’)”, it doesn’t work!!! what else do i need to change? thanks!

    it doesnt work!!! What else do i need to change?

  50. Tim says:

    I’m trying to get checkboxes to work with this form. I’ve tried giving them each their own name, but they all return true whether they’re checked or not. When I try submitting them as an array, no luck either. I’m obviously new at this…but from my research it looks like I need to insert an ‘isset’ for the boxes, but I can’t figure out where I would do that, if I need to do it. Any luck with checkboxes on this form?

  51. Ali says:

    Have these issues been solved yet?

  52. Joe says:

    Great script! Just wondering if anyone knows if there is a way to get multiple forms going to different emails on the same page?

    Ex. page one
    Form 1 xxxxxx@yahoo.com
    Form 2 xxxxxx@gmail.com

    Thanks is advance!

  53. Nick says:

    I set up my form, but now I can’t receive the emails that it sends from the form. My email recipient is correct in the file popup-contactform.php. I don’t know what to do??

  54. John says:

    Same problem as Rufaro..works but no Captcha image.
    Demo works fine and viewing dsource seems to show a very different set of code than that downloaded..

    have been testing the non-pop-up version which works fine . I see significant difference in the code that creates the captcha image. Could this be the issue?

  55. skid says:

    Great contact form.. but how about installation instructions in ENGLISH?

  56. mark says:

    Hi
    Great script.

    I need to send in a new page or pop-up javascript (thank you page), after submit success message (not only the message “Thanks for contacting us. We will get in touch with you soon!”)

    Can you help me ?, thanks

  57. Unitity says:

    i implemented and works great… but once from submitted… if u click again the captcha is not showing new captcha code .. how slove this issue..

  58. gigi says:

    Great! Thanks for sharing. I do not quite understand where to put the URL, and what it should link to:

    //2. For better security. Get a random string from this link: http://tinyurl.com/randstr
    // and put it here
    $formproc->SetFormRandomKey(‘dz0sbNoc7mZPgXa’);

    popup-contactform.php

  59. enrique says:

    my problem it’s about the final part, i never recieve the emails when i click submit, only appears the word “succes” in red.

    someone ?

  60. Kike says:

    i can’t submit succesfully, when i push the button of submit only apears in red letter the word “succes” and the email is not generated to my email account

    i need some help!

  61. Joe says:

    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!

  62. Saad says:

    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…….?????

  63. anoop says:

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

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

    • Art says:

      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

  65. Point Lucea says:

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

  66. Jako Ariyo says:

    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 says:

      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”)

  67. Jako says:

    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:WampwwwItemsgalore.bizcontact_sellerpopup-contactseller.php on line 10

  68. lp59lp says:

    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 says:

      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!!

  69. ES says:

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

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>