Thanks in advance for the help. I know this is probably a simple question, as I am relatively new to HTML.
I have a form on my site for people to become members.. I want users to input their information and click submit. When they do that, I want an email to be sent to me. However, I want the user to be redirected to a different page on the site where they will pay for their membership. How can I do both of those things (send email, redirect) at the same time?
Here is my form:
<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>
Try this at your opening statement it can be done in html it's not pretty but it might work for you
<form action="MAILTO:someone#example.com" method="post" enctype="text/plain">
You should use a server side page for form action to send email and display membership page. When users submit form, they will be directed to this page.
<form method="post" action="link to subscription page. Eg: payment.php">
</form>
In payment.php, display payment form and write an function to send email.
<?php
//Write send email function here
?>
<html>
<!-- Display payment form here -->
</html>
This cannot be done using just HTML, you will need to know a server side scripting language such as PHP or ASP.
How are you processing payments? If I were doing this for myself I would probably have the form data sent to the payment processor (e.g. PayPal) and included in the invoice. I would imagine most payment processors have an option to notify you via email when a payment is received.
But you didn't ask how I would do it, you asked how you can submit a form such that an email is sent and the browser is redirected to another page.
If you can't use my solution I really think you're best off with throwing PHP into the mix.
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');
?>
Make sure that <?php is the very beginning of process.php; no preceding text or whitespace of any kind.
The email you'll receive will look something like this:
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 => ?????
I recommend you to have a look of PHP tutorials (cf: php.net). The following code will redirect you to an "action.php" page where you will can execute php code (send email, redirect to another, etc.)
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');
?>
UPDATE:
In your PHP page you can also manage your form data. For example you can access the user first name with this $_POST['firstname']. Or display user informations in you payement page like this:
Hi M. <?php echo htmlspecialchars($_POST['lastname']); ?>.
I don't know what you want to do with the form data, but you can send them in the email or store them in a database.
You can also use other language than PHP such as Java, VB.net, etc. But in my opinion, PHP will probably be easier to learn.
All actions will be taken at server side. so you have to use any server side language. in your case php would be suitable. you can send data from html form after validating all fields. You can send it with ajax or traditional way and if you receive response as ok then you can move to next page.
With jQuery forminteract you can add validation tags in your HTML inputs as i have used below in firstNamelike this.
<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 at bottom of page would be.
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.
});
});
Here is the linke to forminteract project
https://bitbucket.org/ranjeet1985/forminteract
You can use form-endpoint services like formspree.io or formcarry.com they provide email notifications and user redirection after the submit, if you want to use their data later, you can use Formcarry's Zapier integration for Mysql or MongoDB to save the data to the database, or you can set up a webhook to your PHP file, and save processed data.
Related
Here is the problem I have:
When validating my form I would like to :
1- Send the form information to a Webhook (to process the information) I would like it to be invisible for the user
2- Redirect the user to a confirmation page (or display a confirmation message on the form)
Here is my current form that only sends the info to the webhook:
<form method="post" action="https://hooks.zapier.com/hooks/catch/12195186/bzjhk97/">
<input id="prenom" type="text" name="first_name" placeholder="Votre prénom" required="required" />
<input id="email" type="email" name="email" placeholder="Votre adresse e-mail" required="required" />
<button id="submit" type="submit" class="btn">RECEVOIR LE KIT COMPLET</button>
I don't know if it's adjustable with Javascript or just HTML...
Thanks for your help :)
You can change your button type to "button" and then add a handler to that button to POST the data. In the example below I modified your code to do that and use fetch to POST the data to the endpoint.
Inside the ".then" part is the callback (this does not get execited until you receive the response from the fetch). This is where you would display the dialog to the user or redirect them to another page.
<form method="post" action="https://hooks.zapier.com/hooks/catch/12195186/bzjhk97/">
<input id="prenom" type="text" name="first_name" id="first_name" placeholder="Votre prénom" required="required" />
<input id="email" type="email" name="email" id="email" placeholder="Votre adresse e-mail" required="required" />
<button id="submit" type="button" class="btn" id="btn">RECEVOIR LE KIT COMPLET</button>
</form>
<script>
const getButton = document.getElementById('btn');
const getFirstName = document.getElementById('first_name');
const getEmail = document.getElementById('email');
fetch('https://hooks.zapier.com/hooks/catch/12195186/bzjhk97/', {
method: 'POST',
body: new URLSearchParams({
first_name: getFirstName.value,
email: email.value
})
})
.then(response => {
// Do stuff with the response
});
HTML -
<form action="/addUser" method="post">
<div class="Fields hideme">
<label class="form__fields">Full Name :<span class="star"> * </span></label>
<input class="input" type="text" name="full_name" placeholder="Enter your name" required><br/>
</div>
<div class="Fields hideme">
<label class="form__fields">Address line 1:<span class="star"> * </span></label>
<input class="input" type="text" name="address_line_1" placeholder="Address line 1" required><br/>
</div>
<div class="Fields hideme">
<label class="form__fields">DOB :<span class="star"> * </span></label>
<input class="input" type="date" name="DOB" placeholder="DOB" required><br/>
</div>
</div>
<div class="Fields hideme">
<label class="form__fields">Email :<span class="star"> * </span></label>
<input class="input" type="email" name="email" placeholder="Enter your E-mail" required><br/>
</div>
<div class="Fields hideme">
<input class="Submit_button" type="submit" value="Submit">
</div>
</form>
I am saving this user using node.js
JS -
var nameSchema = new mongoose.Schema({
full_Name: String,
.
.
email: String
});
var User = mongoose.model("User", nameSchema);
const publicPath = path.join(__dirname,'/');
app.use(express.static(publicPath));
app.post("/addUser", (req, res) => {
var myData = new User(req.body);
myData.save()
.then(item => {
res.send("User saved to database");
})
.catch(err => {
res.status(400).send("Unable to save to database");
});
});
I have a html form in which I am asking a user to enter info like Name, DOB, address, Email and I have to suggest User Names based on these inputs to the user.
Please tell me how to send back a suggested userName based on the inputs by the user(full name, DOB, address).
I wanted to write in the comments but I don't have enough reputations.
So I will write it as an answer.
I personally recommend you to use heroku or digitalocean because they are very good for nodejs.
mlab is the best for your DB if you are using MongoDB.
And you can google it or search on youtube there are tons of information.
I hope you will find the answer.
I am using IIS, so I need to avoid using port numbers. I have this index.html...
<body>
<div id="output"></div>
<p> </p>
<form action="verify.html" method="post">
<div>First name: <input type="text" name="first_name" required=""></div>
<div>Last name: <input type="text" name="last_name" required=""></div>
<div><input type="submit" value="Add Name"></div>
</form>
</body>
All I want to do right now is display the user's input on verify.html. I wired a "verify.dart" to verify.html. I know that input can be retrieved in PHP 7 using
$firstName = filter_input(INPUT_POST, 'first_name');
Is there an analog to that code in the Dart SDK?
I'm making a form which collect some data from a person and then use a simple mailto: to put it in their e-mail client like so (example):
<form method="post" action="mailto:email#address.com?subject=Stuff">
<p>Name: <input type="text" name="Name" placeholder="Number"></p>
<p>Address: <input type="text" name="Address" placeholder="Number"></p>
<p>City: <input type="text" name="City" placeholder="Number"></p>
<p>Comment: <input type="text" name="Comment" placeholder="Number"></p>
<p><input type="submit" value="SEND"></p>
</form>
It then comes out like this:
Name=Bob&Address=something&City=more&Comment=elsemore
but what I want is:
Name=Bob
Address=something
City=more
Comment=elsemore
or even better:
Name = Bob
Address = something
City = more
Comment = elsemore
Is it at all possible currently to do this just within HTML? HTML5 and Python is all I know (mostly only the basic parts too). Maybe someone could help me out with the proper code/script on this.
I did find some other posts on this but they are old and don't answer the question.
You need to set the Encryption Type (enctype="text/plain"):
<form method="post" action="mailto:email#address.com?subject=Stuff" enctype="text/plain">
<p>Name: <input type="text" name="Name" placeholder="Number"></p>
<p>Address: <input type="text" name="Address" placeholder="Number"></p>
<p>City: <input type="text" name="City" placeholder="Number"></p>
<p>Comment: <input type="text" name="Comment" placeholder="Number"></p>
<p><input type="submit" value="SEND"></p>
</form>
You could also write some stuff in Javascript and then work with the body parameter. But i wouldn't recommend this.
In most times, it is better to let the webserver handle the email communication.
Asp: http://www.codeproject.com/Tips/371417/Send-Mail-Contact-Form-using-ASP-NET-and-Csharp
Php: http://tangledindesign.com/how-to-create-a-contact-form-using-html5-css3-and-php/
I have a page on my site with two forms, one for log in and one for registering.
LOG IN-
<form name="login" id="login" method="post" action="php/login.php">
Email: <input id="email" name="email" type="text">
Password:<input id="password" name="password" type="password">
</form>
REGISTER-
<form id="register" name="register" method="post" action="php/register.php">
Email: <input id="r_email" name="r_email" type="text">
Confirm Email: <input id="r_email_confirm" name="r_email_confirm" type="text">
Password: <input id="r_password" name="r_password" type="password">
Confirm Password:<input id="r_password_confirm" name="r_password_confirm" type="password">
</form>
When I've tested it, Chrome is saving the log in form's email and password (id email and password) and the register form's confirm email and password (id r_email_confirm and r_password).
Any ideas why it is saving these values?
Seems it's been an issue in Chrome:
http://productforums.google.com/forum/#!topic/chrome/f6zhGC8lVw4
It's been recommended to use
<form autocomplete="off"...
for the time being, which is a bit annoying.