[HHHMParticipant]

Please help!

I’m trying to use a button on this test page (www.healthyhabitshappymoms.com/test-2/) to trigger an opt in pop up form. I can get it to work really easily if I’m only using a link, but I want it connected to a button.

I’ve pasted the javascript I’ve been given from Convertkit into the page.

The insructions say to place this code Your link text to create a pop up link.

I’m not using the button element, I’m using a raw content element with this code on the page right now Your link text it’s not triggering the pop up.

Where do I go from here?!!

Thanks!

[RupokMember]

Hi there,

Thanks for writing in! You can follow this thread – https://community.theme.co/forums/topic/how-to-trigger-lightbox-optin-form-from-a-button/

Let us know how it goes.

Cheers!

[HHHMParticipant]

That did not work 🙁

Unless I did something wrong…

[ZeshanMember]

Hi there,

Thanks for updating the thread!

Upon checking your site, there seems to be a jQuery conflict. It looks like you are adding script src tag inside Cornerstone custom JS section (see: http://prntscr.com/8qxv5z). This is what causing the conflict with lightbox. Please remove your script from Cornerstone and use this workaround:

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

After that, add following code in your child theme’s functions.php file:

// Add Code Right before footer
// =============================================================================

function custom_js_code_after_body() { 
?>
<!-- add your script here -->
<?php 
}

add_action('wp_footer', 'custom_js_code_after_body');

Now replace <!– add your script here –> with your JS code.

Hope this helps. 🙂

Thank you!

[HHHMParticipant]

I deleted that whole page and started over.

I did a raw content element and pasted this code that you gave me in it:

<div id=”my-content” style=”display:none;”>
…optin form content here…
</div>

Click Me[lightbox selector=”.lightbox-selector”]

That gives me a button that doesn’t link to anything. Can you please tell me what I need to customize to make it trigger my pop-up?

What opt-in content do I put where it says …optin form conent here…? The line of javascript? or this link I have? Your link text or something else??

I’ve nenver done this before, I basically know nothing and am learning as I go…

The new test page I have this on is http://www.healthyhabitshappymoms.com/convertkit-test/

Thanks

[HHHMParticipant]

Oops, sorry, that first code is `<div id=”my-content” style=”display:none;”>
…optin form content here…
</div>

<a href=”#my-content” class=”x-btn lightbox-selector” data-type=”inline”>Click Me[lightbox selector=”.lightbox-selector”]</a>`

And where it says ‘your link text here’ the code was <a rel="ck_modal" href="#ck_modal">Your link text</a>

[FriechModerator]

Hi There,

Sorry I’m a bit confuse, would you mind to clarify what JavaScript been given from Convertkit?

If you want an button that open an MailChimp form on a lightbox, you can place the code below on a RAW content element.

<div id="my-content" style="display:none;">
  [x_subscribe form="40"]
</div>

<a href="#my-content" class="x-btn lbx" data-type="inline">Click Me[lightbox selector=".lbx"]</a>

Where the [x_subscribe form="40"] is the shortcode of your Opt-in form.

The result would be something like this: https://db.tt/7Wjgp5j2

Hope it helps, Cheers!

[HHHMParticipant]

I’m trying to switch out my mailchimp forms for Convertkit forms. So the javascript from Convertkit is what I’m supposed to use to place the convertkit form on that page. Does that make sense?

[Paul RModerator]

Hi,

In that case, replace the shortcode [x_subscribe form=”40″] with your script from Convertkit

Thanks

[HHHMParticipant]

That did not work. Nothing happens when I click the button. Here’s the test page: http://www.healthyhabitshappymoms.com/convertkit-test/

Thanks

[ChristopherModerator]

Hi there,

Please add the following code in Customize -> Custom -> CSS :

.ck_form_container.ck_modal {
    display: block !important;
}

Hope it helps.

[HHHMParticipant]

I just did that…still nothing happens when you click the button. 🙁

[Paul RModerator]

Hi,

Try to use the html version of the form instead of the javascript.

Thanks

[HHHMParticipant]

Still nothing, this is the full code I have in the raw content box

<div id="my-content" style="display:none;">
<script src="https://app.convertkit.com/assets/CKJS4.js?v=21"></script>
<div class="ck_form_container ck_modal" id="ck_modal">
	<div class="ck_close_link">✕</div>
	
<div class="ck_form ck_vertical_subscription_form">
  <div class="ck_form_content">
      <h3 class="ck_form_title">Join the Revolution!</h3>
      <div class="ck_description">
        <span class="ck_image">
          
        </span>
          <p><p>We’re getting healthy without the gimmicks! Sign up for the FREE HHHM System Mini Course, Workout Series, and Habit of the Month!</p></p>
      </div>
  </div>

  <div class="ck_form_fields">

    <div id='ck_success_msg'  style='display:none;'>
      <p>Success! Now check your email to confirm your subscription.</p>
    </div>

    <!--  Form starts here  -->
    <form id="ck_subscribe_form" class="ck_subscribe_form" action="https://app.convertkit.com/landing_pages/4782/subscribe" data-remote="true">
      <input type="hidden" value="{&quot;form_style&quot;:&quot;full&quot;,&quot;embed_style&quot;:&quot;modal&quot;,&quot;embed_trigger&quot;:&quot;timing&quot;,&quot;scroll_percentage&quot;:&quot;70&quot;,&quot;delay_seconds&quot;:&quot;100000&quot;,&quot;display_position&quot;:&quot;br&quot;,&quot;display_devices&quot;:&quot;all&quot;,&quot;days_no_show&quot;:&quot;0&quot;,&quot;converted_behavior&quot;:&quot;show&quot;}" id="ck_form_options"></input>
      <input type="hidden" name="id" value="4782" id="landing_page_id"></input>
      <div class="ck_errorArea">
        <div id="ck_error_msg" style="display:none">
          <p>There was an error submitting your subscription. Please try again.</p>
        </div>
      </div>
      <div class="ck_control_group ck_first_name_field_group">
        <label class="ck_label" for="ck_firstNameField">First Name</label>
        <input type="text" name="first_name" class="ck_first_name" id="ck_firstNameField"></input>
      </div>
      <div class="ck_control_group ck_email_field_group">
        <label class="ck_label" for="ck_emailField">Email Address</label>
          <input type="email" name="email" class="ck_email_address" id="ck_emailField" required></input>
      </div>

      <button class="subscribe_button ck_subscribe_button btn fields" id='ck_subscribe_button'>
        Get it here!
      </button>
      <span class="ck_guarantee">
        We won't send you spam. Unsubscribe at any time.
          <a class="ck_powered_by" href="http://convertkit.com/?utm_campaign=poweredby">Powered by ConvertKit</a>
      </span>
    </form>
  </div>

 </div>

</div>

<style type="text/css">/* Layout */
  .ck_form {
  /* divider image */
	background: #fff url(data:image/gif;base64,R0lGODlhAQADAIABAMzMzP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS41LWMwMTQgNzkuMTUxNDgxLCAyMDEzLzAzLzEzLTEyOjA5OjE1ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUQ5NjM5RjgxQUVEMTFFNEJBQTdGNTQwMjc5MTZDOTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUQ5NjM5RjkxQUVEMTFFNEJBQTdGNTQwMjc5MTZDOTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxRDk2MzlGNjFBRUQxMUU0QkFBN0Y1NDAyNzkxNkM5NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxRDk2MzlGNzFBRUQxMUU0QkFBN0Y1NDAyNzkxNkM5NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAEAAAEALAAAAAABAAMAAAICRFIAOw==) repeat-y center top;
	font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
	line-height: 1.5em;
	overflow: hidden;
	color: #737877;
	font-size: 16px;
	border-top: solid 20px #3071b0;
  border-top-color: #01b8c0;
	border-bottom: solid 10px #3d3d3d;
  border-bottom-color: #016e73;
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.3);
	-moz-box-shadow: 0px 0px 5px rgba(0,0,0,.3);
	box-shadow: 0px 0px 5px rgba(0,0,0,.3);
	clear: both;
	margin: 20px 0px;
}

.ck_form, .ck_form * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#ck_subscribe_form {
  clear: both;
}

/* Element Queries — uses JS */

.ck_form_content, .ck_form_fields {
	width: 50%;
	float: left;
	padding: 5%;
}

.ck_form.ck_horizontal {
}

.ck_form_content {
	border-bottom: none;
}

.ck_form.ck_vertical {
	background: #fff;
}

.ck_vertical .ck_form_content, .ck_vertical .ck_form_fields {
	padding: 10%;
	width: 100%;
	float: none;
}

.ck_vertical .ck_form_content {
	border-bottom: 1px dotted #aaa;
	overflow: hidden;
}

/* Trigger the vertical layout with media queries as well */

@media all and (max-width: 499px) {

	.ck_form {
		background: #fff;
	}

	.ck_form_content, .ck_form_fields {
		padding: 10%;
		width: 100%;
		float: none;
	}

	.ck_form_content {
		border-bottom: 1px dotted #aaa;
	}

}

/* Content */

.ck_form_content h3 {
	margin: 0px 0px 15px;
	font-size: 24px;
	padding: 0px;
}

.ck_form_content p {
	font-size: 14px;
}

.ck_image {
	float: left;
	margin-right: 5px;
}

/* Form fields */

.ck_errorArea {
	display: none;
}

#ck_success_msg {
	padding: 10px 10px 0px;
	border: solid 1px #ddd;
	background: #eee;
}

.ck_label {
	font-size: 14px;
	font-weight: bold;
}

.ck_form input[type="text"], .ck_form input[type="email"] {
	font-size: 14px;
	padding: 10px 8px;
	width: 100%;
	border: 1px solid #d6d6d6; /* stroke */
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px; /* border radius */
	background-color: #f8f7f7; /* layer fill content */
	margin-bottom: 5px;
	height: auto;
}

.ck_form input[type="text"]:focus, .ck_form input[type="email"]:focus {
	outline: none;
	border-color: #aaa;
}

.ck_checkbox {
  padding: 10px 0px 10px 20px;
  display: block;
  clear: both;
}

.ck_checkbox input.optIn {
  margin-left: -20px;
  margin-top: 0;
}
.ck_form .ck_opt_in_prompt {
  margin-left: 4px;
}
.ck_form .ck_opt_in_prompt p {
  display: inline;
}

.ck_form .ck_subscribe_button {
    width: 100%;
    color: #fff;
    margin: 10px 0px 0px;
    padding:  10px 0px;
    font-size: 18px;
    background: #01b8c0;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px; /* border radius */
    cursor: pointer;
    border: none;
    text-shadow: none;
  }

.ck_form .ck_guarantee {
	color: #626262;
	font-size: 12px;
	text-align: center;
	padding: 5px 0px;
	display: block;
}

.ck_form .ck_powered_by {
	display: block;
	color: #aaa;
}

.ck_form .ck_powered_by:hover {
	display: block;
	color: #444;
}

.ck_converted_content {
  display: none;
	padding: 5%;
	background: #fff;
}

.ck_form_container.ck_modal {
	position: fixed;
	z-index: 1000;
	display: none;
	top: 100px;
}

.ck_form_container.ck_modal .ck_form {
	margin: 0px;
}

.ck_close_link {
	position: absolute;
	top: -5px;
	right: -5px;
	width: 30px;
	height: 30px;
	background:#fff;
	color: #777;
	-webkit-border-radius: 15x;
	-moz-border-radius: 15px;
	border-radius: 15px;
	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.2);
	-moz-box-shadow: 0px 0px 3px rgba(0,0,0,.2);
	box-shadow: 0px 0px 3px rgba(0,0,0,.2);
	text-align: center;
	line-height: 30px;
	cursor: pointer;
}

.ck_form_container.ck_modal {
	width: 350px;
}

.ck_form_container.ck_modal .ck_vertical .ck_form_content, .ck_vertical .ck_form_fields {
	padding-top: 3%;
	padding-bottom: 3%;
}

#ck_overlay {
    position: fixed;
    z-index:1000;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

.form-container {
	height: 650px;
	width: 360px;
}

.optinbuttons {
	list-style: none;
	overflow: hidden;
	padding: 40px 50px;
	border-bottom: 1px solid #ddd;
	margin: 0px 0px 40px;
}

@media screen and ( max-height: 900px ){

	.ck_modal { top: 10px !important; }

}

@media screen and ( max-height: 600px ){

    .ck_modal {
			overflow: auto;
			height: 100%;
			position: fixed;
			top: 0px !important;
			left: 0px !important;
			right: 0px !important;
			bottom: 0px !important;
			margin-left: 0px !important;
			width: 100% !important;
		}

		.ck_modal .ck_close_link {
			top: 10px;
			right: 10px;
		}
}

</style>
</div>

<a href="#my-content" class="x-btn lbx" data-type="inline">Click Me[lightbox selector=".lbx"]</a>

and this is what I have in the custom css for this page:

.ck_form_container.ck_modal {
    display: block !important;
}

[ZeshanMember]

Hi there,

Sorry that you are still facing the issue!

Please try adding this JS code under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {
   $('a[href*="ck_modal"]').off('click touchstart touchend');
});

I’ve tested this code and the button is now opening the form just fine (see: http://prntscr.com/8r8k5w).

Hope this helps.

Thank you!

[Author]

Posts