How to add a modal form in Drupal 7

Here's how to do it if using the colorbox module fails...

1- Create your form using Webforms (or use the method you prefer)
2- Optional: Go to views and create a View Block that contains the webform you created, here's the config in case you need this info:

After you save the view block, go to Structure > Blocks and assign the block to any page you want.

3- Now, add a css code to hide the form (this one is for the example above):

 
.view-web-form-block {
    display: none;
}

4- Download colorbox plugin from here: http://www.jacklmoore.com/colorbox/
5- Extract all files
6- Inside your theme folder:
     - Drop the file jquery.colorbox.js inside the js folder
     - Drop the colorbox.css inside the css folder
     - Open the custom.info file with any text editor
7- Add these 2 lines in their corresponding areas:

stylesheets[all][] = css/colorbox.css

scripts[] = js/jquery.colorbox.js

8- In a separate js file, add this jquery function:

$(window).ready(function () {
   $(".colorbox-inline").colorbox({
      inline:true, 
      href:"#block-views-web-form-block-block"
   });
});

Where:
A) colorbox-inline: is the class for the link you're using
In my case the link was:
<pre class="html" name="code"><a class="colorbox-inline" href="http://localhost/samplesite/products#block-views-web-form-block-block">Contact</a>

B) #block-views-web-form-block-block is the block ID of the form element

9- Save all changes
10- Clear drupal's cache
11- That's it :)