Skip to content

Instantly share code, notes, and snippets.

@tomazzaman
Last active March 31, 2021 06:30
Show Gist options
  • Save tomazzaman/7681c9ced7f0aa306a86 to your computer and use it in GitHub Desktop.
Save tomazzaman/7681c9ced7f0aa306a86 to your computer and use it in GitHub Desktop.
Simple WordPress Optin form with CURL support

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

See the tutorial here: How to build your own WordPress email form

<?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
}
}
<?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' );
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();
});
});
/*--------------------------------------------------------------
# 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment