WordPress image

How to Make an email Feedback form by WordPress?

In this article, you will come to know how to make an email feedback form by WordPress! Let’s start.

At first, create an HTML static form in this way.

<form action="" class="envy-doc-email-form form-container" name="frm" method="post" style="display:none;">
        <h3 class="envy-doc-email-form-heading"><?php echo esc_html__('How can we help you?', 'envy-doc'); ?></h3>
        <input class="envy-doc-email-form-input" value="" name="uname" id="uname" type="text" placeholder="Enter Full Name" required>
        <input class="envy-doc-email-form-input" value="" name="mailid" id="mailid" type="text" placeholder="Enter Email" required>  
        <input class="envy-doc-email-form-input" value="" name="subject" id="subject" type="text" placeholder="Enter Subject" required>     
        <textarea value="" name="message" id="message" class="envy-doc-email-form-input" placeholder="Message"></textarea>
        <button type="button" class="envy-doc-email-form-cancel"><?php echo esc_html__( 'Cancel', 'envy-doc' ); ?></button>
        <button type="submit" name="sub" id="sub" class="envy-doc-email-form-save"><?php echo esc_html__( 'Send', 'envy-doc' ); ?></button>
    </form>

If you want, you can do this by the pop-up window. Just add this div before or after the form element.

<div id="backModal" class="modal-backdrop fade show" style="display: none;"></div>

Write PHP function for form validation, and send data to the email.

if( isset( $_POST['sub'] ) ) {
    $uname = sanitize_text_field( $_POST['uname'] ); 
    $mailid = sanitize_email( $_POST['mailid'] );
    $subject = sanitize_text_field( $_POST['subject'] );
    $message = sanitize_textarea_field( $_POST['message'] );
    mail($uname, $mailid, $message);
        if( mail( $uname, $mailid, $subject, $message ) ) {     
            $to = $envy_doc_email_address_new;
            $subject = $subject;
            $body = 'Name: '.$uname.'<br/>'.'Email: '.$mailid.'<br/>'.'Subject: '.$subject.'<br/>'.'Message: '.$message;
            $headers = array('Content-Type: text/html; charset=UTF-8');
                wp_mail( $to, $subject, $body, $headers );
            ?>
            <div id="backModal" class="modal-backdrop fade show"></div>
            <form action="" class="envy-doc-email-form form-container">
                <h3 class="envy-doc-email-form-heading"><?php echo esc_html__('Thanks for your feedback.', 'envy-doc'); ?></h3>
                <?php echo esc_html__("It has been sent.", "envy-doc"); ?><br/><br/>
                <button type="button" class="envy-doc-email-form-cancel"><?php echo esc_html__( 'Close', 'envy-doc' ); ?></button>
            </form>
        <?php }
        else { ?>
            <div id="backModal" class="modal-backdrop fade show"></div>
            <form action="" class="envy-doc-email-form form-container">
                <h3 class="envy-doc-email-form-heading"><?php echo esc_html__('There are something error.', 'envy-doc'); ?></h3>
                <?php echo esc_html__("Feedback sending failed. Try again.", "envy-doc"); ?><br/><br/>
                <button type="button" class="envy-doc-email-form-cancel"><?php echo esc_html__( 'Close', 'envy-doc' ); ?></button>
            </form>
        <?php } 

$to = $envy_doc_email_address_new – will be user email address.

Custom CSS for email form:

.email-form-popup {
    cursor: pointer;
    text-decoration: underline;
    color: #cd2653;
}
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    background-color: #000;
    margin-top: 0 !important;
}
.modal-backdrop.show {
    opacity: .5;
}
.envy-doc-email-form {
    z-index: 9999;
    position: fixed;
    top: 10%;
    left: 35%;
    background-color: white;
    width: 400px !important;
    padding: 17px;
    border-radius: 5px;
    text-align: center;
}
.envy-doc-email-form-save {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
    border: 1px solid;
    cursor: pointer;
    display: inline;
    padding: 12px 30px;
    margin-top: 10px;
    margin-left: 5px;
    font-size: 15px;
    font-weight: 400;
}
.envy-doc-email-form-cancel {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
    border: 1px solid;
    cursor: pointer;
    display: inline;
    padding: 12px 30px;
    margin-top: 10px;
    margin-right: 5px;
    font-size: 15px;
    font-weight: 500;
}
.envy-doc-email-form-input {
    margin-bottom: 10px !important;
    width: 100%;
}
.envy-doc-email-form-heading {
    padding: 0 !important;
    margin-top: 10px !important;
    margin-bottom: 25px !important;
    font-size: 25px;
    font-weight: 400;
    line-height: 25px;
}

Custom JS for email form:

$(document).ready(function(){
        $('.email-form-popup').click(function(){
            $('.envy-doc-email-form').slideDown();
            $('.modal-backdrop').fadeIn();
        });
        $('.envy-doc-email-form-cancel').click(function(){
            $('.envy-doc-email-form').slideUp();
            $('.modal-backdrop').fadeOut();
        });
        $('#comments').hide();
    });

After finished all step you get an HTML form. Customers can submit their feedback, and the feedback will be on the user’s email.

That’s all! If you have any queries, then let me know in the comment section.

Bonus: I recommend few exciting features rich WordPress themes for your next projects! Check them out-

Puva – Click to View

Edali – Click to View

Milian – Click to View

Leave a Reply

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