The Mission
In this article we will be using JQuery to accomplish the following:
- Prevent Divi Form Submission
- Maintain Validation
- Grab Field Values
- Create a Pop-Over to HubSpot Meeting Page
- Autofill Meeting Fields and AutoSubmit
Step 01: Make sure you have a child themes directory
See this article on creating a child theme if you don’t already have one.
Step 02: Create a directory call js
Step 03: Create a file called formSubmit.js and add the following code
jQuery(function($){
$(" **InsertFormModuleID** .et_pb_contact_submit").click(function() {
//Stop Normal Function of Submit
event.preventDefault();
//Set Variables for Params
var firstName = $('#et_pb_contact_firstname_0').val();
var lastName = $('#et_pb_contact_lastname_0').val();
var email = encodeURIComponent($('#et_pb_contact_email_0').val());
// Create redirect URL
var urlParam = "**InsertMeetingLinkURL**?firstName="+firstName+"&lastName="+lastName+"&email="+email;
//Resume Divi Submission
$(".et_pb_contact_form").submit();
//Check if validation and submission successful
$(document).on('submit','**InsertFormModuleID** .et_pb_contact_form',function(){
//Open New Tab and Go To Meeting Link
window.open(urlParam);
//Refresh Form Page to Reset Form
location.reload();
});
});
});
Step 04: Enqueue the scripts
Locate the functions.php and add the code below. Remember to enter the page id in the if statement.
function formSubmit_scripts() {
if( is_page(***yourpageid***))
{
wp_enqueue_script( 'formSubmit', get_stylesheet_directory_uri() . '/js/formSubmit.js', array( 'jquery' ), null, true );
}
}
add_action( 'wp_enqueue_scripts', 'formSubmit_scripts', 100);
And that’s it!
