Divi Forms and HubSpot Meetings

Jun 28, 2019 | Development, jQuery | 0 comments

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!

Cool Logo Easter Egg

Cool Logo Easter Egg

In this article we will go over the steps to add a company branding package to your logo. This is perfect for partners and affiliates to quickly download and updated logo and branding guide.This will take you through a wordpress installation.
Make It SNOW!

Make It SNOW!

Tis The Season! … Get your site ready for the Holidays. In this article we will go over the steps to add a falling snow effect to your wordrpess website.