Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 days ago.
Improve this question
HTML-form:
<div class="contact-form">
<form action="">
<input type="name" placeholder="Your Name" required>
<input type="email" placeholder="Your Email Address">
<input type="" placeholder="Your Mobile Number" required>
<textarea name="" id="" cols="35" rows="10" placeholder="How Can I Help You?" required></textarea>
<input type="submit" value="Send Message" class="submit" required>
</form>
</div>
CSS-form:
.contact-form form{
position: relative;
}
.contact-form form input,
form textarea{
width: 100%;
padding: 14px;
background: var(--bg-color);
color: var(--text-color);
border: none;
outline: none;
font-size: 15px;
border-radius: 8px;
margin-bottom: 10px;
}
.contact-form textarea{
resize: none;
height: 240px;
}
.contact-form .submit{
display: inline-block;
font-size: 16px;
background: var(--main-color);
color: var(--text-color);
width: 160px;
transition: all .45s ease;
}
.contact-form .submit:hover{
transform: scale(1.1);
cursor: pointer;
}
How do I send a form from a user to my email? HTML, CSS, JS?
I'm just starting to learn js, it's a little unclear how to achieve this in this case. Here, the form itself:
enter image description here
You need server-side scripting language such as php, pythong, nodejs to process form data and send to your email addr.
Using php, you can do something basic like this as reference, adapt to your own code as you go.
html form
<form action="form-handler.php" method="post">
<input type="name" placeholder="Your Name" required>
<input type="email" placeholder="Your Email Address">
<input type="" placeholder="Your Mobile Number" required>
<textarea name="" id="" cols="35" rows="10" placeholder="How Can I Help You?" required></textarea>
<input type="submit" value="Send Message" class="submit" required>
</form>
form-handler.php
<?php
$to = "you#example.com";
$subject = "New Contact Form Submission";
$name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
$mobile = filter_var($_POST['mobile'], FILTER_SANITIZE_STRING);
$message = filter_var($_POST['message'], FILTER_SANITIZE_STRING);
$message = "Name: " . $name . "\n";
$message .= "Email: " . $email . "\n";
$message .= "Mobile: " . $mobile . "\n";
$message .= "Message: " . $message . "\n";
$headers = "From: contact-form#example.com" . "\r\n" .
"Reply-To: " . $email . "\r\n" .
"X-Mailer: PHP/" . phpversion();
mail($to, $subject, $message, $headers);
?>
Note again this is only an example, you can use python or nodejs as well.
Related
I'm creating a small website and I have a one question report form. The problem is the email isn't sending. I'm not sure what I did wrong.
I think there might be something wrong with the php, or maybe the html, I'm not the best with forms. Thanks for the help!
Here's my code:
html
<h2 style="font-size:30px;"><i class="fa fa-exclamation-circle"></i> Report</h2>
</div>
<hr class="descriptionline3">
<div class="modal-body3">
<form action="report.php" id="errorform" onsubmit = "return validate();">
<p style="color:#363636;text-align:left;padding-left:10px;">What seems to be the problem?</p>
<input type="text" class="forminputproblem" id="name" placeholder="Write the problem here..." style="height:20px;font-size:14px;border-radius:6px;display:inline-block;border:1px solid #ccc;padding: 12px 20px;
">
<div style="height:10px;"></div>
<div style="color:red;" id="error_message"></div>
<div style="color:green;" id="success_message"></div>
<div style="height:10px;"></div>
<input name="sumbit" type="submit" value="SEND REPORT">
</form>
php
<?php
if (isset($_POST['submit'])) {
$name = $_POST['name'];
$mailTo = "contact#email.com";
$headers = "Report Form Message";
$txt = "You have received a report form message: ".$name.".\n\n";
mail($mailTo, $txt, $headers);
header("Location: /index.html?reportsent");
}
?>
javascript
function validate(){
var name = document.getElementById("name").value;
var error_message = document.getElementById("error_message");
error_message.style.padding = "10px";
var text;
if(name.length < 10){
text = "✖ Report message has to be at least 10 characters!";
error_message.innerHTML = text;
text = "";
success_message.innerHTML = text;
return false;
}
text = "";
error_message.innerHTML = text;
text = "✔ Report has been submitted! We will get back to you as soon as possible.";
success_message.innerHTML = text;
return true;
}
Thanks!
By checking out the mail function's parameters...
mail($to, $subject, $message, $headers);
It seems like the problem is that your variables are a bit mixed up. Also, "header" doesn't refer to the subject: email headers contain info and have their own syntax. Try this code:
<?php
if (isset($_POST['submit'])) {
$name = $_POST['name'];
$mailTo = "contact#rileysunblockedgames.com";
$subject = "Report Form Message";
$headers = 'From: noreply#rileysunblockedgames.com' . "\r\n" .
'Reply-To: noreply#rileysunblockedgames.com' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
$txt = "You have received a report form message: ".$name.".\n\n";
mail($mailTo, $subject, $txt, $headers);
header("Location: /games.html?reportsent");
}
?>
Also, on your input, you have to define the "name" attribute for it to work properly:
<input type="text" class="forminputproblem" name="name" id="name" placeholder="Write the problem here..." style="height:20px;font-size:14px;border-radius:6px;display:inline-block;border:1px solid #ccc;padding: 12px 20px;">
Also also (and funny enough this is the biggest barrier in your way right now), there is a typo in your submit button's name, so your PHP code will never run:
<input name="submit" type="submit" value="SEND REPORT">
on my INDEX.HTML page I have a subscription form that writes data to a DB with php. Everything works honky-dori.
When I submit the form the site goes to the PHP file I use to submit the emails to me and the visitor. I then can echo a thank you message. However...I dont want the message to appear inside this php page....I want the form to disappear and the message appear on my index page inside a a tag...e.g a DIV.
How do I do this? If I need to use AJAX or JQUERY...could you please point me to the right place?
Here are some of the code:
<div class="container-fluid">
<form action="thankyou.php" method="post">
<div class="form-group">
<label for="firstname">First Name:</label>
<input type="input" class="form-control" id="firstname" name="firstname">
<label for="lastname">Last Name:</label>
<input type="input" class="form-control" id="lastname" placeholder="" name="lastname">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="" name="email">
</div>
<button type="submit" class="btn btn-warning">Submit</button>
</form>
</div>
thankyou.php
<?php
require 'connection.php';
$conn = Connect();
$firstname = $conn->real_escape_string($_POST['firstname']);
$lastname = $conn->real_escape_string($_POST['lastname']);
$email = $conn->real_escape_string($_POST['email']);
$myemail = "myemailaddress";
$query = "INSERT into subscription (firstname,lastname,email) VALUES('" . $firstname . "','" . $lastname . "','" . $email . "')";
$success = $conn->query($query);
$subject1 = "New eBook Subscriber";
if (!$success) {
die("Couldn't enter data: ".$conn->error);
} else {
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
$headers .= 'From: ' .$myemail. "\r\n";
$message = "some message";
$messageb = "some message";
mail($email, $subject, $messageb, $headers);
mail($myemail, $subject1, $message, $headers);
?><META HTTP-EQUIV="Refresh" CONTENT="1;URL=index.html">
<?php
$conn->close();
}
?>
Try this solution
<div class="container-fluid">
<form action="thankyou.php" method="post" id="form">
<div class="form-group">
<label for="firstname">First Name:</label>
<input type="input" class="form-control" id="firstname" name="firstname">
<label for="lastname">Last Name:</label>
<input type="input" class="form-control" id="lastname" placeholder="" name="lastname">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="" name="email">
</div>
<button type="submit" class="btn btn-warning">Submit</button>
</form>
</div>
<script>
$('#form').on('submit', function(event) {
event.preventDefault(); //stops form on submit
var formData = {};
$.each($("#form").serializeArray(), function (i, field) {
formData[field.name] = field.value;
});
$.ajax({
url: 'thankyou.php',
data: formData,
method:'POST',
success: function(response) {
$(this).hide(); //sets css display:none to form
var message = "Thank you!";
$('.container-fluid').html(message);
}
});
});
</script>
Set the redirect after the successfully email the data and set a session variable and print this session variable in the html page. this may solve your problem however you can also use ajax to send the data and solve this problem.
I've been trying to submit a form that is on my website but the form will not submit. I am not a php expert and I can not tell where my error is. The php file opens instead of sending to my two emails.
html
<form action="email.php" method="post" name="emailForm">
<div class="form-group">
<label for="Name"></label>
<input class="form-control name" placeholder="Name" id="Name" name="name">
</div>
<div class="form-group">
<label for="Email"></label>
<input class="form-control email" placeholder="Email" id="Email" name="email">
</div>
<div class="form-group">
<label for="Subject"></label>
<input class="form-control subject" placeholder="Subject" id="Subject" name="subject">
</div>
<div class="form-group">
<label for="Message"></label>
<textarea class="form-control Message" placeholder="Message" id="Message" name="message"></textarea>
</div>
<input type="submit" id="button" class="btn btn-default button_submit"></input>
</form>
and I have the php file in the main directory
and it contains
<?php
$name = $_POST['name'];
$visitor_email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];
$email_from = "georgestcm#gmail.com";
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $visitor_email \r\n";
$email_subject = "New Form submission";
$to = "georgestcm#gmail.com, yahwehown#gmail.com";
$email_body = "You have received a new message from the user $name.\n"."Here is the message:\n $message".
mail($to,$email_subject,$email_body,$headers);
?>
and my form validation is in in jquery. That is why I have not done it in php, because I am not a php expert.
jquery
$(document).ready(function() {
var name = $('input.name');
var email = $('input.email').prop('disabled',true);
var subject = $('input.subject').prop('disabled',true);
var message = $('textarea.Message').prop('disabled',true);
var button = $('input#button').prop('disabled',true);
name.on('keyup',function() {
if($(this).val().length > 0) {
email.prop('disabled',false);
} else {
email.prop('disabled',true);
}
});
email.on('keyup',function() {
if($(this).val().length > 0 && $(this).val().includes('#') && $(this).val().includes('.com')) {
subject.prop('disabled', false);
message.prop('disabled',false);
} else {
subject.prop('disabled', true);
message.prop('disabled',true);
button.prop('disabled',true);
}
});
message.on('keyup',function() {
if($(this).val().length > 0){
button.prop('disabled',false);
}
})
button.on('click', function() {
name.val('');
email.val('');
subject.val('');
message.val('');
})
})
I want to send email to my two emails.
I'm fairly new to PHP and I'm having trouble sending test emails out from my local host.
I have a 3 field form where I'm hoping that I can have a user submit the form & be able to see a success message without the page refreshing. I get the error message that I have set in the code but for some reason, I'm unable to actually get the emails to send/have a success message appear.
Here's my code:
js
jQuery( document ).ready( function( $ ) {
var form = $('#ajax-contact');
var formMessages = $('#form-messages');
$(form).submit(function(e) {
e.preventDefault();
var formData = $(form).serialize();
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
$(formMessages).text(response);
$('#name, #email, #number').val('');
})
.fail(function(data) {
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});
});
});
mailer.php
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = strip_tags(trim($_POST["name"]));
$name = str_replace(array("\r","\n"),array(" "," "),$name);
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$number = trim($_POST["number"]);
if ( empty($name) OR empty($number) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
http_response_code(400);
echo "Sorry, there seems to be a problem submitting your details, please try again or contacts us";
exit;
}
$recipient = "example#example.co.uk";
$subject = "$name has given you their details to call them back";
$email_content = "
<html>
<style>
body {
background-color: white;
}
.email-container{
background-color:#c1c1c1;
max-width:400px;
margin:0 auto;
padding:30px 10px;
border-radius:10px;
border: 2px solid #515151;
}
</style>
<body>
<div class="email-container">
Dear example, <br />
<br />
A potential client has requested a call back. Their details are as follows: <br />
<br />
Name: $name\n <br />
Email: $email\n\n <br />
Telephone: \n$numer\n
</div>
</body>
</html>"
$email_headers = "From: $name <$email>";
if (mail($recipient, $subject, $email_content, $email_headers)) {
http_response_code(200);
echo "Thank You! Your message has been sent.";
} else {
http_response_code(500);
echo "Sorry, there seems to be a problem submitting your details, please try again or contacts us";
}
} else {
http_response_code(403);
echo "There was a problem with your submission, please try again.";
}
?>
HTML
<form class="requestcall-form" id="ajax-contact" method="post" action="mailer.php">
<input type="text" id="name" name="name" placeholder="Full Name" required>
<input type="text" id="email" name="email" placeholder="Email Address" required>
<input type="text" id="number" name="number" placeholder="Contact number" required>
<input class="submit" type="submit" name="submit" value="Submit">
</form>
<div id="form-messages"></div>
there is something wrong with how you output $email_content. String is not formatted correctly
check the <div class="email-container"> and change it to <div class='email-container'>
also, add a (;) after your $email_content
The other answer is correct, I thought I'd offer a better solution for dealing with large blocks of text, heredoc strings. No worrying about unescaped quotes ruining your day. Using this, your code would look like this:
...
$recipient = "example#example.co.uk";
$subject = "$name has given you their details to call them back";
$email_content = <<< HTML
<html>
<style>
body {
background-color: white;
}
.email-container{
background-color:#c1c1c1;
max-width:400px;
margin:0 auto;
padding:30px 10px;
border-radius:10px;
border: 2px solid #515151;
}
</style>
<body>
<div class="email-container">
Dear example, <br />
<br />
A potential client has requested a call back. Their details are as follows: <br />
<br />
Name: $name <br />
Email: $email <br />
Telephone: $numer
</div>
</body>
</html>
HTML;
$email_headers = "From: $name <$email>";
...
For HTML code,
<textarea name="email_content" rows="6" placeholder="Write something"></textarea>
Send it
For PHP code,
<?php
$email="abcde#abc.com";
$head = "From: email\r\n";
$head .= "Content-type: text/html\r\n";
$title= "Title Test";
$body = "The text in the textarea";
$success = mail($email, $title, $body, $head);
?>
I want the text in the textarea to go to $body in PHP code.
Also, I want to send email in utf-8.
Please help!
You can't do that because you're not POSTing the data (you could do it if the email you send was always the same). Like #David said, though, you can make the submit button look like a hyperlink.
Here's the HTML markup:
<form method="POST" action="./something.php">
<textarea name="email_content" rows="6" placeholder="Write something"></textarea>
<input type="submit" class="hyperlink" value="Send it">
</form>
Here's the CSS styling:
.hyperlink {
background-color: transparent;
text-decoration: underline;
border: none;
color: blue;
cursor: pointer;
}
This is how it would look: http://jsfiddle.net/VKuEF/1/.
And in the something.php PHP script, to grab the value of the the textarea you'd do
$body = $_POST['email_content'];
And then use it to send the email. To use UTF-8 encoding for your email, you could add the Content-Type: text/html; charset=UTF-8 header to your message body.