2016-09-13 201 views
0

我已經使用bootstrap在模態窗口中創建了聯繫人窗體。表單的動作與我的php文件相同,它將消息放在一起併發送出去。電子郵件按照它的意思發送,但在電子郵件的消息塊中,它包含了一些我沒有用過的樣式代碼,所以它必須來自引導程序。我會在這裏發佈代碼。我回復了帖子的print_r和其他變量,無法修正該輸出中的樣式代碼。我正在使用ScotchBox作爲我的盒子,它是mailcatcher來檢查電子郵件狀態。電子郵件包括造型代碼,模態窗口與聯繫表格,使用php發送的電子郵件

<!-- 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 = "[email protected]"; // 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; 
} 
+0

某些電子郵件服務器忽略樣式 – Rhopercy

+0

對於電子郵件,最好將樣式放在一行中,而不要引用樣式塊或包含的css文件。 – aynber

+0

該電子郵件已添加到它的樣式。但是當電子郵件實際上被髮送到我的郵筒時,它在郵件的第一部分有一堆樣式。它必須來自引導CSS,因爲我從來沒有使用它使用的一些項目。 – TomG103

回答

0

引導工作與jQuery/javascript和不應該用於HTML格式的電子郵件,因爲幾乎所有的郵件客戶端會從郵件中刪除的JavaScript。使用內聯css或樣式塊添加樣式。也有開發HTML電子郵件的框架:

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

+0

沒有什麼被用來設計電子郵件的風格。聯繫表格是使用HTML創建的,收集到的信息作爲變量傳遞給一個php文件,該文件將其輸入到電子郵件中併發送。我之前沒有使用過它,直到我開始此項目並使用模式窗口向用戶呈現聯繫表單。 – TomG103

0

網站被部署到服務器,現在住。該電子郵件並未在實時環境中包含所有樣式代碼。 Scotch-Box和虛擬環境必定存在問題。

我遇到了一些其他的問題,我將在Scotch-box中編譯並提供給這些人,以便他們知道存在一些問題。