Page Template: FAQ

Documentation:

The FAQ Page Template allows for the user to add/remove questions and answers as well as filter through them with a search functionality. It also comes with a contact form to send inquiries via email.

This FAQ page template requires ACF Pro: JSON Import code

Updated (March 2nd, 2017): Changed out jQuery for $, updated for SASS variables

HTML:

<?php /* Template Name: Page - FAQ */ ?> <?php get_header(); ?> <?php get_template_part('template-parts/inner-masthead') ?> <div class="container"> <div id="content" class="clearfix row"> <div id="main" class="col-md-8 clearfix" role="main"> <?php get_template_part( 'breadcrumb' ); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?> role="article" itemscope itemtype="http://schema.org/BlogPosting"> <section class="page-content entry-content clearfix" itemprop="articleBody"> <!-- FAQ --> <div id="faq-section"> <div id="faq-header"> <h1>Frequently Asked Questions</h1> <div id="faq-search-wrapper"> <input id="faq-search" type="text" placeholder="Search for answers"> <i class="fa fa-search"></i> </div> </div> <div id="faq-content"> <div id="faq-qa"> <?php if( get_field('faq_question_answer') ): while( has_sub_field('faq_question_answer') ): ?> <div class="faq-qa-single"> <div class="faq-question"> <p><?php the_sub_field('faq_question'); ?> <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></p> </div> <div class="faq-answer"> <div class="faq-answer-inner"> <?php the_sub_field('faq_answer'); ?> </div> </div> </div> <?php endwhile; endif; ?> </div> <div id="faq-contact-form"> <h3>Have a more specific question? Contact us</h3> <div class="faq-input-row"> <div class="faq-input-wrapper faq-input-half"> <label for="name">Name</label><br> <input id="faq-contact-form-name" name="name" type="text"> </div> <div class="faq-input-wrapper faq-input-half"> <label for="email">Email</label><br> <input id="faq-contact-form-email" name="email" type="text"> </div> </div> <div class="faq-input-row"> <div class="faq-input-wrapper faq-input-half"> <label for="phone">Phone</label><br> <input id="faq-contact-form-phone" name="phone" type="text"> </div> </div> <div class="faq-input-row"> <div class="faq-input-wrapper faq-input-full"> <label for="question">How can we help?</label><br> <p>Briefly tell us about your needs.</p> <textarea id="faq-contact-form-question" rows="4" name="question"></textarea> </div> </div> <div class="faq-input-row"> <div class="faq-input-wrapper faq-input-full"> <button onclick="faq_contact_form_submit()" id="faq-contact-form-submit">Send</button> </div> </div> </div> </div> </div> <?php the_content(); ?> </section> <!-- end article section --> <footer> <?php the_tags('<p class="tags"><span class="tags-title">' . __("Tags","bonestheme") . ':</span> ', ', ', '</p>'); ?> </footer> <!-- end article footer --> </article> <!-- end article --> <?php endwhile; ?> <?php else : ?> <article id="post-not-found"> <header> <h1><?php _e("Not Found", "bonestheme"); ?></h1> </header> <section class="post_content"> <p><?php _e("Sorry, but the requested resource was not found on this site.", "bonestheme"); ?></p> </section> <footer> </footer> </article> <?php endif; ?> </div> <!-- end #main --> <?php get_sidebar(); ?> </div> <!-- end #content --> </div> <!-- end .container --> <?php get_footer(); ?>

CSS:

/* FAQ */ #faq-section h1, #faq-section h3 { font-family: $header-font-stack; } #faq-section input, #faq-section textarea { width: 100%; padding: 5px 10px; background-color: #ebebeb; } #faq-section p { font-size: 13px; margin-bottom: 5px; } #faq-section #faq-contact-form p { font-size: 12px; margin-bottom: 5px; } #faq-section button { padding: 10px 75px; border: none; text-transform: uppercase; letter-spacing: 1px; background-color: $primary-color; color: $primary-font-color; margin: 0 auto; display: block; } input#faq-search { padding: 10px 15px; } #faq-search-wrapper { position: relative; } #faq-search-wrapper i { color: #a1a1a0; position: absolute; top: 0; right: 0; padding: 12px 10px; } #faq-qa { margin-top: 20px; } #faq-qa.faq-search-active .faq-qa-single { display: none; } #faq-qa.faq-search-active .faq-qa-single.faq-search-match { display: block; } .faq-question { cursor: pointer; } .faq-question i { float: right; color: $primary-color; font-size: 18px; } .faq-answer { height: 0px; overflow: hidden; transition: 0.6s } .faq-answer-inner { padding: 10px 20px; } .faq-input-full label[for=question] { margin: 0; } .faq-input-row, .faq-input-full { width: 100%; float: left; } .faq-input-row { margin-bottom: 15px; } .faq-input-half { width: 50%; float: left; padding-right: 20px; } #faq-contact-form h3 { border-bottom: 1px solid #dbdbdb; padding-bottom: 20px; margin-bottom: 20px; }

JS:

// FAQ Template function faq_contact_form_submit(){ var name = $('#faq-contact-form-name').val(); var email = $('#faq-contact-form-email').val(); var phone = $('#faq-contact-form-phone').val(); var message = $('#faq-contact-form-message').val(); $.post( ajaxurl, { 'action': 'faq_contact_form_submit', 'name' : name, 'email': email, 'phone': phone, 'message': message, }, function(data){ } ); } $(document).on('keyup', '#faq-search', function(e){ var s = $(this).val(); if (s) { $('#faq-qa').addClass('faq-search-active'); $('.faq-qa-single').removeClass('faq-search-match'); $('.faq-qa-single:contains("' + s + '")').addClass('faq-search-match'); } else { $('#faq-qa').removeClass('faq-search-active'); } }); $(document).on('click', '.faq-question', function(e){ var answer_elem = $(this).siblings('.faq-answer'); var targeted_height = $(this).siblings('.faq-answer').children('.faq-answer-inner').innerHeight(); if ($(answer_elem).height() == targeted_height) { $(answer_elem).css('height', '0px'); $(this).find('i').removeClass('fa-times-circle') $(this).find('i').addClass('fa-chevron-circle-down'); } else { $(answer_elem).css('height', targeted_height + 'px'); $(this).find('i').removeClass('fa-chevron-circle-down'); $(this).find('i').addClass('fa-times-circle'); } });

PHP:

function faq_contact_form_submit() { // AJAX data $name = $_POST['name']; $email = $_POST['email']; $phone = $_POST['phone']; $submitted_message = $_POST['message']; // Setting up Email $website_name = get_option( 'blogname' ); $admin_email = 'mgpelloni@gmail.com'; $website_url = $_SERVER['SERVER_NAME']; $website_url = str_replace("www.","", $website_url); $from = $website_name . ' <wordpress@' . $website_url . '>'; $message="Contact Form: FAQ:\r\n \r\nName: " .$name. "\r\n" . "E-Mail: " .$email. "\r\n" . "Phone: " .$phone. "\r\n" . "Message: " .$submitted_message. "\r\n"; mail($admin_email, "Contact Form: FAQ", $message, "From:".$from); // exit; wp_die(); } add_action('wp_ajax_nopriv_faq_contact_form_submit', 'faq_contact_form_submit', 999); add_action('wp_ajax_faq_contact_form_submit', 'faq_contact_form_submit', 999);