javascriptphphtmlemaildynamic

How to email a dynamic block of HTML code?


I am wondering if there is any way to send a block of HTML code to an email address. I have a variable that is set in an external JavaScript file named "sum" and I am calling on that variable in my html code, therefore one part of the html block is being dynamically populated. I cannot figure out how to email this the normal php way so I'm just wondering if I could just send the entire block of HTML code to an email address.

Here is the entire block of HTML code I would like to send:

<div class="select-location-page">
      <h2>Where should we meet you?</h2>
      <p class="location-sub-header">Fill out this form and we will meet you within 1 hour!</p>


      <form action="../mail.php" method="POST" class="location-form">

            <div class="device-details">
              <h2>Device: iPhone5</h2>
              <h2>Repair Cost: $<span id="result">0</span></h2>
            </div>

            <input name="name" type="text" id="name" placeholder="Name" maxlength="20">
            <input name="number" type="text" id="number" placeholder="Number" maxlength="15">
            <input name="address" type="text" id="address" placeholder="Address" maxlength="40">
            <input name="city" type="text" id="city" placeholder="City" maxlength="20">
            <input name="zip" type="text" id="state" placeholder="Zip" maxlength="20">

            <input name="device" type="hidden" id="device" value="iPhone5" maxlength="20">


            <div class="submit-btn">
                <input type="submit"  value="Submit Request" />
            </div>

      </form>

      <script>
        document.getElementById("result").innerHTML = localStorage.getItem("sum");
      </script>

  </div>

Here is the PHP file I tried to create, all of it works except the repair cost (I've tried declaring a PHP variable in the HTML code and then putting it in the mail.php file but it did not work):

<?php
$name = $_POST['name'];
$number = $_POST['number'];
$address = $_POST['address'];
$city = $_POST['city'];
$zip = $_POST['zip'];
$device = $_POST['device'];
$formcontent=" From: $name \n number: $number \n Address: $address \n City: $city \n Zip $zip \n Device: $device \n Repair Cost: (need this to work)";
$recipient = "[email protected]";
$subject = "Device Repair Request";
$mailheader = "From: $name \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
header('Location: thankyou.html');
?>

What can I try next?


Solution

  • (Consult my Edit below)

    You can use output buffering to capture the form and use a full http call for the action and send as HTML.

    Sidenote: Be sure to change all instances example.com to your server address.

    Example:

    <?php 
    
    ob_start();
    
    echo '
    
          <form action="http://www.example.com/mail.php" method="POST" class="location-form">
    
                <div class="device-details">
                  <h2>Device: iPhone5</h2>
                  <h2>Repair Cost: $<span id="result">0</span></h2>
                </div>
    
                <input name="name" type="text" id="name" placeholder="Name" maxlength="20">
                <input name="number" type="text" id="number" placeholder="Number" maxlength="15">
                <input name="address" type="text" id="address" placeholder="Address" maxlength="40">
                <input name="city" type="text" id="city" placeholder="City" maxlength="20">
                <input name="zip" type="text" id="state" placeholder="Zip" maxlength="20">
    
                <input name="device" type="hidden" id="device" value="iPhone5" maxlength="20">
    
    
                <div class="submit-btn">
                    <input type="submit"  value="Submit Request" />
                </div>
    
          </form>
    
    ';
    
    $output = ob_get_contents();
    ob_end_clean();
    
    $to = "[email protected]";
    $from = "[email protected]";
    
    $subject = "Form submission";
    
    $message = $output;
    
    $headers = 'MIME-Version: 1.0' . "\r\n";
    $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
    
    $headers .= "From:" . $from;
    
    mail($to,$subject,$message,$headers);
    

    Then in your mail.php file:

    Sidenote: I left out some of the POST arrays. You'll need to add those yourself. This is merely an example of something that worked for me.

    <?php 
    
    $first_name = $_POST['name'];
    
    // The following is non-existant in your form. You can adjust to your liking.
    $message = $_POST['message']; 
    
    $to = "[email protected]";
    $from = "[email protected]";
    
    $subject = "Form submission 2";
    
    $headers = 'MIME-Version: 1.0' . "\r\n";
    $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
    
    $headers .= "From:" . $from;
    
    mail($to,$subject,$message,$headers);
    

    Footnotes:

    You may not be able to use JS here, but you can try it. I didn't use it in my test.

    You'll also have to use some form of button or link to tell people to click to send. This is an experimental answer. I will end up modifying it as soon as I can.

    References:


    Edit:

    Here's how this (new one, edited) works. (You will need to add your other POST arrays to mail.php as discussed in comments).

    Sidenote: See comments in code for some added instructions. // comment...

    • The user enters their email address (taken from a separate form).
    • If it's not empty, capture the email in a POST array.
    • If the email is not empty, capture the whole thing in the output buffer.
    • Sends the form to the user.

    New code:

    <?php 
    
    echo $form = '
    
          <form action="" method="POST" class="location-form">
    
                <input name="email_from" type="text" id="email_from">
    
                    <input type="submit" name="submit" value="Submit Request" />
    
          </form>
    
    ';
    
    if(!empty($_POST['email_from']) ){
    
    // This outputs a message to the user after entering their email, and submits.
    echo $from2 = "An email has been sent to: " . $_POST['email_from'];
    
    }
    
    $var = '
    
    <div class="select-location-page">
          <h2>Where should we meet you?</h2>
          <p class="location-sub-header">Fill out this form and we will meet you within 1 hour!</p>
    
    
          <form action="http://www.example.com/mail.php" method="POST" class="location-form">
    
                <div class="device-details">
                  <h2>Device: iPhone5</h2>
                  <h2>Repair Cost: $<span id="result">0</span></h2>
                </div>
    
                <input name="name" type="text" id="name" placeholder="Name" maxlength="20">
                <input name="number" type="text" id="number" placeholder="Number" maxlength="15">
                <input name="address" type="text" id="address" placeholder="Address" maxlength="40">
                <input name="city" type="text" id="city" placeholder="City" maxlength="20">
                <input name="zip" type="text" id="state" placeholder="Zip" maxlength="20">
    
                <input name="device" type="hidden" id="device" value="iPhone5" maxlength="20">
    
                <div class="submit-btn">
                    <input type="submit" value="Submit Request from Email" />
                </div>
    
          </form>
    
          <script>
            document.getElementById("result").innerHTML = localStorage.getItem("sum");
          </script>
    
      </div>
    
    ';
    
    if(!empty($_POST['email_from']) ){
    
      ob_start();
    
        echo $var;
    
        $output = ob_get_contents();
        ob_end_clean();
    
        $to = $_POST['email_from']; // Send to the email entered by the user
        $from = "[email protected]"; // This should be YOUR E-mail address
    
        $subject = "Form submission";
    
        $message = $output;
    
        $headers = 'MIME-Version: 1.0' . "\r\n";
        $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
    
        $headers .= "From:" . $from;
    
      mail($to,$subject,$message,$headers);
    
    
    }
    

    Again, the javascript may not work for this, so you might have to think of another way or just omit it.