How to get info from a rectangle and send it to an email in html

I am making a form that emails information. I am new to HTML and I am trying to make a rectangle area to take the information from the user and then send it to specified email. I checked similar posts and I had learned how to do it with PHP and form action.

But I can not make the ‘rectangle area’ an ‘input’. The problem is with my HTML part so I didn’t include the CSS part.

The problem is neither the rectangle area nor the submit button works. I can not give the functionality. Here is what I tried:

I opened form action tag at the beginning of the information area in my HTML file:

<form action="mail_handler.php" method="post" name="form" class="form-box">
    <div id="WriteToUs">
        <span>Write to Us!</span>
    </div>
    <svg class="EnterMessage">
        
        <rect id="EnterMessage" rx="44" ry="44" x="0" y="0" width="589" height="324">
        <textarea name="msg" class="EnterMessage" placeholder="Enter Your Message Here..." required></textarea>
        </rect>
    </svg>
    <svg input type="submit" name="submit" value="Send" class="Submit_BTN">
        <rect id="Submit_BTN" rx="23.5" ry="23.5" x="0" y="0" width="173" height="47">
        </rect>
    </svg>
    <div id="SUBMIT">
        <span>SUBMIT</span>
    </div>
    <svg input type="email" name="email" class="Enter_Ur_Email_Field" placeholder="Enter Your Email" required >
        <rect id="Enter_Ur_Email_Field" rx="29.5" ry="29.5" x="0" y="0" width="589" height="59">
        </rect>
    </svg>
    <svg input type="text" name="name" class="Enter_Ur_Name_Field" placeholder="Enter Your Name" required >
        <rect id="Enter_Ur_Name_Field" rx="29.5" ry="29.5" x="0" y="0" width="589" height="59">
        </rect>
    </svg>
    <div id="Enter_your_name">
        <span>Enter your name</span>
    </div>
    <div id="Enter_your_e-mail">
        <span>Enter your e-mail</span>
    </div>
    <div id="Enter_your_meassage">
        <span>Enter your meassage</span>
    </div>
</form>

And here is my PHP file:

<?php
    if(isset($_POST['submit'])){
        $name=$_POST['name'];
        $email=$_POST['email'];
        $msg=$_POST['msg'];

        $to='[email protected]'; // my email 
        $subject='Form Submission';
        $message="Name :".$name."n"."Wrote the following :"."nn".$msg;
        $headers="From: ".$email;

        if(mail($to, $subject, $message, $headers)){
            echo "<h1>Sent Successfully! Thank you"." ".$name.", We will contact you shortly!</h1>";
        }
        else{
            echo "Something went wrong!";
        }
    }
?>

strong text

Answer

You are using SVG. That’s why your code won’t work. It should be:

<form action="mail_handler.php" method="post" name="form" class="form-box">
  <div id="WriteToUs">
    <span>Write to Us!</span>
  </div>
  <div class="EnterMessage">

    <!--<rect id="EnterMessage" rx="44" ry="44" x="0" y="0" width="589" height="324"> Not needed-->
    <textarea name="msg" class="EnterMessage" placeholder="Enter Your Message Here..." required></textarea>
    <!--</rect>-->
    <!--</svg>-->

    <!--</rect>-->
    </svg>
    <!-- <div id="SUBMIT">
        <span>SUBMIT</span>
    </div>-->
    <br/>
    <input type="email" name="email" class="Enter_Ur_Email_Field" placeholder="Enter Your Email" required><br/>
    <!-- <rect id="Enter_Ur_Email_Field" rx="29.5" ry="29.5" x="0" y="0" width="589" height="59">
        </rect>
    </svg>-->
    <input type="text" name="name" class="Enter_Ur_Name_Field" placeholder="Enter Your Name" required>
    <input type="submit" name="submit" value="Submit" class="Submit_BTN">
    <!--<rect id="Enter_Ur_Name_Field" rx="29.5" ry="29.5" x="0" y="0" width="589" height="59">
        </rect>
    </svg>-->
    <!--<div id="Enter_your_name">
        <span>Enter your name</span>
    </div>
    <div id="Enter_your_e-mail">
        <span>Enter your e-mail</span>
    </div>
    <div id="Enter_your_meassage">
        <span>Enter your message</span>-->
  </div>
</form>

You tried to use SVG for your inputs. SVG is for icons only.

Leave a Reply

Your email address will not be published. Required fields are marked *