如何处理HTML表单提交

时间:2013-03-17 16:10:26

标签: html forms email redirect submit

提前感谢您的帮助。我知道这可能是一个简单的问题,因为我对HTML相对较新。

我的网站上有一个表单供人们成为会员。我希望用户输入他们的信息并点击提交。当他们这样做时,我希望发送一封电子邮件给我。但是,我希望将用户重定向到他们将为其成员资格付费的网站上的其他页面。我怎样才能同时做这两件事(发送电子邮件,重定向)?

这是我的表格:

<form>
    First name:     <input type="text" name="firstname">
    Last name:      <input type="text" name="lastname"><br>
    Street:         <input type="text" name="street" size="60"><br>
    City:           <input type="text" name="city">
    State:          <input type="text" name="state"> 
    ZIP:            <input type="text" name="zip"><br>
    Email:          <input type="text" name="email" size="60"><br>
    Phone:          <input type="text" name="phone" size="60"><br>
    City/Township:  <input type="text" name="votingcity">
    Precinct No.:   <input type="text" name="precinct"><br>
    <br>
    <hr>
    <br>
    <p>Government regulations require the following information:<br></p><br>
    Occupation:         <input type="text" name="occupation" size="60"><br>
    Employer's Name:    <input type="text" name="employer" size="60"><br>
    Employer's Street:  <input type="text" name="emp_street" size="60"><br>
    Employer's City:    <input type="text" name="emp_city">
    Employer's State:   <input type="text" name="emp_state">
    Employer's ZIP:     <input type="text" name="emp_zip"><br>
    <br>
    <hr>
    <br>
    Submit <input type="submit">
</form>

7 个答案:

答案 0 :(得分:1)

在你的开场陈述中尝试这个,它可以在html中完成它不是很漂亮,但它可能适合你

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">

答案 1 :(得分:0)

我建议你看一下PHP教程(参见:php.net)。以下代码将重定向到“action.php”页面,您可以在其中执行php代码(发送电子邮件,重定向到另一个等)。

<强>的index.html

<form action="action.php" method="post">
 <p>Your name: <input type="text" name="name" /></p>
 <p>Your age: <input type="text" name="age" /></p>
 <p><input type="submit" /></p>
</form>

<强> action.php的

<?php
$message = "your message";

// Send mail
mail('abc@something.com', 'Your Subject', $message);

header('Location: payment.php');  
?>

<强>更新 在PHP页面中,您还可以管理表单数据。例如,您可以使用此$_POST['firstname']访问用户名。或者在您的付款页面中显示用户信息,如下所示:

Hi M. <?php echo htmlspecialchars($_POST['lastname']); ?>.

我不知道您想对表单数据做什么,但您可以通过电子邮件发送它们或将它们存储在数据库中。

您还可以使用除PHP以外的其他语言,例如Java,VB.net等。但在我看来,PHP可能更容易学习。

答案 2 :(得分:0)

您应该使用服务器端页面来执行表单操作以发送电子邮件和显示成员资格页面。当用户提交表单时,他们将被定向到此页面。

<form method="post" action="link to subscription page. Eg: payment.php"> </form>

在payment.php中,显示付款表格并编写发送电子邮件的功能。

<?php
//Write send email function here
?>
<html>
<!-- Display payment form here -->
</html>

答案 3 :(得分:0)

仅使用HTML无法完成此操作,您需要了解服务器端脚本语言,例如PHP或ASP。

答案 4 :(得分:0)

您如何处理付款?如果我自己这样做,我可能会将表单数据发送到付款处理器(例如PayPal)并包含在发票中。我想大多数支付处理商都可以选择在收到付款时通过电子邮件通知您。

但是您没有问过会怎么做,您询问如何提交表单以便发送电子邮件并将浏览器重定向到其他页面。

如果你不能使用我的解决方案,我真的认为你最好把PHP放到混合中。

signup.html

<form action="process.php" method="post">
First name: <input type="text" name="firstname">
Last name: <input type="text" name="lastname"><br>
Street: <input type="text" name="street" size="60"><br>
City: <input type="text" name="city">
State: <input type="text" name="state"> 
ZIP: <input type="text" name="zip"><br>
Email: <input type="text" name="email" size="60"><br>
Phone: <input type="text" name="phone" size="60"><br>
City/Township: <input type="text" name="votingcity">
Precinct No.: <input type="text" name="precinct"><br>
<br><hr><br>
<p>Government regulations require the following information:<br></p><br>
Occupation: <input type="text" name="occupation" size="60"><br>
Employer's Name: <input type="text" name="employer" size="60"><br>
Employer's Street: <input type="text" name="emp_street" size="60"><br>
Employer's City: <input type="text" name="emp_city">
Employer's State: <input type="text" name="emp_state">
Employer's ZIP: <input type="text" name="emp_zip"><br>
<br><hr><br>
Submit <input type="submit">
</form>

process.php

<?php
  $message = '';
  foreach($_POST as $key => $value) {
    $message .= "$key => $value\n";
  }
  mail('youraddress@whatever.com','New User Registration',$message);
  header('Location: payment.html');
?>

确保<?php是process.php的最开始;没有前面的文字或任何类型的空格。

您收到的电子邮件将如下所示:

firstname => Homer
lastname => Simpson
street => 724 Evergreen Terrace
city => Springfield
state => Unknown
zip => ?????
email => hsimpson@compuserve.net
phone => (939) 555-0113
votingcity => Springfield
precinct => N/A
occupation => Nuclear Safety Inspector
employer => C. Montgomery Burns
emp_street => 100 Industrial Way
emp_city => Springfield
emp_state => Unknown
emp_zip => ?????

答案 5 :(得分:0)

所有操作都将在服务器端进行。所以你必须使用任何服务器端语言。在你的情况下PHP将是合适的。您可以在验证所有字段后从html表单发送数据。您可以使用ajax或传统方式发送它,如果您收到响应,那么您可以转到下一页。

使用jQuery forminteract,您可以在HTML输入中添加验证标记,就像我在firstName中使用的那样。

    <form action="process.php" method="post">
    First name: <input type="text" name="firstname" data-validation-notNull data-validation-notNull-message="Please enter first Name">
<span data-error="firstName"></span>
    Last name: <input type="text" name="lastname"><br>
    Street: <input type="text" name="street" size="60"><br>
    City: <input type="text" name="city">
    State: <input type="text" name="state"> 
    ZIP: <input type="text" name="zip"><br>
    Email: <input type="text" name="email" size="60"><br>
    Phone: <input type="text" name="phone" size="60"><br>
    City/Township: <input type="text" name="votingcity">
    Precinct No.: <input type="text" name="precinct"><br>
    <br><hr><br>
    <p>Government regulations require the following information:<br></p><br>
    Occupation: <input type="text" name="occupation" size="60"><br>
    Employer's Name: <input type="text" name="employer" size="60"><br>
    Employer's Street: <input type="text" name="emp_street" size="60"><br>
    Employer's City: <input type="text" name="emp_city">
    Employer's State: <input type="text" name="emp_state">
    Employer's ZIP: <input type="text" name="emp_zip"><br>
    <br><hr><br>
<button type="button" id="btn-submit">Submit</button>
    </form>

页面底部的javascript将是。

var form=$("form").find("[name]").formInteract();
$("#btn-submit").click(function(){
    if(!form.validate()){
      //return if form is not valid
      return;
     }

form.postAjax("url", function(rsp){
 //do your stuff with response.

 });

});

这是forminteract项目的方法 https://bitbucket.org/ranjeet1985/forminteract

答案 6 :(得分:0)

您可以使用表单端点服务(例如Formspree.io或formcarry.com),它们在提交后提供电子邮件通知和用户重定向,如果您以后想使用它们的数据,则可以使用Formcarry的Zapier集成(用于Mysql或MongoDB)进行保存数据存储到数据库中,或者可以将Webhook设置为PHP文件,然后保存处理后的数据。