[cinedeckParticipant]

Hi there,

I am new to the development of a site using X / Integrity Version: 3.2.4 but I can find my way around the various background files, etc.
I have created a link for opening a pop-up contact form using FancyBox and Contact Form 7.
The link works. I have added some custom css so the basic form design is getting to what is desired but the link should be part of the top menu bar and the footer menu bar.
Using the wordpress custom menu item for this would be great but I don’t see anyway to make that work so I guess it needs to be added to a php file somewhere, but where?
The code is:

<a href="#contact_form_pop" class="fancybox-inline" target="_blank"  rel="nofollow" >Contact Us</a>
<div style="display:none" class="fancybox-hidden">
<div id="contact_form_pop" style="background-color:#000000; width: 300px";>
        [contact-form-7 id="337" title="Contact form 1"]</div>
</div>

Many Thanks…

[Nabeel AModerator]

Hi there,

Thanks for writing in! Have you tried adding the code in Topbar content? Try adding the code in your Topbar via Appearance > Customize > Header > MISCELLANEOUS > Topbar > Topbar Content Make sure it’s turned on first.

Let us know how this goes!

[cinedeckParticipant]

Thanks for the reply…

I have indeed already tried it in the TopBar as well as the HeaderWidgetArea and while I can get both to work, its not the same as simply having it part of the main menu.

That said, I have discovered an interesting issue, that the pop-up will only properly appear if the same code is found somewhere in the body of the site meaning, for example, if I add the code “only” to the FooterContent, the resulting popup displays the form shortcode and not the form.
If I add the same link text in the body of the site somewhere and then click that same footer link, the form pops up.

[ChristopherModerator]

Hi there,

As this is a third party plugin issue we can not provide you with support as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

But I can offer you another way to display lightbox:

Add contact form shortcode in a new page and select ‘Blank-Container|No Header-No Footer’ as this page’s template.
Please setup a custom link and add a class (e.g. show-lightbox) and page URL to it (check screen shot).

Then add the code below in your functions.php file located in child theme folder:

add_action('wp_footer', function() {
?>
<script type='text/javascript' src='<?php echo get_site_url(); ?>/wp-content/plugins/x-shortcodes/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.

[cinedeckParticipant]

I will not lie, I totally get the use but I have not yet crossed the bridge into creating child themes.

That said, thanks for responding with a solution. Using a Blank-Container|No Header-No Footer page in a child theme with the associated script looks to be better as I am all for eliminating additional plugins when possible.

I added a pointer in the thread: Contact Form 7 in Lightbox as this really addresses that question.

[ChristopherModerator]

Hi there,

Please follow this link to 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.

Thanks.

[cinedeckParticipant]

I have been looking into activating a child theme and one thing is not entirely clear to me…
Up to now we have not changed any of the X files. The only customization is creating new pages and CSS entered into the CSS Customizer section and of course basic stuff in the customizer like background image, typography and the like.

I gather all the parent customizer settings can be exported and then imported to the child.

It may be obvious but what is not clear is what happens with the pages like the home page, which have been created under the parent?
Do they simply continue functioning as they do now or is there some reconstruction needed?

Thanks…

[John EzraMember]

Hi there,

Thanks for writing in and great question. Pages and posts are built within the WordPress platform. The data contained in the post and pages wont be affected by parent or child theme, or any theme for that matter. The theme effects the structure, layout and styling of the site including these pages. This means that if something is affected it is just how the data is shown, but the data can only change from within the WordPress editor or through the database.

If you did not do any changes in the site layout and only use CSS in the customizer, then you don’t have to worry about changes as the child theme will just take all of the parent’s settings and add on top of it. It’s best practice to export your customizer settings before activating the child theme but that should also carry over if nothing goes wrong.

Hope this helps – thanks!

[cinedeckParticipant]

OK.. So I have had some time to create the child theme and create the above required resources and while this new contact form kind of works, there are a few anomalies;

First, the form is far to large. If I set a div with ID around the form short code, there is still at least one div layer above it which is not looking like I want.
I am guessing that if I duplicate the Blank-Container|No Header-No Footer template into the child, I can edit it and set a class or ID far enough up in the flow to really control the size?

2) Would I be better off controlling the form size with the lightbox and if so, how does one set that and the other parameters of the light box?

3) When the lightbox pops up, it completely covers the rest of the site with a white background while I would prefer either nothing between the form and the background or, better, a 25% transparency or so, leaving the site in the background but not full blast.

4) to the right of the lightbox and form, at the edge of the screen, there is another form waiting to page into view. If I click it, it slides in and replaces the one that was there.

And last – for my own understanding, how do you create a stand-alone link which calls the form in the lightbox?
ie http://my-site.com/contact-us/ “show-lightbox”

Many thanks so far…

[Rue NelModerator]

Hello There,

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Should you need further assistance, you might want to contact our trusted partners who caters X setup and customization needs. Please see Our Trusted Customization Partners.

Thank you for your understanding.

[Author]

Posts