html在网站主页上弹出表格

时间:2016-05-12 04:43:30

标签: css forms

我创建了一个带有图像的表单,我想在我网站的主页上弹出。表格弹出,但我遇到的问题很少。

  1. 表格有奇怪的边缘。
  2. 我希望将提交按钮移动到feilds下
  3. 我希望他们按提交和电子邮件来找我
  4. 如果他们只想关闭表单,我想在右上方放一个X.
  5. 这是我到目前为止所拥有的 jsfiddle

    HTML

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

    CSS

    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;
    }
    

    JS

    $(document).ready(function () {
        //select the POPUP FRAME and show it
        $("#popup").hide().fadeIn(1000);
    
        $("#close").on("click", function (e) {
            e.preventDefault();
            $("#popup").fadeOut(1000);
        });
    });
    

1 个答案:

答案 0 :(得分:0)

您可以将以下代码放在主页上

<div class="popupwrapper">    
    <div class="backgoround_pop">
    </div>
    <div class="newmessage">
           <div class="closebutton"> close</div>
    <form method="post" action="">
        <h1>
        Get a Quote
        </h1>
          <input id="name" type="text" name="name" placeholder="Name"><br>
          <input id="email" type="text" name="email" placeholder="Email"><br>
          <input id="payment" type="text" name="payment" placeholder="Avg. Monthly Payment" /><br>
      <!-- Now this is the button which closes the popup-->
            <div class="panel-footer">
            <input type="submit" name="submit_form" value="submit">
            </div>
        </form>
    </div>
</div>
<?php if(isset($_POST['submit_form'])){//sample email code you need to change if required
                            $name=$_POST['name'];                               
                            $email=$_POST['email'];

                            $payment=$_POST['payment'];
                            $to = 'youremail@youremail.com';
                                $subject = 'subject';
                                $headers = "From: " . strip_tags($_POST['emailadd']) . "\r\n";
                                $headers .= "Reply-To: ". strip_tags($_POST['emailadd']) . "\r\n";
                                $headers .= "CC: \r\n";
                                $headers .= "MIME-Version: 1.0\r\n";
                                $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";      
                                $message = '<html><body>';
                                $message .= '<h1>Contact Information</h1>';
                                $message .= '<table><tr><td>Name:</td><td>'.$name.'</td><tr>';

                                $message .= '<tr><td>Email:</td><td>'.$email.'</td><tr>';

                                $message .= '<tr><td>payment:</td><td>'.$payment.'</td><tr></table>';
                                $message .= '</body></html>';
                                if(mail($to, $subject, $message, $headers)){
                                    echo "<script>alert('Email Sent Successfully.');</script>";
                                }

                        }?> 
  

脚本

<script type="text/javascript">
    jQuery(document).ready(function(){
        $('.backgoround_pop').click(function(){
            $('.backgoround_pop').hide();
            $('.newmessage').hide();
        });
        $('.closebutton').click(function(){
            $('.backgoround_pop').hide();
            $('.newmessage').hide();
        });
    });
</script>
  

CSS

.closebutton {
    background: url(../images/close.png) no-repeat left;
    padding: 0 10px;
    text-transform: capitalize;
    background-position:2%
}
.backgoround_pop {
    background: #000;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    top: 0;
    left:0;
    opacity: 0.6;
}