Search for the Article

Contact form 7, email body template

Step-by-Step to Setup: 
  1. Go to your WordPress Admin Dashboard. 
  2. Navigate to Contact → Contact Forms and select the form you want to edit. 
  3. Scroll down to the Mail tab. In the Mail section, ensure that the checkbox for "Use HTML content type" is selected. 

Update the Message Body: 

Make sure the message body in the mail settings is using the correct HTML format for email rendering. Here is the HTML content you can add:
	


<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <title>Email Notification</title>
    <style>
        /* General styles for email body */
        body {
            font-family: Arial, sans-serif;
            color: #333;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        .email-container {
            background-color: #ffffff;
            width: 100%;
            max-width: 600px;
            margin: 20px auto;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        .header {
            background-color: #3498db;
            padding: 15px;
            border-radius: 10px 10px 0 0;
            color: #ffffff;
            text-align: center;
        }

        .content {
            padding: 20px;
        }

        .content h2 {
            color: #3498db;
            margin-bottom: 10px;
            font-size: 20px;
        }

        .content p {
            margin-bottom: 15px;
            line-height: 1.6;
        }

        .footer {
            background-color: #f4f4f4;
            padding: 15px;
            border-radius: 0 0 10px 10px;
            text-align: center;
            color: #888;
        }

        .footer a {
            color: #3498db;
            text-decoration: none;
        }

        .button {
            background-color: #27ae60;
            color: white;
            padding: 10px 20px;
            text-align: center;
            display: inline-block;
            font-size: 16px;
            border-radius: 5px;
            text-decoration: none;
            margin-top: 10px;
        }

        .info-section {
            background-color: #f4f4f4;
            padding: 10px;
            border-left: 4px solid #3498db;
            margin-bottom: 15px;
            border-radius: 5px;
        }

        .info-section p {
            margin: 5px 0;
        }

        .info-section strong {
            color: #333;
        }
    </style>
</head>
<body>

<div class="email-container">
    <div class="header">
        <h1>New Enquiry Notification</h1>
    </div>

    <div class="content">
        <h2>Enquiry Details</h2>

        <p><strong>From:</strong> [your-name] ([your-email])</p>
        <p><strong>Subject:</strong> [your-requirement]</p>

        <div class="info-section">
            <h3>Message Body:</h3>
            <p><strong>Name:</strong> [your-name]</p>
            <p><strong>Email:</strong> [your-email]</p>
            <p><strong>Phone:</strong> [your-phone]</p>
            <p><strong>Requirement:</strong><br /> [your-requirement]</p>
        </div>

        <h3>Website Information</h3>
        <p><strong>Website Name:</strong> [_site_title]</p>
        <p><strong>Website URL:</strong> <a href="[_site_url]">[_site_url]</a></p>
        <p><strong>Page URL:</strong> <a href="[_post_url]">[_post_url]</a>, [_post_title]</p>

        <h3>Form Submission Details</h3>
        <p><strong>Submission Time:</strong> [_date]</p>
        <p><strong>IP Address:</strong> [_remote_ip]</p>
        <p><strong>Browser Information:</strong> [_user_agent]</p>

        <a class="button" href="#">View Submission</a>
    </div>

    <div class="footer">
        <p>This is a notification that a contact form was submitted on your website (<a href="[_site_url]">[_site_title]</a>).</p>
    </div>
</div>

</body>
</html>