• Register
12,140 points
9 5 2

In this tutorial we are going to solve a problem, how to code html to send email with attachment.we have some attributes that tells us about the functioning code.

 

  1. File validation
  2. File upload handling

File validation


 We have used HTML validations. Basically, those are Name and Email we require these.


Syntax

<input type="email" class="form-control" id="email" name="email" required>


Similarly, for messaging field we have used (textarea) with the maximum limit of 6000 characters 
Syntax


<textarea  name="Message"  maxlength="6000" required></textarea>

 

File Upload Handling


For adding upload support we need to use form tag; enctype=”multipart/form-data” by doing this we can add upload fields using input of type ‘file’
Syntax
 

<input type="file" name="image"  required />

Program:
 

div class="row">
    <div class="col-md-6 col-md-offset-3">
        <h2>Contact Us</h2> Got a question ? Feedback? Awesome!
        <p>
            Send your message in the form below and we will get back to you as early as possible.
        </p>
        <form role="form" method="post" id="reused_form" enctype="multipart/form-data"  >
            <div class="form-group">
                <label for="name">
                    Name:</label>
                <input type="text" class="form-control"
                id="name" name="name"  required maxlength="50">

            </div>
            <div class="form-group">
                <label for="email">
                    Email:</label>
                <input type="email" class="form-control"
                id="email" name="email" required maxlength="50">
            </div>
            <div class="form-group">
                <label for="name">
                    Message:</label>
                <textarea class="form-control" type="textarea" name="message"
                id="message" placeholder="Your Message Here"
                maxlength="6000" rows="7"></textarea>
            </div>

                        <div class="form-group">
                <label for="name">
                    Image Upload:</label>
                <input type="file" class="form-control" id="image" name="image"  required>
            </div>




            <button type="submit" class="btn btn-lg btn-success pull-right" id="btnContactUs">Post It! →</button>

        </form>
        <div id="success_message" style="width:100%; height:100%; display:none; ">
            <h3>Sent your message successfully!</h3>
        </div>
        <div id="error_message"
        style="width:100%; height:100%; display:none; ">
            <h3>Error</h3>
            Sorry there was an error sending your form.

        </div>

 

Output:

image