<html> <head> <title>Emailer</title> <!-- Meta Tags --> <meta charset="UTF-8"> <meta name="robots" content="index,follow"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="format-detection" content="telephone=no"> <meta name="description" content="Fill out this form to send email"> <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="style.css"> <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script> <script src="script.js" defer></script> </head> <body> <div class="wrapper"> <h2 class="mb-3">Send Email</h2> <h4 id="result" style="color:red;"></h4> <form id="emailForm"> <!-- Input type text --> <div class="form-group row "> <label for="pass" class="col-sm-1 col-form-label text-right">Password</label> <div class="col-sm-11"> <input type="password" class="form-control form-control-sm" name="pass" id="pass" placeholder="Password" required> </div> </div> <!-- Input type text --> <div class="form-group row "> <label for="email" class="col-sm-1 col-form-label text-right">From</label> <div class="col-sm-11"> <input type="email" class="form-control form-control-sm" name="from_email" id="from_email" placeholder="from@place.com" required> </div> </div> <!-- Input type text --> <div class="form-group row "> <label for="input_id_3" class="col-sm-1 col-form-label text-right">To</label> <div class="col-sm-11"> <input type="email" class="form-control form-control-sm" name="to_email" id="to_email" placeholder="to@place.com" required> </div> </div> <!-- columns --> <div class="form-group row"> <label class="col-sm-1 col-form-label text-right"></label> <div class="col-sm-11"> <div class="header-row"> <!-- The first header/value/delete form will be added dynamically when you click "Add Header" --> </div> </div> </div> <!-- button --> <div class="form-group row"> <label for="button_id_8" class="col-sm-1 col-form-label text-right"></label> <div class="col-sm-11"> <input type="hidden" id="headerCount" name="headerCount" value="0"> <button type="button" class="btn btn-secondary btn-sm" id="addHeaderButton">Add Header</button> </div> </div> <!-- Input type file --> <div class="form-group row "> <label for="attachment" class="col-sm-1 col-form-label text-right">File</label> <div class="col-sm-11"> <div class="custom-file"> <input type="file" class="custom-file-input" name="attachment" id="attachment"> <label class="custom-file-label form-control form-control-sm" for="attachment">Choose File</label> </div> </div> </div> <!-- Input type text --> <div class="form-group row "> <label for="input_id_3" class="col-sm-1 col-form-label text-right">Subject</label> <div class="col-sm-11"> <input type="text" class="form-control form-control-sm" name="subject" id="subject" placeholder="summary of email" required> </div> </div> <!-- columns --> <div class="form-group row content-form"> <label class="col-sm-1 col-form-label text-right">Content</label> <div class="col-sm-11"> <!-- nav options --> <ul class="nav nav-tabs mb-3 shadow-sm" id="pills-tab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="pills-plain-tab" data-toggle="tab" href="#pills-plain" role="tab" aria-controls="pills-plain" aria-selected="true">Plain</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-html-tab" data-toggle="tab" href="#pills-html" role="tab" aria-controls="pills-html" aria-selected="false">HTML</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-render-tab" data-toggle="tab" href="#pills-render" role="tab" aria-controls="pills-render" aria-selected="false">Render</a> </li> </ul> <!-- content --> <div class="tab-content" id="pills-tabContent p-3"> <!-- 1st card --> <div class="tab-pane fade show active" id="pills-plain" role="tabpanel" aria-labelledby="pills-plain-tab"> <div class="col-md-12 mb-3"> <textarea class="form-control" rows="8" name="plaintext_content" id="plaintext_content" placeholder="email content goes here..." required></textarea> </div> </div> <!-- 2nd card --> <div class="tab-pane fade" id="pills-html" role="tabpanel" aria-labelledby="pills-html-tab"> <div class="col-md-12 mb-3"> <textarea class="form-control" rows="8" name="html_content" id="html_content" placeholder="<html>..." ></textarea> </div> </div> <!-- 3nd card --> <div class="tab-pane fade third" id="pills-render" style="height:auto; min-height:auto" role="tabpanel" aria-labelledby="pills-render-tab"> <div class="col-md-12 mb-3"> <iframe class="form-control resizable-iframe" style="height:auto; min-height:auto" id="iframe_id"></iframe> </div> </div> </div> </div> </div> <!-- button --> <div class="form-group row mt-auto"> <label for="submit" class="col-sm-1 col-form-label text-right"></label> <div class="col-sm-11"> <button type="button" class="btn btn-primary btn-block btn-sm" name="submit" id="submit" onclick="submitForm()">Send</button> </div> </div> </form> </div> </body> </html>