Recently webforms from Keap started including jQuery in the HTML embedding options. This seems to cause a conflict with the WordPress Beaver Builder plugin.
I can edit pages in Beaver Builder no problem. But when I add the Keap webform, Beaver Builder doesn’t work anymore. If I modify the Keap webform HTML and remove the jQuery script, Beaver Builder works like normal.
Does anyone know if it’s safe to remove the jQuery script from Keap’s HTML forms?
HI @Martin_Guardado ,
Possibly Keap is loading a different version of jQuery (newer/older) than Beaver Builder. Beaver Builder may need a specific version of jQuery to run and when Keap is loading a different version, the BB code is failing.
Check the source code and search for jQuery then look at the version numbers to see if they are different.
Then you can see if Keap will work on the version of jQuery BB is loading. I code my own web forms locally in WordPress rather than using the webform builder in Keap so I am not sure how you might prevent Keap from loading its version of jQuery.
My guess is a jQuery version conflict.
Sorry I don’t have a solution for you.
Aly
Hey @Alastair_Greenstreet, thanks for the tips!
I’ve looked at the source code and found that:
And I also found in the BB documentation that loading jQuery again (like in Keap webforms) is a known incompatibility.
As for preventing Keap from loading jQuery, I’m doing it by removing this line from Keap’s HTML embed code: <script type="text/javascript" src="https://jr138.infusionsoft.com/js/jquery/jquery-3.3.1.js"></script>
Anyway, I might code my own forms like you mentioned. Question: how do you link up your custom forms to Keap and campaign builder sequences?
Hi @Martin_Guardado , sorry for the delay in getting back to you.
The way you setup a campaign is by adding a “Web Form Submitted” task.
Fill in the field details you wish to capture, in this case we are using IPStack to query their IP address and location so there are a bunch of hidden fields but these can be anything you wish to capture. Plus a hidden checkbox field to protect against spam bots.
We use a JavaScript active test to determine whether or not the hidden checkbox is filled out. If it isn’t auto-completed by our page’s JavaScript then the form bumps over to Infusionsoft / Keap’s “fill out this field screen”. This blocks nearly all the spam bots for us.
The subscriber is then taken to our locally hosted thank you page.
You can see the local page code (deleted link). Just view source on the page to see the mechanics.
Hope this helps, we host all our forms locally with local thank you pages to help our Google Analytics stats on completed forms.
Aly
Just realized that the page speed optimizer tool has taken all the validation scripts and compacted them into one file so you can’t see them via view source.
Here they are anonymized on account & checkbox value “xxx” that are unique to your account and form. There are Bootstrap related form field classes, that control page formatting, these are non-standard Infusionsoft form field values you can ignore, for example <div class="col-xs-6">.
<!--Newsletter Video Tutorial-->
<div class="container" id="video-signup">
<div class="row">
<div class="col-sm-12">
<h3>Free Video Tutorial</h3>
</div>
</div>
<div class="row" id="video-signup-inner">
<!-- Do NOT defer or async calling these two scripts or ipstack_call won't run -->
<script src="/wp-content/themes/success_theme/js/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
jQuery.ajax( {
url: '/wp-admin/admin-ajax.php',
data: {
action: 'ipstack_call'
},
type: 'POST',
success: function(data) {
data = JSON.parse(data);
// Update hidden #joinForm field variable values
$('#joinForm #_City1').val(data.city);
$('#joinForm #_State1').val(data.region_code);
$('#joinForm #_PostalCode1').val(data.zip);
$('#joinForm #_Country1').val(data.country_name);
var time_zone_text = (data.time_zone.id);
$('#joinForm #_TimeZone0').val(time_zone_text);
$('#joinForm #_IPAddress').val(data.ip);/**/
// Update hidden #videoForm field variable values
$('#videoForm #_City1').val(data.city);
$('#videoForm #_State1').val(data.region_code);
$('#videoForm #_PostalCode1').val(data.zip);
$('#videoForm #_Country1').val(data.country_name);
var time_zone_text = (data.time_zone.id);
$('#videoForm #_TimeZone0').val(time_zone_text);
$('#videoForm #_IPAddress').val(data.ip);/**/
}
});
})
</script>
<div class="col-sm-12 col-md-12 col-lg-3"> <img src="/wp-content/themes/success_theme/img/video_one.jpg" class="img-responsive center-block" alt="Free Video Tutorial"/> </div>
<div class="col-sm-12 col-md-12 col-lg-3">
<h2>Learn How to Start Your Own!</h2>
</div>
<!--Form-->
<form name="videoForm" id="videoForm" accept-charset="UTF-8" action="https://xxxxx.infusionsoft.com/app/form/process/xxxxxxxxxxxxxxxxxxxxxxx" class="validate-form infusion-form" method="POST">
<input name="inf_form_xid" type="hidden" value="xxxxxxxxxxxxxxxxxxxxxxx"/>
<input name="inf_form_name" type="hidden" value="Speed Up Growth: Start a Mastermind Group Webinar"/>
<input name="infusionsoft_version" type="hidden" value="1.69.0.71"/>
<input name="inf_custom_City1" id="_City1" type="hidden" value="" />
<input name="inf_custom_State1" id="_State1" type="hidden" value="" />
<input name="inf_custom_PostalCode1" id="_PostalCode1" type="hidden" value="" />
<input name="inf_custom_Country1" id="_Country1" type="hidden" value="" />
<input name="inf_custom_TimeZone0" id="_TimeZone0" type="hidden" value="" />
<input name="inf_custom_IPAddress" id="_IPAddress" type="hidden" value="" />
<input name="inf_custom_Flag" id="_Flag" type="hidden" value="Yes" />
<div class="col-sm-12 col-md-12 col-lg-6" id="video-form">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<input id="inf_field_FirstName" name="inf_field_FirstName" type="text" placeholder="FIRST NAME" class="form-control" required aria-required="true" title="Please fill out this field."/>
</div>
<!-- end .form-group -->
</div>
<div class="col-xs-6">
<div class="form-group">
<input id="inf_field_LastName" name="inf_field_LastName" type="text" placeholder="LAST NAME" class="form-control" required aria-required="true" title="Please fill out this field."/>
</div>
<!-- end .form-group -->
</div>
<div class="col-xs-12">
<div class="form-group">
<input id="inf_field_Email" name="inf_field_Email" type="email" placeholder="BEST EMAIL ADDRESS" class="form-control" required aria-required="true" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" title="Must be formatted email@domain.com"/>
</div>
<!-- end .form-group -->
<input id="inf_option_HiddenCheckbox" name="inf_option_HiddenCheckbox" type="checkbox" value=""/>
<button type="submit" value="submit" class="btn btn-default btn-green infusion-recaptcha">Sign Up</button>
</div>
</div>
<!--end of form row-->
</div>
<!--end of form col-->
</form>
<!--end of form-->
<!-- JavaScript for WebKit (iOS & OSX) forces HTML5 validation (:invalid pseudo class) on form submit by adding .invalid class to trigger --->
<!-- https://gist.github.com/ashblue/7759368 -->
<script type="text/javascript">
function hasHtml5Validation() {
return typeof document.createElement( 'input' ).checkValidity === 'function';
}
if (hasHtml5Validation()) {
jQuery('.validate-form').submit(function(e) {
if (!this.checkValidity()) {
e.preventDefault();
jQuery(this).addClass('invalid');
} else {
jQuery(this).removeClass('invalid');
}
});
}
</script>
<!-- Confirmation Checks for Live Person Form Submission -->
<script type="text/javascript">
// On submission of either form on page
jQuery("form").submit (function() {
// Set both form values to No
jQuery("#videoForm #_Flag").val("No");
jQuery("#joinForm #_Flag").val("No");
// Test if _Flag value is set or not
if (jQuery("_Flag").val() == "Yes") {
// Do nothing if not set (means JavaScript not enabled in web browser)
return false;
}
// Set both form values
jQuery("#videoForm #inf_option_HiddenCheckbox").val("xxx");
jQuery("#videoForm #inf_option_HiddenCheckbox").prop("checked", true);
jQuery("#joinForm #inf_option_HiddenCheckbox").val("xxx");
jQuery("#joinForm #inf_option_HiddenCheckbox").prop("checked", true);
return true;
});
</script>
</div>
<script defer type="text/javascript" src="https://xxxxx.infusionsoft.com/app/timezone/timezoneInputJs?xid=xxxxxxxxxxxxxxxxxxxxxxx"></script>
</div>
<!-- end of .container -->
Thanks very much, @Alastair_Greenstreet! I really appreciate you taking the time to explain your webform set up.