html Pop up form on website homepage
<p>I have created a form with an image that I want to popup on my site's home page. The form pops up but there are few issues that I have. </p>

<ol>
<li>The form has weird edges. </li>
<li>I want the submit button to be moved under the feilds</li>
<li>I want them to press submit and the email to come to me</li>
<li>I want to have an X at the top right if they just want to close the form.</li>
</ol>

<p>here is what I have so far
<a href="https://jsfiddle.net/evel/81L5owk8/" rel="nofollow">jsfiddle</a></p>

<p>html</p>

<pre><code>&lt;form method="post" action="mailto:youremail@youremail.com"&gt;
    &lt;h1&gt;
    Get a Quote
    &lt;/h1&gt;
      &lt;input id="name" type="text" name="name" placeholder="Name"&gt;&lt;br&gt;
      &lt;input id="email" type="text" name="email" placeholder="Email"&gt;&lt;br&gt;
      &lt;input id="payment" type="text" name="payment" placeholder="Avg. Monthly Payment" /&gt;&lt;br&gt;
  &lt;!-- Now this is the button which closes the popup--&gt;
&lt;div class="panel-footer"&gt;
&lt;button id="close" &gt;submit&lt;/button&gt;
</code></pre>

<p>CSS</p>

<pre><code>form{
  background-image: url("paper.gif");
  background-repeat: no-repeat;
  margin: auto;
  position: realtive;
  width: 550px;
  height: 450px;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
  color: #09C;
  text-decoration: none;
  border-radius: 10px;
  padding: 10px;
  border: 1px solid #999;
  border: inset 1px solid #333;
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

input#name{
  margin-top: 200px;
}

input#name,#email, #payment {
  float: right;
  margin-bottom: 10px;
  margin-right: 15px;
  clear: both;
  width: 200px;
  display: block;
  border: 1px solid #999;
  height: 20px;
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  padding: 2px;
}

.panel-footer{
  float:right;
}
</code></pre>

<p>JS</p>

<pre><code>$(document).ready(function () {
    //select the POPUP FRAME and show it
    $("#popup").hide().fadeIn(1000);

    $("#close").on("click", function (e) {
        e.preventDefault();
        $("#popup").fadeOut(1000);
    });
});
</code></pre>