이메일에는 스타일 코드, 문의 양식이있는 모달 창, PHP를 사용하여 보낸 이메일

Question

부트 스트랩을 사용하여 모달 창에서 연락처 양식을 만들었습니다. 양식의 동작은 메시지를 모아서 전송하는 PHP 파일과 같습니다. 전자 메일은 필요한대로 보내지 만 전자 메일의 메시지 블록에는 사용하지 않은 스타일 코드가 약간 포함되어 있으므로 부트 스트랩에 있어야합니다. 여기에 코드를 게시합니다. 나는 게시물 및 다른 변수의 print_r을 echo'd했고 그 출력에서 ​​스타일 코드를 잘 처리 할 수 ​​없습니다. 내 상자에 ScotchBox를 사용 중이며 이메일 상태를 확인하는 메일러입니다.

<!-- trigger modal --> 
    <button id="contact-button" data-toggle="modal" data-target="#contactModal">Contact</button> 

    <!-- Modal --> 
    <div class="modal fade" id="contactModal" role="dialog"> 
     <div class="modal-dialog"> 

      <!-- modal content --> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h1 class="modal-title" id="contact-title">Contact Us</h1> 
       </div> 
       <div class="modal-body"> 
        <div class="main_form"> 
         <form method="post" action="send_email.php"> 
          <input id="text-block" type="text" name="full_name" placeholder=" Full Name" required> 
          <input id="text-block" type="text" name="email" placeholder=" Email" required> 
          <input id="text-block" type="text" name="telephone" placeholder=" Telephone" required> 
          <br> 
          <input id="sub-button" name="submit" type="submit" value="Submit"> 
         </form> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

여기 내 send_email.php 파일

<?php 
session_start(); 

if (isset($_POST['submit'])) { 
    $to = "someemail@email.com"; // this is your Email address 
    $from = $_POST['email']; // this is the sender's Email address 
    $full_name = $_POST['full_name']; 
    $email = $_POST['email']; 
    $telephone = $_POST['telephone']; 
    $subject = "Contact Request"; 
    $message_before = "Full Name: " . $full_name . "\n\n" . "Email: " . $email . "\n\n" . "Phone: " . $telephone; 
    $message = strstr($message_before, "Full Name"); 

    mail($to, $subject, $message); 

    header('Location: contact.php'); 
}?> 

내 mailcatcher 얻을 이메일있다가해야 할 텍스트의 앞에이있다.

html.cye-enabled.cye-nm:not(*:-webkit-full-screen) body, 
html.cye-enabled.cye-nm:not(*:-webkit-full-screen) #cye-workaround-body { 
    -webkit-filter: contrast(48%) brightness(124%) invert(1); 
} 

html.cye-enabled.cye-lm body { 
    background-color: #000000 !important; 
    border-color: rgb(2, 1, 2) !important; 
    background-image: none !important; 
    color: #FFFFFF !important; 
} 

html.cye-enabled.cye-lm div { 
    background-color: #000000 !important; 
    border-color: rgb(2, 1, 2) !important; 
    background-image: none !important; 
    color: #FFFFFF !important; 
} 

html.cye-enabled.cye-lm th { 
    background-color: #000000 !important; 
    border-color: rgb(2, 1, 2) !important; 
    background-image: none !important; 
    color: #FFFFFF !important; 
} 

html.cye-enabled.cye-lm td { 
    background-color: #000000 !important; 
    border-color: rgb(2, 1, 2) !important; 
    background-image: none !important; 
    color: #FFFFFF !important; 
} 

html.cye-enabled.cye-lm input[type=text] { 
    background-color: #000000 !important; 
    border-color: rgb(2, 1, 2) !important; 
    background-image: none !important; 
    color: #FFFFFF !important; 
} 

html.cye-enabled.cye-lm textarea { 
    background-color: #000000 !important; 
    border-color: rgb(2, 1, 2) !important; 
    background-image: none !important; 
    color: #FFFFFF !important; 
} 

html.cye-enabled.cye-lm select { 
    background-color: #000000 !important; 
    border-color: rgb(2, 1, 2) !important; 
    background-image: none !important; 
    color: #FFFFFF !important; 
} 

html.cye-enabled.cye-lm ul { 
    background-color: #000000 !important; 
    border-color: rgb(2, 1, 2) !important; 
    background-image: none !important; 
    color: #FFFFFF !important; 
} 

html.cye-enabled.cye-lm .cye-lm-tag,html.cye-enabled.cye-lm.cye-lm-tag { 
    background-color: #000000 !important; 
    border-color: rgb(2, 1, 2) !important; 
    background-image: none !important; 
    color: #FFFFFF !important; 
} 

Answer 1

는 부트 스트랩은 자바 스크립트 JQuery와/작동하며 거의 모든 전자 메일 클라이언트가 메시지에서 자바 스크립트를 제거합니다 HTML 이메일에 사용되어서는 안된다. 스타일을 추가하려면 인라인 CSS 또는 스타일 블록을 사용하십시오.

http://foundation.zurb.com/emails.html

Answer 2

사이트 서버에 배포 된 지금 살고있다 : HTML 이메일을 개발하기위한 프레임 워크도 있습니다. 실제 환경에서는 전자 메일에 모든 스타일 코드가 한 번 포함되지 않았습니다. Scotch-box 및 가상 환경에 문제가 있어야합니다.

몇 가지 문제가 있음을 알기 위해 Scotch-box에서 컴파일하고 제공 할 몇 가지 다른 문제를 발견했습니다.