how to Load contact form on top of a google map?

Question

I want to create contact page in mysite(joomla). so i got map embedded code and add it to page as a module. now i want to add contact form on top of that map. map like as background and contact form on that background.

map load as iframe. i can not handle this problem. can anyone help me to solve this problem?

this is the my module php page structure.

    <div class="row" style="padding:10px;">

        <div class="row map">
            <iframe scrolling="no" ....
                    width="100%" height="450" frameborder="0" style="border:0">   
            </iframe>
            <div class="col-md-6 contact-form">

                   //contact form should goes to here
                   //it is another module

            </div>
        </div>
    </div>

Answer 1

Did you tried positioning the form like this: http://jsfiddle.net/lotusgodkk/GCu2D/255/

HTML:

    <div class="row" style="padding:10px;">

    <div class="row map">
        <iframe scrolling="no" ....
                width="100%" height="450" frameborder="0" style="border:0">   
        </iframe>
        <div class="col-md-6 contact-form">

               //contact form should goes to here
               //it is another module

        </div>
    </div>
</div>

CSS:

.row {
    position:relative;
    width:500px;
    height:400px;
    border:1px solid red;
    overflow:hidden;
}
.map {
    width:300px;
    height:250px;
}
.contact-form {
    position:absolute;
    top:50%;
    left:30%;
    z-index:1000;
    background:#BFBFBF;
    padding:20px;
}