README.md

Simple Optin form example for WordPress

This is a simplified showcase of how you can easily build your own Optin form in WordPress.

It can connect to any API that supports cURL (most of them do). There is no error reporting implemented. It uses exit intent detection script called Ouibounce, which needs to be enqueued in your functions.php

class.optin-form.php

<?php

class Optin_Form {

  public function __construct() {
    add_action( 'wp_ajax_process_optin_submission', array( $this, 'process' ) );
    add_action( 'wp_ajax_nopriv_process_optin_submission', array( $this, 'process' ) );
  }

  public function process() {
    if( ! wp_verify_nonce( $_POST['nonce'], 'ouibounce' ) )
      return;

    $data = array(
      'email' => $_POST['email']
    );

    $curl = curl_init();
    curl_setopt_array( $curl, array(
      CURLOPT_HTTPHEADER => array( 'Content-Type: application/json', 'Accept: application/json' ), // -H parameter
      CURLOPT_RETURNTRANSFER => 1, // so that we can catch the response in a variable
      CURLOPT_URL => 'http://reqr.es/api/users', // The endpoint
      CURLOPT_POST => 1, // -X POST
      CURLOPT_USERPWD =>  'app_id:api_key', // -u parameter (not always needed)
      CURLOPT_POSTFIELDS => json_encode( $data ) // because we set Content-Type to JSON
    ) );

    $resp = curl_exec( $curl );
    curl_close( $curl );
    print_r( $resp );
    wp_die();

  }

  public function render() { ?>
    <div class="modal-cover" id="js-optin-wrap">
      <div class="modal">
        <div id="js-optin-step1">
          <h1>Hey there!</h1>
          <p>Want to be <strong>awesome</strong>? Subscribe!</p>
          <form>
            <input type="text" id="js-optin-email" placeholder="Your email" />
            <input type="submit" id="js-optin-submit" value="Sign me up!" />
          </form>
          <br />
          <a href="#" class="js-optin-close">No thanks.</a>
        </div>
        <div id="js-optin-step2" style="display:none;">
          <h1>You've been subscribed!</h1>
          <br />
          <a href="#" class="js-optin-close">Close.</a>
        </div>
      </div>
    </div>
    <?php
  }
}

functions.php

<?php

/**
 * Load Optin form class and let it render just before </body>
 */
require get_template_directory() . '/inc/class.optin-form.php';
$optin_form = new Optin_Form();
add_action( 'wp_footer', array( $optin_form, 'render' ) );

/**
 * Enqueue all the necessary scripts and set proper JavaScript variables
 */
function enqueue_ouibounce() {
  wp_enqueue_script( 'ouibounce', get_stylesheet_directory_uri() . '/js/ouibounce.js', array() );
  wp_enqueue_script( 'ouibounce-config', get_stylesheet_directory_uri() . '/js/ouibounce-config.js', array( 'jquery' ) );
  wp_localize_script( 'ouibounce-config', 'OuibounceVars', array(
    'ajaxUrl' => admin_url( 'admin-ajax.php' ),
    'nonce' => wp_create_nonce( 'ouibounce' )
  ) );
}
add_action( 'wp_enqueue_scripts', 'enqueue_ouibounce' );

ouibounce-config.js

jQuery(function($) {
  "use strict";

  ouibounce($('#js-optin-wrap')[0], {
    // Uncomment the line below if you want the modal to appear every time
    // More options here: https://github.com/carlsednaoui/ouibounce
    aggressive: true
  });

  $("#js-optin-submit").click(function(event) {
    event.preventDefault();

    $(this).val('Subscribing...').prop('disabled');

    var data = {
      'action': 'process_optin_submission',
      'nonce': window.OuibounceVars.nonce,
      'email': $('#js-optin-email').val()
    };

    $.post(window.OuibounceVars.ajaxUrl, data, function(response) {
      console.log('Server returned:', response);

      // Handle the response (take care of error reporting!)
      $('#js-optin-step1').hide().next('#js-optin-step2').show();
    });
  });

  $('.js-optin-close').on('click', function(event) {
    event.preventDefault();
    $('#js-optin-wrap').hide();
  });
});

style.css

/*--------------------------------------------------------------
# Modal window styles
--------------------------------------------------------------*/
.modal-cover {
  display: none;
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  padding-top: 20px;
}
/* ouibounce adds 'ouibounce-open' class on the <html> tag */
.ouibounce-open .modal-cover {
  display: block;
}

.modal {
	width: 600px;
	margin: 0 auto;
	background: #fff;
}