To answer my own question, there are at least two ways to solve it. The first is the simplest one. You should use the do_shortcode:
<a class="fancybox-inline call-to-action-button" href="#contact_form_pop">Contact us</a>
<div style="display:none" class="fancybox-hidden">
<div id="contact_form_pop" class="hentry" style="width:500px;height:100%;">
<?php echo do_shortcode( '[contact-form-7 id="714" title="Contact form 1"]' ); ?>
</div>
</div>
The second way is to create a post, and put the shortcode in the post. Then you can acquire the content of that post (by its id) in your template file like this:
<a class="fancybox-inline call-to-action-button" href="#contact_form_pop">Contact us</a>
<div style="display:none" class="fancybox-hidden">
<div id="contact_form_pop" class="hentry" style="width:500px;height:100%;">
<?php
$id=716;
$post = get_post($id);
$content = apply_filters('the_content', $post->post_content);
echo $content;
?>
</div>
</div>
Both approaches gives the same result. The thread can be marked as solved.
Hi smoove0154,
I have been at this for a few days now and tried the first with no luck. Any ideas? I’m having a hard time getting a response myself, unfortunately. Any info/help would be greatly appreciated!
Site: http://www.camerasecuritydirect.com
Thanks,
Chris
Hi all,
By default, shortcodes in text widgets are ignored by WordPress while PHP code like <?php echo do_shortcode( '[contact-form-7 id="714" title="Contact form 1"]' ); ?> in a text widget is not going to work either. Not without a plugin at least.
PHP code belongs in a theme template (PHP) file. But if you’re going to modify your theme anyway, there’s an easier solution:
Put this in your theme’s functions.php
add_filter('widget_text', 'do_shortcode');
From now on, shortcodes in text widgets will be treated the same sas in normal post content.
If you do not wish to modify your theme (using a standard theme your mods will get lost after an update) then this might also be done in the form of a plugin.
Create a file called shortcode-widget-text.php in plain text (not rich text!) editor and paste this code into it:
<?php
/*
Plugin Name: Shortcode in Text Widgets
Description: Allow shortcodes in text widgets
Version: 1
*/
add_filter('widget_text', 'do_shortcode');
then save it and upload to your /wp-content/plugins/ directory. From the admin, enable the plugin.
Hi RavanH,
Thanks for your reply and info! I have created the plugin and enabled it, as well as used the code below and still not having any luck. Any ideas?
Code:
<a class="fancybox-inline call-to-action-button" href="#contact_form_pop" rel="nofollow"><img style="margin-top: -5px;" src="http://www.camerasecuritydirect.com/wp-content/uploads/2014/03/click-for-free-cctv-estimate-3.png" /></a>
<div style="display:none" class="fancybox-hidden">
<div id="contact_form_pop" class="hentry">
<?php echo do_shortcode( '[contact-form-7 id="5209" title="" html_class="use-floating-validation-tip"]' ); ?>
</div>
</div>
Website:
http://www.camerasecuritydirect.com
Hi chrisbelote, like I said: that PHP code <?php ... ?> does not belong in the text widget. Use just the shortcode [contact-form-7 id="5209" title="" html_class="use-floating-validation-tip"] in its place.
Hi RavanH, I had some caching issues with the site, but have since resolved them. I am still not having any luck with the code. Can you point me in the right direction, please?
I have tried a dozen different variations of the code below. The most current one that I’ve tried is below:
<a href="#contact_form_pop" class="fancybox" rel="nofollow"><img style="margin-top: -5px;" src="http://www.camerasecuritydirect.com/wp-content/uploads/2014/03/click-for-free-cctv-estimate-3.png" /></a>
<div style="display:none" class="fancybox-hidden">
<div id="contact_form_pop">
[contact-form-7 id="5209" title="" html_class="use-floating-validation-tip"]</div>
</div>
You probably want to use class="fancybox-inline" on the link tag and also give the div contact_form_pop some style with at least dimensions like:
<div id="contact_form_pop" style="width:500px;height:300px;">
If still not working then, please share a link to your site, it will be much easier to figure out what is going wrong.
Hey RavanH, I just tried the following code with no luck:
<a href="#contact_form_pop" class="fancybox-inline" rel="nofollow"><img style="margin-top: -5px;" src="http://www.camerasecuritydirect.com/wp-content/uploads/2014/03/click-for-free-cctv-estimate-3.png" /></a>
<div style="display:none" class="fancybox-hidden">
<div id="contact_form_pop" style="width:500px; height:300px;">
[contact-form-7 id="5209" title="" html_class="use-floating-validation-tip"]</div>
</div>
Website: http://www.camerasecuritydirect.com
Thanks!
@chrisbelote – Your theme script http://www.camerasecuritydirect.com/wp-content/themes/u-design/scripts/script.js?ver=1.0 causes a blocking error:
jquery.js?ver=1.12.3:2 Uncaught Error: Syntax error, unrecognized expression: a[href=#top]
You’ll need to fix that before FancyBox can work. Try removing the follwing snippet from that file:
// Scroll to Top script
jQuery(document).ready(function($){
$('a[href=#top]').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
});
RavanH, that was it! It is working flawlessly now! Thank you so much!! Please provide a link so that our company can make a donation to you/your company. If I couldn’t have resolved this, I would have had to hire someone.
Thanks!
Chris
@chris no problem! … there’s a link “Donate to this plugin” on the plugin’s main page https://wordpress.org/plugins/easy-fancybox/ 😉
