SDCCS: FAQ Page

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 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"> <h3>Most Frequently Asked Questions</h3> <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-plus-circle" 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> </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 { text-transform: uppercase; font-size: 46px; color: #1590c2; border-bottom: 1px solid gold; padding-bottom: 30px; margin-bottom: 30px; } #faq-section h3 { font-family: Muli; font-size: 16px; text-transform: uppercase; font-weight: 700; } #faq-section input, #faq-section textarea { width: 100%; padding: 5px 10px; border: 1px solid #ebebeb; background-color: #fff; border-radius: 10px; } #faq-section p { font-size: 13px; margin-bottom: 0; letter-spacing: 1px; } #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: #36b154; color: #fff; 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-content { margin-top: 30px; } .faq-question.faq-question-expanded { background-color: #2ec290; } .faq-question-active { background-color: #2ec290; } #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 { position: relative; cursor: pointer; padding: 15px 40px 15px 25px; margin-top: 10px; background-color: #beeaeb; transition: 0.6s; -webkit-animation: 0.6s; } .faq-question i { float: right; color: #000; font-size: 18px; position: absolute; right: 10px; } .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 */ function faq_contact_form_submit(){ var name = jQuery('#faq-contact-form-name').val(); var email = jQuery('#faq-contact-form-email').val(); var phone = jQuery('#faq-contact-form-phone').val(); var message = jQuery('#faq-contact-form-message').val(); jQuery.post( ajaxurl, { 'action': 'faq_contact_form_submit', 'name' : name, 'email': email, 'phone': phone, 'message': message, }, function(data){ } ); } $(".faq-question").each(function(index) { var faq_question_height = $(this).outerHeight(); var faq_question_icon_height = $(this).find('i').height(); var top_offset_faq_question = faq_question_height / 2 - faq_question_icon_height / 2; $(this).find('i').css('top', + top_offset_faq_question + 'px'); }); $(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(); $('.faq-answer').css('height', '0px'); $('.faq-question').removeClass('faq-question-expanded').find('i').removeClass('fa-minus-circle').addClass('fa-plus-circle'); if ($(answer_elem).height() == targeted_height) { $(answer_elem).css('height', '0px'); $(this).removeClass('faq-question-expanded').find('i').removeClass('fa-minus-circle').addClass('fa-plus-circle'); } else { $(answer_elem).css('height', targeted_height + 'px'); $(this).addClass('faq-question-expanded').find('i').removeClass('fa-plus-circle').addClass('fa-minus-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);