为错误和成功消息设置样式,并将电子邮件发送到邮箱但没有信息

Very new to programming/webdev, trying to create a working contact form and am using one done by John Morris which he shows in this video. https://www.youtube.com/watch?v=OOAQ986HmzA.

When testing out the errors/success messages they are not being shown with styling.

My other problem is that I get an email from Bluehost saying the following: "There are no parts that can be shown inline."

Could this be a security or server side issue?

Once again I am very new to this stuff, so I don't exactly know what to look for.

Any help is greatly appreciated.

Have rewatched and checked the code against that in the lesson. I have left the php in the index file. not sure if I should create a different file for the mailer.

index.php

<section class="section-contact" id="contact">
            <div class="row">
                <h2>We're happy to hear from you</h2>                
            </div>
            <?php if  ( ! empty( $errors ) ) : ?>
            <div>
                <p class="errors"><?php echo implode( '</p><p class="errors">', $errors); ?></p>
            </div>
            <?php elseif ( $sent ) : ?>
            <div class="form-messages success">
                <p>Your message was sent. We'll be in touch.</p>
            </div>
            <?php endif; ?>
            <div class="row">
                <form method="post" action="index.php" class="contact-form">
                    <div class="row">                        
                        <div class="col span-1-of-3">
                            <label for="name">Name</label>
                        </div>
                        <div class="col span-2-of-3">
                            <input type="text" name="name" id="name" placeholder="Your name" value="<?php echo isset( $fields['name'] ) ? _e( $fields['name'] ) : '' ?>">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col span-1-of-3">
                            <label for="email">Email</label>
                        </div>
                        <div class="col span-2-of-3">
                            <input type="email" name="email" id="email" placeholder="Your email" value="<?php echo isset( $fields['email'] ) ? _e( $fields['email'] ) : '' ?>">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col span-1-of-3">
                            <label>Message</label>
                        </div>
                        <div class="col span-2-of-3">
                            <textarea name="message" placeholder="Your question" <?php echo isset( $fields['message'] ) ? _e( $fields['message'] ) : '' ?>></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col span-1-of-3">
                            <label for="human">*What is 2+2? (Anti-spam)</label>
                        </div>
                        <div class="col span-2-of-3">
                            <input type="text" name="human" placeholder="Your answer">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col span-1-of-3">
                            <label>&nbsp;</label>
                        </div>
                        <div class="col span-2-of-3">
                            <input name="submit" type="submit" value="Send it!">
                        </div>
                    </div>
                </form>
            </div>
        </section>

css

/* ----------------------------------------------- */
/* FORM */
/* ----------------------------------------------- */

.contact-form {
    width: 60%;
    margin: 0 auto;
}

input[type=text],
input[type=email],
select,
textarea {
    width: 100%;
    padding: 7px;
    border-radius: 3px;
    border: 1px solid #ccc;
}

textarea {
    height: 100px;
}

input[type=checkbox] {
    margin: 10px 5px 10px 0;
}

*:focus {outline: none;}

.form-messages {
    width: 60%;
    margin: 0 auto;
    padding: 10px;
    border-radius: 3px;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
}

.success { background-color: #32ad3b; }

.errors { 
    width: 60%;
    margin: 0 auto;
    padding: 10px;
    border-radius: 3px;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
    background-color: #eb5151
}

mailer section

<?php
//Helper functions. Likely place in external file
function _e( $string ) {
    return htmlentities( $string, ENT_QUOTES, 'UTF-8', false );
}

/* ------------------------------------------------
    STUFF YOU NEED TO CHANGE FOR YOUR SPECIFIC FORM
--------------------------------------------------*/

// Specify the foprm field names your form will accept
$whitelist = array( 'name', 'email', 'message' );

// Set the email address submssions will be sent to
$email_address = 'carlos@carlosygoadesigns.com';

// Set the subject line for the email messages
$subject = 'New Contact Form Submission';

/* ----------------------------------------------------
    END STUFF YOU NEED TO CHANGE FOR YOUR SPECIFIC FORM
------------------------------------------------------*/


// Instantiate variables we'll use
$errors = array();
$fields = array();

// Check for form submission
if ( ! empty( $_POST ) ) {

    // Validate maths
    if ( intval( $_POST['human'] ) !== 4 ) {
        $errors[] = 'Please check your maths.';
    }

    // Validate email address
    if ( ! empty( $_POST['email'] ) && ! filter_var( $_POST['email'], FILTER_VALIDATE_EMAIL ) ) {
        $errors[] = 'That is not a vaild email address';
    }

    // Perform filed whitelisting
    foreach ( $whitelist as $key ) {
        $fileds[$key] = $_POSt[$key];
    }

    // Validate field data
    foreach ( $fields as $field => $data ) {
        if ( empty( $data ) ) {
            $errors[] = 'Please enter your ' . $field;
        }
    }

    // Check and process
    if ( empty( $errors ) ) {
        $sent = mail( $email_address, $subject, $fields['message'] );
    }
}
?>

Thanks for any help, once again very new to this so I am really not sure what I am looking for.

This piece of code contains two errors:

// Perform filed whitelisting
foreach ( $whitelist as $key ) {
    $fileds[$key] = $_POSt[$key];
}

Replace it with:

// Perform filed whitelisting
foreach ($whitelist as $key) {
    $fields[$key] = $_POST[$key];
}

That will fill the $fields array.