This question already has answers here:
UTF-8 all the way through
(13 answers)
Closed 9 years ago.
So I'm coding a contact form for a website, but I want to be able to allow the user to enter non-latin based characters (i.e. é or 車) but I can't exactly figure out where I would set that up - once the user submits the form, it passes it through an AJAX section in jQuery which then processes that to PHP (which prevents the page from refreshing) but trying to use utf8_encode() didn't work and setting the contentType for the data in .ajax() didn't help either, so now I'm not sure what to do.
Anyone able to help me out?
HTML form
<form action="" id="contactUs" method="post">
<div class="input-group">
<span class="input-group-addon">name</span>
<input type="text" class="form-control" placeholder="Your Name/Company" tabindex="1" name= "name" id="name" />
</div>
<div class="input-group">
<span class="input-group-addon" style="padding-right: 18px;">mail</span>
<input type="email" class="form-control" placeholder="Your/Your Company Email" tabindex="2" name="email" id="email" />
</div>
<div class="input-group">
<span class="input-group-addon" style="padding-right: 18px;">subject</span>
<input type="text" class="form-control" placeholder="The subject of your message" tabindex="2" name="subject" id="subject" />
</div>
<div class="input-group">
<span class="input-group-addon" style="padding-right: 18px;">message</span>
<textarea class="form-control" placeholder="What's on your mind?" cols="100" rows="4" tabindex="3" name="msg" id="msg"></textarea>
</div>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" style="-webkit-border-radius: 8px; border-radius: 8px; position: relative; left: 41%;" id="submit">Submit</button>
</span>
</div>
</form>
jQuery
var dataString = 'name=' + name + '&email=' + email + "&subject=" + subject + '&msg=' + msg;
$.ajax ({
type: "POST",
url: "process.php",
data: {
name : name,
email : email,
subject :subject,
msg : msg
},
contentType: "application/x-www-form-urlencoded;charset=ISO-8859-15",
dataType: 'json',
complete: function() {
$("#error").hide();
$("#errormail").hide();
$("textarea#msg").css("background-color", "#ffffff");
$("input#email").css("background-color", "#ffffff");
$("input#name").css("background-color", "#ffffff");
$("#success").show();
setTimeout(
function(){ $('#success').fadeOut() }, 5000
);
$( '#contactUs' ).each(function(){
this.reset();
});
}
});
PHP
<?php
if(isset($_POST['email'])) {
$email_to = "info#infinitedream.net ";
$email_from = $_POST['email']; // required
$email_subject = $_POST['subject'];
$name = $_POST['name']; // required
$message = $_POST['msg']; // required
$email_message = '<html><body>';
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= '<table rules="all" style="border: 1px solid #666;" cellpadding="10">';
$email_message .= "<tr style='background: #eee;'><td><strong>Name:</strong> </td><td>" . strip_tags($name) . "</td></tr>";
$email_message .= "<tr><td><strong>Email:</strong> </td><td>" . strip_tags($email_from) . "</td></tr>";
$email_message .= "<tr><td><strong>Message:</strong> </td><td>" . utf8_encode($message) . "</td></tr>";
$email_message .= "</table>";
$email_message .= "</body></html>";
// create email headers
$headers = 'From: '.$email_from."\r\n";
$headers = 'Reply-To: '.$email_from."\r\n";
$headers = 'X-Mailer: PHP/' . phpversion();
$headers .= "MIME-Version: 1.0" . "\r\n";
$headers = "Content-type:text/html;charset=iso-8859-1" . "\r\n";
mail($email_to, $email_subject, $email_message, $headers);
}
?>
Do you have the charset meta?
<meta charset="utf-8">
Also try changing the document's encoding to UTF-8.
Related
I've made a contact form which works, but now I need it to be able to send an attachment too. I have found some examples but I cannot get them to work with my existing code. I'd prefer to keep as much of the form intact as the css is the way I'd like it.
I've omitted the the captcha and css in the code below.
<div class="contact-box" id="contact-form">
<div class="contact-form">
<form name="contact-form" action="">
<div class="name">
<span class="fa fa-user"></span>
<input id="name" placeholder="Name">
<label class="error" for="name" id="name_error"><i class="fa fa-exclamation-triangle"></i>Please enter your name.</label>
</div>
<div class="email">
<span class="fa fa-envelope"></span>
<input id="email" placeholder="Email">
<label class="error" for="email" id="email_error"><i class="fa fa-exclamation-triangle"></i>Please enter your email address.</label>
</div>
<div class="message">
<span class="fa fa-pencil"></span>
<textarea id="message" placeholder="Your Message"></textarea>
<label class="error" for="message" id="message_error"><i class="fa fa-exclamation-triangle"></i>Please enter your message</label>
</div>
<label class="attachment">
<input type="file" id="fileattachment"/>
<span>Upload Booking Request Form</span>
</label>
<div class="submit">
<input type="submit" name="submit" class="buttonsubmit" id="contact" value="Send">
</div>
</form>
</div>
</div>
<div class="contact-box">
<div class="contact-confirmation">
<i class="fa fa-paper-plane"></i>
<h3>Thanks for your message.</h3>
<h4>We'll be in touch soon!</h4></div>
</div>
<script>
$(function() {
//Hide send confirmation
$(".contact-confirmation").hide();
//Validate form
$('.error').hide();
$("input#contact").click(function() {
$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var message = $("textarea#message").val();
if (message == "") {
$("label#message_error").show();
$("textarea#message").focus();
return false;
}
//Attachment part???
var attachment = $("#fileattachment")[0].files
//Send form
var dataString = 'name=' + name + '&email=' + email + '&message=' + message + '&attachment=' + attachment;
jQuery.ajax({
type: "POST",
url: "processemail.php",
data: dataString,
success: function() {
jQuery(".contact-confirmation").fadeIn(1000);
jQuery(".contact-form").hide();
}
});
return false;
});
});
</script>
//processemail.php
<?php
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
$sendto = $_POST["sendto"];
$sendto = 'overhere#example.com';
$headers = "From: " . $email . "\r\n";
$headers .= "Reply-To: ". $email . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$message = '<html><body><strong>From: </strong>' . $name . '<br /><strong>Email: </strong>' . $email . '<br /><br /><strong>Message: </strong><br />' . $message . '</body></html>';
mail($sendto, $subject, $message, $headers);
?>
HTML with your form but some modifications. I use button submit and in the php, check POST and FILES variables. You need copy FILE to path. Find in google how copy file $_FILES to path.
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
</head>
<body>
<div class="contact-box" id="contact-form">
<div class="contact-form">
<form id="data" method="post" enctype="multipart/form-data">
<!--<form name="contact-form" action=""> -->
<div class="name">
<span class="fa fa-user"></span>
<input id="name" placeholder="Name" name="name">
<label class="error" for="name" id="name_error"><i class="fa fa-exclamation-triangle"></i>Please enter your name.</label>
</div>
<div class="email">
<span class="fa fa-envelope"></span>
<input id="email" placeholder="Email" name="email">
<label class="error" for="email" id="email_error"><i class="fa fa-exclamation-triangle"></i>Please enter your email address.</label>
</div>
<div class="message">
<span class="fa fa-pencil"></span>
<textarea id="message" placeholder="Your Message" name="message"></textarea>
<label class="error" for="message" id="message_error"><i class="fa fa-exclamation-triangle"></i>Please enter your message</label>
</div>
<label class="attachment">
<input type="file" id="fileattachment" name="file"/>
<span>Upload Booking Request Form</span>
</label>
<div class="submit">
<input type="submit" name="submit" class="buttonsubmit" id="contact" value="Send">
</div>
<button type="submit">Go</button>
</form>
</div>
</div>
<div class="contact-box">
<div class="contact-confirmation">
<i class="fa fa-paper-plane"></i>
<h3>Thanks for your message.</h3>
<h4>We'll be in touch soon!</h4></div>
</div>
<script>
$(function() {
//Hide send confirmation
$(".contact-confirmation").hide();
//Validate form
$('.error').hide();
/*
$("input#contact").click(function() {
$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var message = $("textarea#message").val();
if (message == "") {
$("label#message_error").show();
$("textarea#message").focus();
return false;
}
//Attachment part???
var attachment = $("#fileattachment")[0].files
//Send form
var dataString = 'name=' + name + '&email=' + email + '&message=' + message + '&attachment=' + attachment;
});
*/
$("form#data").submit(function(){
console.log($(this));
var formData = new FormData($(this)[0]);
$.ajax({
url : 'processemail.php',
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
});
</script>
</body>
</html>
And in the php
<?php
//var_dump($_POST);
//var_dump($_FILES);
$uploads_dir = ""; /* local path */
if(isset($_FILES['file']) && ($_FILES['file']['error'] == 0) ) {
$tmp_name = $_FILES["file"]["tmp_name"];
$name = $_FILES["file"]["name"];
move_uploaded_file($tmp_name, "{$uploads_dir}{$name}");
}
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
//$sendto = $_POST["sendto"];
$sendto = 'overhere#example.com';
$headers = "From: " . $email . "\r\n";
$headers .= "Reply-To: ". $email . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$message = '<html><body><strong>From: </strong>' . $name . '<br /><strong>Email: </strong>' . $email . '<br /><br /><strong>Message: </strong><br />' . $message . '</body></html>';
mail($sendto, $subject, $message, $headers);
?>
You need to submit the form using the formData object.
$("form").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: window.location.pathname,
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
This should do the job.
I'm trying to make my contact form and i want it to show message (pop up, as a or anything else) when it's successfully sent or error when it can't be sent. But i don't know how to do it. I tried a lot of things and nothink worked for me.
Here is my html code:
<form id="contact-form" action="wyslij.php" method="POST">
<div class="form-group col-lg-6 col-md-6 col-xs-12">
<input type="text" name="name" value="" placeholder="Imie">
</div>
<div class="form-group col-lg-6 col-md-6 col-xs-12">
<input type="text" name="subject" value="" placeholder="Temat">
</div>
<div class="form-group col-lg-6 col-md-6 col-xs-12">
<input type="email" name="email" value="" placeholder="Email">
</div>
<div class="form-group col-lg-6 col-md-6 col-xs-12">
<input type="text" name="phone" value="" placeholder="Telefon">
</div>
<div class="form-group col-xs-12">
<textarea name="message" placeholder="Wiadomość"></textarea>
</div>
<div class="form-group col-xs-12 clearfix">
<input type="submit" class="pull-right" name="submit" value="Wyślij">
</div>
</form>
and here is my php code:
<?php
$owner_email = "kernelus1992#gmail.com"; // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< tutaj wpisz adres email na który mają byc wysyłane maile
$headers = "From: ".$_POST["email"]."\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/plain; charset=utf-8\r\n";
$headers .= "Content-Transfer-Encoding: 8bit";
$subject = 'Wiadomość ze strony internetowej';
$subject = "=?utf-8?B?".base64_encode($subject)."?=";
$messageBody = "";
if($_POST['name']!='nope'){
$messageBody .= 'Imię i nazwisko: ' . $_POST["name"] ."\n";
$messageBody .= "\n";
}
if($_POST['email']!='nope'){
$mailnadawcy = $_POST['email'];
$messageBody .= 'Email: ' . $_POST['email'] . "\n";
$messageBody .= "\n";
}else{
$headers = '';
}
if($_POST['subject']!='nope'){
$messageBody .= 'Temat: ' . $_POST['subject'] . "\n";
$messageBody .= "\n";
}
if($_POST['phone']!='nope'){
$messageBody .= 'Telefon: ' . $_POST['phone'] . "\n";
$messageBody .= "\n";
}
if($_POST['message']!='nope'){
$messageBody .= 'Treść: ' . $_POST['message'] . "\n";
}
if($_POST["stripHTML"] == 'true'){
$messageBody = strip_tags($messageBody);
}
mail($owner_email, $subject, $messageBody, $headers);
?>
You can do it through AJAX.
<script>
$(document).ready(function(){
$("#contact-form").on("submit", function(e){
e.preventDefault();
dataString = jQuery('form#contact-form').serialize();
jQuery.ajax({
type: "POST",
url: "full_path/wyslij.php",
data: dataString,
success: function(data)
{
alert('Form successfully submitted.')
},
error: function(data)
{
alert('Form not submitted.')
}
});
});
});
</script>
Also form action should be removed:
<form id="contact-form" method="POST">
You will have to use javascript or jQuery if you don't want the page to reload, in jQuery for instance you can do:
$("#contact-form").on("submit", function(e){
e.preventDefault();
alert("Form submitted");
})
This doesn't handle validation, handling of input etc, I'd suggest making an Ajax request to one of your php files to handle the form data.
jQuery.post()
If this is a route you want to take, I'll write a small example
I know this question has been asked before, I have researched but can't seem to get to the route of the problem. I'm hoping someone can help. Ok so form seems to be working in as much as the form has to be completed before it allows to be sent, the form sends and an email arrives. Unfortunately the email fields are blank.
So here's the php:
<?php
$Body = 'MIME-Version: 1.0' . "\r\n";
$Body .= 'Content-type: text/html; ch***t=utf-8' . "\r\n";
$Body .= 'From: '. $EmailFrom . "\r\n" . 'X-Mailer: PHP/' . phpversion();
$EmailFrom = "info#mywebsite.com";
$EmailTo = "info#mywebsite.com";
$Subject = "Contact Form";
$Name = trim(stripslashes($_POST['Name']));
$Email = trim(stripslashes($_POST['Email']));
$Message = trim(stripslashes($_POST['Message']));
// validation
$validationOK=true;
if (!$validationOK) {
echo "please check your details";
header("Location: http://mywebsite.com/formredirect.html");
exit;
}
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $Name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $Email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $Message;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From: $EmailFrom" . "\r\n");
// redirect to success page
if ($success){
print "<meta http-equiv=\"refresh\" content=\"1;URL=formredirect.htm\">";
}
else{
print "<meta http-equiv=\"refresh\" content=\"1;URL=error.html\">";
}
?>
My HTML:
<form method="post" action="contact.php" name="contact" id="contact">
<div class="row 50%">
<div class="6u 12u(mobile)">
<input type="text" name="name" id="name" placeholder="Name" required />
</div>
<div class="6u 12u(mobile)">
<input type="text" name="email" id="email" placeholder="Email" required />
</div>
</div>
<div class="row 50%">
<div class="12u">
<textarea name="message" id="message" placeholder="Message" required></textarea>
</div>
</div>
<div class="row 50%">
<div class="12u">
<input type="submit" class="button" id="submit" value="submit"></a>
</div>
</div>
</form>
I appreciate it's probably me being really dense. I'm new to this so am fumbling my way around. Any help would be greatly appreciated. Many thanks!
The $_POST keys are CaSe SenSitIve
$_POST['Name'] is different from $_POST['name']
Either change the form name attribute or the POST keys so they match, i.e.:
FORM
<input type="text" name="name" id="name" placeholder="Name" required />
...
<input type="text" name="email" id="email" placeholder="Email" required />
...
<textarea name="message" id="message" placeholder="Message" required></textarea>
...
PHP
...
$Name = trim(stripslashes($_POST['name']));
$Email = trim(stripslashes($_POST['email']));
$Message = trim(stripslashes($_POST['message']));
...
Update Two: After doing some testing, I found that it does not work when jQuery is loaded in the page. My page relies on jQuery, so what should I do?
Update: You can see the problematic page here here, and the working test page here.
I'm making a contact form, and it looks like this
<form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="../sendemail.php">
<div class="row-fluid">
<div class="span5">
<label>First Name</label>
<input name="first" type="text" class="input-block-level" required="required" placeholder="Your First Name">
<label>Last Name</label>
<input name="last" type="text" class="input-block-level" required="required" placeholder="Your Last Name">
<label>Email Address</label>
<input name="email" type="text" class="input-block-level" required="required" placeholder="Your email address">
</div>
<div class="span7">
<label>Message</label>
<textarea name="message" id="message" required class="input-block-level" rows="8"></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary btn-large pull-right">Send Message</button>
<p> </p>
</form>
Nothing too fancy. sendemail.php looks like this
<?php
header('Content-type: application/json');
$status = array(
'type'=>'success',
'message'=>'Email sent!'
);
$name = #trim(stripslashes($_POST['first']." ".$_POST['last']));
$email = #trim(stripslashes($_POST['email']));
$subject = "Monarc - Message From ".$name;
$message = #trim(stripslashes($_POST['message']));
$email_from = $email;
$email_to = 'xxx#xxx.xxx';
$body = 'Name: ' . $name . "\n\n" . 'Email: ' . $email . "\n\n" . 'Subject: ' . $subject . "\n\n" . 'Message: ' . $message;
$success = #mail($email_to, $subject, $body, 'From: <'.$email_from.'>');
echo json_encode($status);
die;
The email comes through, but the postdata isn't coming through in the email. It says (unknown sender) as the sender, and the body looks like this:
Name:
Email:
Subject: Monarc - Message From
Message:
What am I doing wrong?
Thanks!
To post the form value you must use input type submit instead of button type
change:
<button type="submit" class="btn btn-primary btn-large pull-right">Send Message</button>
to:
<input type="submit" class="btn btn-primary btn-large pull-right" value="Send Message">
supplementary information, this form uses the following javascript file:
jQuery(function($) {
//Ajax contact var form = $('.contact-form'); form.submit(function
() { $this = $(this); $.post($(this).attr('action'),
function(data) {
$this.prev().text(data.message).fadeIn().delay(3000).fadeOut();
},'json'); return false; });
//Goto Top $('.gototop').click(function(event) {
event.preventDefault(); $('html, body').animate({
scrollTop: $("body").offset().top }, 500); }); //End goto top
});
Searching on another forum I found how to fix this. You only need add the following code in the php file:
$headers = "From: mail <$email_from>\r\n";
$headers .= "MIME-Version: 1.0" ."\n";
$headers .= "Content-type: text/html; charset=iso-8859-1\r\n";
and remove "#" of $success = #mail($email_to, $subject, $body,'From: <'.$email_from.'>');
In "main.js" file your code isn't supplying any data in the .post() method. you need to add $(this).serialize() to get all the form fields/values.
untested but should work -
$.post($(this).attr('action'),$(this).serialize(), function(data) {
Hope that helps resolve the issue
I'm trying to create a forum where a user completes it and places their email on the forum so I know who it came from. Once completed, I validate and send the contents of the forum to my email address but I'm not getting any emails from the site.
Here is my HTML
<article class="contact" id="contact">
<div class="contact-content">
<div class="span5 contact-info">
<!-- Contact title -->
<div class="contact-title">
<h2>Contact</h2>
</div>
<div class="contact-scroll">
<p>Address: 123 Baker Street</p>
<p>Phone Number: (555) 555-555</p>
<p>E-Mail: example#gmail.com</p>
<div class="class1" style="position: absolute; display: none;">
<div class="class2">
<div class="class3" style="position: absolute; top: 0px;" oncontextmenu="return false;">
<div class="class4" style="position:relative;"></div></div><div class="class5"></div></div></div>
<!-- contact form -->
<div class="contact-form" style="margin-top: 10px;">
<form action="" method="post">
<input style="width: 185px; float:left; font-size:14pt; color: white; b" type="text" name="your-name" id="your-name" value="" size="40" class="wpcf7-form-control-wrap your-name" aria-required="true" placeholder="Full Name">
<input style="width: 185px; float:left; font-size:14pt; color: white;" type="email" name="your-email" id="your-email" value="" size="40" class="wpcf7-form-control-wrap your-email" aria-required="true" placeholder="Email Address">
<input style="width: 374px; font-size:14pt; color: white;" type="text" name="your-subject" id="your-subject" value="" size="40" class="wpcf7-form-control-wrap your-subject" placeholder="Company Name">
<textarea style="color: white; width: 373px;" name="your-message" id="your-message" cols="40" rows="10" class="wpcf7-form-control-wrap your-message" aria-required="true" placeholder="Your Message"></textarea>
<input type="submit" id="sub" name="sub" value="Submit">
</form>
</div>
</div>
</div>
</div>
</article>
Here is my php
if(isset($_POST['sub']))
{
$name = $_POST["your-name"];
$email = $_POST["your-email"];
$companyName = $_POST["your-subject"];
$message = $_POST["your-message"];
$to = "sendto#gmail.com";
$headers = "From: $email\r\n";
$headers .= "Content-type: text/html\r\n";
$subject = $name." from ".$companyName." just emailed from online CV";
mail($to, $subject, $message, $headers);
echo "Mail Sent.";
}
The "if" statement is executing properly because the echo is outputted. I've also tried to pass the values to an alert box and all the input values are displayed in the alert box using this php code. The only problem is I can't get it to email the inputs to the email address I've specified in my php code. I'm running this site on 000Webhost free servers. Is the a script I have to include in my index.php to make the mail function work? Do I have to configure something inside the control panel on my 000Webhost account? Or is this simply just a syntax error?
Thanks
Alright I just managed to figure this out. To make this work on gmail, I had to add extra stuff to my headers.
$headers = "From: {$email}\r\n";
$headers .= "Reply-To: {$email}\r\n";
$headers .= "Return-Path: {$email}\r\n";
$headers .= "X-Mailer: PHP5\r\n";
$headers .= "Content-Transfer-encoding: 8bit\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "X-MSMail-Priority: Normal\r\n";
$headers .= "Importance: 0\r\n";
$headers .= "Content-type: text/html\r\n";
$headers .= "Delivered-to: {$to}\r\n";
$subject = $name." from ".$companyName." just emailed you";
$headers .= "Content-Type: text/plain; charset=UTF-8\r\n\r\n";
if(mail($to, $subject, $message, $headers))
{
echo "Mail Sent.";
}
else
{
echo "Mail was not sent!";
}
These extra headers are needed to have mail sent to Gmail accounts. Everything else from my original code worked fine as is.