在在线表单发送的电子邮件中，请注意输入到表单文本区域的换行符

Question

I am using the code below. When the website user fills in the form, the email I receive does not show the line breaks as they are added by the user in the text area (message_content). How can I achieve this so the layout of the message content looks the same in the email.

 autosize(document.querySelectorAll('#message_content')); var validator = $("#comment_form").validate({ ignore: [], rules: { gender: { required: true, }, first_name: { required: true, minlength: 2 }, last_name: { required: true, minlength: 2 }, email: { required: true, email: true, minlength: 4 }, email_again: { equalTo: '[name="entry[email]"]' }, message_subject: { required: true, minlength: 2 }, message: { required: true, minlength: 4 }, hiddenRecaptcha: { required: function() { if (grecaptcha.getResponse() == '') { return true; } else { return false; } } } } }); 

 html { text-align: center } body { display: inline-block; margin: 0px auto; text-align: left; } @font-face { font-family: Questrial; src: url(Questrial-Regular.otf); } div { font-family: Questrial; } input { font-family: Questrial; } text-area { font-family: Questrial; } span { font-family: Questrial; } p { font-family: Questrial; } form { font-family: Questrial; } #comment_form { width: 302px; } .label-radio { font-size: 0.8em; color: #d8e3e6; margin-right: 10px; font-family: questrial; } .inputfield3 { height: 33px; max-height: 33px; width: 302px; border-radius: 16px; margin-top: -10px; margin-bottom: 17px; padding: 0px 10px 0px 10px; overflow: hidden; border: none; background-color: #ffffff; display: inline-block !important; font-family: questrial; font-size: 0.8em; } .inputfield2 { height: 33px; max-height: 33px; width: 302px; border-radius: 16px; margin-top: -10px; margin-bottom: 0px; padding: 0px 10px 0px 10px; overflow: hidden; border: none; background-color: #ffffff; display: inline-block !important; font-family: questrial; font-size: 0.8em; } .textareafield { max-height: 350px; width: 302px; max-width: 302px; border-radius: 16px; margin-top: -10px; margin-bottom: 17px; padding: 10px 10px 10px 10px; overflow: hidden; border: none; background-color: #ffffff; display: inline-block !important; font-family: questrial; font-size: 0.8em; } #g-recaptcha-outer { width: 302px; height: 72px; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 16px; margin: -10px auto 20 auto; } #recaptcha-header { margin: 30px 0px -15px 0px; color: #d8e3e6; font-size: 1.0em; font-family: questrial; font-size: 0.8em; letter-spacing: -0.03em; } #contact_submit_button { display: block; text-decoration: none; margin: 10px auto 80px auto; width: 230px; height: 33px; padding: 0px 15px 0px 15px; background-color: rgb(0, 157, 233); color: #ffffff; border-radius: 16px; border: none; outline: none; font-family: questrial; font-size: 1em; } .requiredmark { margin: 0px 0px 0px 295px; display: inline-block; color: #d8e3e6; padding: 20px 0px 0px 0px; } .requiredmark2 { margin: -39px 0px 0px 295px; display: inline-block; color: #d8e3e6; padding: 20px 0px 0px 0px; } .requiredmark-radio { margin: 20px 0px 0px 0px; display: inline-block; color: #d8e3e6; font-family: questrial; } .error { display: none; } .error_show { color: red; } input.invalid, textarea.invalid { border: 1px solid red; } input.valid, textarea.valid {} label.error { margin-top: -10px; margin-bottom: 30px; float: none; color: red; vertical-align: top; display: block; font-family: Questrial; }​ #hiddenRecaptcha-error { margin-top: 65px!important; margin-bottom: 30px; float: none; color: red; vertical-align: top; display: block; font-family: Questrial; }​ .gender { border-radius: 16px; margin-top: 5px; margin-bottom: 7px; padding: 0px 10px 0px 10px; overflow: hidden; border: none; background-color: #ffffff; display: inline-block !important; font-family: questrial; font-size: 0.8em; } #gender-error { float: right; margin-bottom: 0px!important; margin-top: 20px!important } 

 <?php if(isset($_POST['submit']) && !empty($_POST['submit'])): if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])): //your site secret key $secret = 'MySecretKey_is_here'; //get verify response data $verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['g-recaptcha-response']); $responseData = json_decode($verifyResponse); if($responseData->success): //contact form submission code $gender = !empty($_POST['gender'])?$_POST['gender']:''; $first_name = !empty($_POST['first_name'])?$_POST['first_name']:''; $last_name = !empty($_POST['last_name'])?$_POST['last_name']:''; $company_name = !empty($_POST['company_name'])?$_POST['company_name']:''; $customer_number = !empty($_POST['customer_number'])?$_POST['customer_number']:''; $email = !empty($_POST['email'])?$_POST['email']:''; $email_again = !empty($_POST['email_again'])?$_POST['email_again']:''; $telephone_number = !empty($_POST['telephone_number'])?$_POST['telephone_number']:''; $message_subject = !empty($_POST['message_subject'])?$_POST['message_subject']:''; $message_content = !empty($_POST['message_content'])?$_POST['message_content']:''; $to = 'eddyhilhorst@fotel.eu'; $subject = 'A new contact form has been submitted'; $htmlContent = " <h1>Contact request details</h1> <p>'.$first_name.' From:</b>".$gender." ".$first_name." ".$last_name."</p> <p><b>Company name: </b>".$company_name."</p> <p><b>Customer number: </b>".$customer_number."</p> <p><b>Email address: </b>".$email_address."</p> <p><b>Telephone number: </b>".$telephone_number."</p> <p><b>Message subject: </b>".$message_subject."</p> <p><b>Message: </b>".$message_content."</p> "; // Always set content-type when sending HTML email $headers = "MIME-Version: 1.0" . "\\r\\n"; $headers .= "Content-type:text/html;charset=UTF-8" . "\\r\\n"; // More headers $headers .= 'From:'.$gender.' '.$first_name.' '.$last_name.' <'.$email.'>' . "\\r\\n"; //send email @mail($to,$subject,$htmlContent,$headers); $succMsg = 'Your contact request have submitted successfully.'; else: $errMsg = 'Robot verification failed, please try again.'; endif; else: $errMsg = 'Please click on the reCAPTCHA box.'; endif; else: $errMsg = ''; $succMsg = ''; endif; ?> <head> <script src='https://www.google.com/recaptcha/api.js'></script> <script src="https://assets.webshopapp.com/photographycoursetour/autosize.js?2" type="text/javascript"></script> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script> <script src="{{ 'iframeresizer-min.js' | url_asset }}" type="text/javascript"></script> <script src="https://assets.webshopapp.com/photographycoursetour/iframeresizer-contentwindow-min.js" type="text/javascript"></script> </head> <body> <form id="comment_form" action="form.php" method="post"> <div class="compulsoryfield"> <input class="gender" type="radio" name="gender" value="Mr" required><label class="label-radio">Mr.</label> <input class="gender" type="radio" name="gender" value="Ms" required><label class="label-radio">Ms.</label> <span class="requiredmark-radio">*</span> </div> <div class="compulsoryfield"><span class="requiredmark">*</span> <input id="first_name" name="first_name" class="inputfield3" type="text" placeholder="first name" required> </div> <div class="compulsoryfield"><span class="requiredmark2">*</span> <input id="last_name" name="last_name" class="inputfield3" type="text" placeholder="last name" required> </div> <input class="inputfield3" type="text" name="company_name" placeholder="company name (if applicable)"> <input class="inputfield3" type="text" name="customer_number" placeholder="customer number (on invoice if available)"> <br> <div class="compulsoryfield"><span class="requiredmark">*</span> <input id="email" name="email" class="inputfield3" type="email" placeholder="email address" required> </div> <div class="compulsoryfield"><span class="requiredmark2">*</span> <input id="email_again" name="emai_again" class="inputfield3" type="email" placeholder="re-enter email address to confirm" required></div> <input class="inputfield3" type="text" name="telephone_number" placeholder="telephone number (country code included)"> <br> <div class="compulsoryfield"><span class="requiredmark">*</span> <input id="message_subject" name="message_subject" class="inputfield3" type="text" placeholder="subject of message" required> </div> <div class="compulsoryfield"><span class="requiredmark2">*</span> <textarea id="message_content" name="message_content" class="textareafield" type="text" placeholder="add your message here" rows="8" cols="39" required></textarea></div> <p id="recaptcha-header">before sending, please show us you're real:</p> <div><span class="requiredmark">*</span> <div id="g-recaptcha-outer" class="compulsoryfield2"> <div class="g-recaptcha" data-sitekey="6LdBLBUUAAAAAI6eMRYRaA5B-EN_UDKGzwHtNMU1" required></div> </div> <input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha"> <br><br> <input id="contact_submit_button" type="submit" name="submit" value="SEND" onclick="myFunction()"> </form> <div class="errMsg">PLease click on the Recaptcha box.</div> 

Answer 1

Your email is an HTML email so you need to send HTML line breaks. Use the nl2br on all inputs you want to have line breaks.

$message_content = !empty($_POST['message_content'])?nl2br($_POST['message_content']):'';