Home > Software engineering >  How to make leave message box on website work?
How to make leave message box on website work?

Time:01-02

Good morning everybody and happy new year! :)

I have recently started tinkering with HTML using a free website template.

This one to be exact: https://html5up.net/strata

And i have been trying to find a way to make this exact "leave message" box work, but i have yet to discover the whole logic behind this specific mechanism.

https://prnt.sc/25kej6d

And this is the HTML code chunk (Using Visual Studio Code)

https://prnt.sc/25kf7s2

<!-- Three -->
<section id="three">
    <h2>Get In Touch</h2>
    <p><h4>Email me with any questions or inquiries. I would be happy to answer all your questions & set up a meeting with you.</h4></p>
    <div >
        <div >
            <form method="post" action="#">
                <div >
                    <div ><input type="text" name="name" id="name" placeholder="Name" /></div>
                    <div ><input type="email" name="email" id="email" placeholder="Email" /></div>
                    <div ><textarea name="message" id="message" placeholder="Message" rows="4"></textarea></div>
                </div>
            </form>
            <ul >
                <li><input type="submit" value="Send Message" /></li>

CodePudding user response:

A basic example of using the form to submit an enquiry to a PHP script that processes the data and attempts to send an email. The below firstly associates the button to the form using the form attribute and the PHP attempts to use the mail function which may or may not be available on your webhost.

<section id="three">
    <h2>Get In Touch</h2>
    <p><h4>Email me with any questions or inquiries. I would be happy to answer all your questions & set up a meeting with you.</h4></p>
    <div >
        <div >
        
            <form name="mailer" method="post" action="/path/to/mailhandler.php">
                <div >
                    <div ><input type="text" name="name" id="name" placeholder="Name" /></div>
                    <div ><input type="email" name="email" id="email" placeholder="Email" /></div>
                    <div ><textarea name="message" id="message" placeholder="Message" rows="4"></textarea></div>
                </div>
                
            </form>
            <ul >
                <!-- associate the button to the form using the `form` attribute -->
                <li><input form="mailer" type="submit" value="Send Message" /></li>
            </ul>

And the mail handling target script specified in the action attribute of the form.

<?php

    # mailhandler.php

    if( $_SERVER['REQUEST_METHOD']=='POST' && isset(
        $_POST['name'],
        $_POST['email'],
        $_POST['message']
    )){
        
        ob_clean();
        
        $args=array(
            'name'      =>  FILTER_SANITIZE_ENCODED,
            'email'     =>  FILTER_SANITIZE_EMAIL,
            'message'   =>  FILTER_SANITIZE_ENCODED
        );
        
        $_POST=filter_input_array( INPUT_POST, $args );
        extract( $_POST );
        
        $to='[email protected]';
        $subject='An enquiry';
        $headers=array(
            'From'      =>  $email
        );
        $message=array(
            'Sender'    =>  $email,
            'Name'      =>  $name,
            'Message'   =>  $message
        );
        
        
        $status=@mail( $to, $subject, implode('\r\n',$message), implode('\r\n',$headers) );
        exit( header( sprintf('Location: ?mailsent=%s',$status ) ) );
    }
?>

This is a super-simple example and should probably not be used without modifications & enhancements but might illustrate what you need to do.

  • Related