[AaronLentzParticipant]

Hi,

I’m looking to create a Mailchimp subscribe form that would appear after one would click the subscribe to newsletter button on my website. Could you please assist me in how I could go about creating this.

Here is my website: http://www.columbuschurchplant.com/new-and-improved-home-page/

I have attached a picture here: http://www.ColumbusChurchPlant.com/wp-content/uploads/2015/02/Xtheme-support-help.png

Thank you for your help!

[ChristopherModerator]

Hi there,

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.

Create mail chimp form separately in a page .

Create a link type menu add show-lightbox in class filed of menu.
Please check the screen shot :

Now add the following code in functions.php file inside child theme:

add_action('wp_footer', function() {
?>
<script type='text/javascript' src='<?php echo get_site_url(); ?>/wp-content/plugins/cornerstone/assets/js/dist/site/vendor-ilightbox.min.js'></script>
<script id="x-responsive-lightbox-1">jQuery(document).ready(function(){jQuery('.show-lightbox a').iLightBox({skin: 'light',overlay: {opacity: 0.875,blur: true},styles: {prevScale: 0.75,prevOpacity: 0.75,nextScale: 0.75,nextOpacity: 0.75},path: 'horizontal',controls: {thumbnail: false}});});</script><script id="x-responsive-lightbox-2">jQuery(document).ready(function(){jQuery('.show-lightbox a').iLightBox({skin: 'light',overlay: {opacity: 0.875,blur: true},styles: {prevScale: 0.75,prevOpacity: 0.75,nextScale: 0.75,nextOpacity: 0.75},path: 'horizontal',controls: {thumbnail: false}});});</script>
<?php
});

Hope it helps.

[cpjennmeakinParticipant]

Hello –

This answer is very helpful to me. Only problem I’m having now is that the lightbox pop-up takes up the full width/height of the page. how do you limit the height and width of the html pop-up window?

Also, the pop-up is acting like there are 2 items to show, so when i scroll up/down/left/right, the lightbox advances to the next item, which is just a duplicate instance of the form.

Attached is what i see when I include the pop-up.

[LelyModerator]

Hello There,

Upon checking the page, the pop up is not fullwidth anymore and the second issue seems ok now.
Would you mind confirming that this issue is resolve now?

Thank you.

[cpjennmeakinParticipant]

Hello –

I am only commenting on someone elses original post for clarification, not my own. Those links in the first post are not mine. I have only included a screenshot & I am still having the same issues as listed in my comment on May 22.

[RadModerator]

Hi there,

Lightbox will always appear as fullwidth, and there is no option for the dimension. As for duplicate lightbox form, please change this coding :

add_action('wp_footer', function() {
?>
<script type='text/javascript' src='<?php echo get_site_url(); ?>/wp-content/plugins/cornerstone/assets/js/dist/site/vendor-ilightbox.min.js'></script>
<script id="x-responsive-lightbox-1">jQuery(document).ready(function(){jQuery('.show-lightbox a').iLightBox({skin: 'light',overlay: {opacity: 0.875,blur: true},styles: {prevScale: 0.75,prevOpacity: 0.75,nextScale: 0.75,nextOpacity: 0.75},path: 'horizontal',controls: {thumbnail: false}});});</script><script id="x-responsive-lightbox-2">jQuery(document).ready(function(){jQuery('.show-lightbox a').iLightBox({skin: 'light',overlay: {opacity: 0.875,blur: true},styles: {prevScale: 0.75,prevOpacity: 0.75,nextScale: 0.75,nextOpacity: 0.75},path: 'horizontal',controls: {thumbnail: false}});});</script>
<?php
});

To this,

add_action('wp_footer', function() {
?>
<script type='text/javascript' src='<?php echo get_site_url(); ?>/wp-content/plugins/cornerstone/assets/js/dist/site/vendor-ilightbox.min.js'></script>
<script id="x-responsive-lightbox-1">jQuery(document).ready(function(){jQuery('.x-nav-wrap.desktop .show-lightbox a').iLightBox({skin: 'light',overlay: {opacity: 0.875,blur: true},styles: {prevScale: 0.75,prevOpacity: 0.75,nextScale: 0.75,nextOpacity: 0.75},path: 'horizontal',controls: {thumbnail: false}});});</script><script id="x-responsive-lightbox-2">jQuery(document).ready(function(){jQuery('.show-lightbox a').iLightBox({skin: 'light',overlay: {opacity: 0.875,blur: true},styles: {prevScale: 0.75,prevOpacity: 0.75,nextScale: 0.75,nextOpacity: 0.75},path: 'horizontal',controls: {thumbnail: false}});});</script>
<script id="x-responsive-lightbox-2">jQuery(document).ready(function(){jQuery('.x-nav-wrap.mobile .show-lightbox a').iLightBox({skin: 'light',overlay: {opacity: 0.875,blur: true},styles: {prevScale: 0.75,prevOpacity: 0.75,nextScale: 0.75,nextOpacity: 0.75},path: 'horizontal',controls: {thumbnail: false}});});</script><script id="x-responsive-lightbox-2">jQuery(document).ready(function(){jQuery('.show-lightbox a').iLightBox({skin: 'light',overlay: {opacity: 0.875,blur: true},styles: {prevScale: 0.75,prevOpacity: 0.75,nextScale: 0.75,nextOpacity: 0.75},path: 'horizontal',controls: {thumbnail: false}});});</script>
<?php
});

Hope this helps 🙂

[kimandkeithParticipant]

Hi Themeco team,

In trying to replicate the OP’s website, I seem to have taken a wrong turn.

I’d like to have the menubar link “signup” link to a signup form overlay exactly like http://www.columbuschurchplant.com/new-and-improved-home-page/

As of right now, my menubar link “signup” results in lightbox opening up the linked page in a lightbox instead of a much simpler and faster signup form.

My website is http://www.kimbalances.com/ ; the link I am trying to fix is “signup” which can be found in the header and footer.

I am using the latest wordpress, x-theme, child theme, and mailchimp extension.

Thank you,
Keith

[Paul RModerator]

Hi Keith,

When I go to this page http://www.columbuschurchplant.com/new-and-improved-home-page/

I don’t see any sign up form, I tried clicking on SUBSCRIBE TO NEWSLETTER but nothing happens
so I am not sure what you want to do with your sign form.

Can you provide us with a little more clarification on what it is you’re wanting to do.

Thanks

[hellodiggableParticipant]

Hi Keith,

Just wanted to let you know we made a popup tool for X that should be able to help you do what you’re asking for your site – simple, custom click-triggered popup email forms. You can check it out or download it free here: https://diggable.co/x-theme-popups-plugin/

Hope it helps!

[ChristopherModerator]

Thanks for sharing.

[kimandkeithParticipant]

Hello,

I would like to have a popup subscription form for my mailchimp email subscribe list.

The aesthetics/function I am going for can be found on this website: http://www.athenscolumbus.com/

On that website, you can click “subscribe to newsletter” and see the pop-up style I am looking for.

If that does not work for you, I will try my best to describe: I would like to have a pop up center and middle aligned on the page, with a semi-opaque frame filling the screen, and a close “x” button on the top right-hand corner of the window. The pop up form should be linked to my mailchimp account with the fields I designate therein.

Does that all make sense/work?

Alternatively, if you can suggest a more appropriate/simple/effective way to implement an email sign-up on the website, I am all ears.

Thank you!

[John EzraMember]

Hey there,

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this.

You can check out our recommended partners: https://theme.co/x/member/custom-development/

You may also want to try checking out some plugins made for popups and MailChimp. We cannot support 3rd Party plugins so please do a backup first before trying any out.

Out of the box, X only has a limited workaround for getting a form to load via a lightbox. You will need to create a using the Blank no container, no header no footer page template. Insert your form shortcode (from a form you already created) then call that link via a button, link, or image that is setup with a lightbox trigger.

You can learn more about that in our lightbox article: https://community.theme.co//kb/shortcode-walkthrough-lightbox/

If you really need to have that exact design then we suggest trying out plugins or engaging a developer.

X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[benlaubeParticipant]

What version of Theme X is this? For some reason I don’t seem to have an x-code shortcodes plugin available to add

[ZeshanMember]

Hi there,

Thanks for writing in!

This thread is quite old and the first workaround is provided before the Cornerstone plugin. X-Shortcodes plugin functionality has been consolidated in Cornerstone.

I’ve updated the code in above responses to use Cornerstone files instead of X-Shortcodes.

Thanks!

[Author]

Posts