css problem inside the fancybox

Hi, the style rules for these forms are defined in https://dev.pvda.org/wp-content/plugins/visual-form-builder-pro/css/visual-form-builder.min.css and this stylesheet is included in the head section of the source in your first example. But the second example page source is missing this stylesheet. That’s why the form looks odd.

I’ve no idea how From Builder works and based on what it desides to include the stylesheet or not but is sounds like the use of the shortcode plays some role here…

Basically, I’d suggest to always use the shortcode and hide the form like the following example.

Go to Settings > Media and enable the Inline Content option, then place this in your page/post content:

<div class="fancybox-hidden"><div id="myform-1" style="width:300px;height:500px;">[theshortcodehere]</div></div>

(note 1: that you can change the style rule dimensions to influence the resulting fancybox size)
(note 2: always use a unique ID value, same ID may not exist twice on the same page!)
(note 3: replace [theshortcodehere] with the actual shortcode)

Now link to it for opening in FancyBox like this example:

<a href="#myform-1" class="fancybox-inline">Volunteer</a>

(note: the link does not have to be beside the shortcode, it may be anywhere on the same page and there can be more than one link)

Thank you again for responding. I do have the inline content option enabled. If I follow your example exactly (except without the width and height), the only thing that is shown in the fancybox is the shortcode ‘[vfb id=15]’. Your example is not working for me the way you expect it to work.
The only way I have been able to get the form to display inside the fancybox is to output the results of do_shortcode.
Here is my code.

$label = “Volunteer at Show”;
$button_style = 'class="ActiveShowButton fancybox-inline"';
$str 	.= '<a href="#volunteer_form"' . $button_style . '>' . $label . '</a>';
$str 	.= '<div class="fancybox-hidden">';
$str 		.= '<div id="volunteer_form">';
$str 			.= do_shortcode('[vfb id=15]'); // display form, but css is wrong
//	$str 			.= '[vfb id=15]';// displays only '[vfb id=15]'
$str 		.= '</div>';
$str 	.= '</div>';

Thank you for your observation that the https://dev.pvda.org/wp-content/plugins/visual-form-builder-pro/css/visual-form-builder.min.css file is being loaded in the first example but not in the second example. I will start investigating in that area.

Thank you very much.

OK, I was talking about post or page content, not PHP content. If you want to use a shortcode in any PHP template then indeed you need to work with do_shortcode(...) but I’m not sure of the form builder plugin will embed the needed stylesheet then.

Hello Again,

I have been doing a bit of investigating, and I have found that, if the fancybox is launched from a page or a post, it does not inherit the css styles that have been loaded by the header of the parent window. I am unsure whether to consider this a problem or not. It would be nice (for me) if the already loaded styles were inherited by the fancybox window, but I can certainly see other uses for the fancybox where you wouldn’t want to have the sytles inherited. I have be able to figure out how to reload the default visual form builder css styles, just before the fancybox opens up, but, doing that causes the fancybox open very slowly because the visual form builder code is very inefficient in this case. If I continue down this path I will look for ways to make the form builder load the css more efficiently.

At this point, I do not need any further help from you. Thank your very much for your support. There are so many plugin authors who do not respond to support requests, it is very nice to talk to one who does. So, thank you very much, your help is appreciated.

Hi, if you want to make inline content inherit styles from the usual post content, then you could give the inline content wrapper div the same class as the normal post content div. Try, for example, class="hentry fancybox-inline" where hentry should be used in your stylesheet for most of the post content style rules.

For a deeper understanding of why this is happening: the FancyBox script creates an empty (still invisible) wrapper at the end of the page source, just before the closing </body> tag. As soon as any candidate link is clicked, the targeted content (inline or other media) is appended/moved/copied to this empty wrapper and then animated to form the lightbox effect.

The style rules that apply to normal content are usually formed like (for example) #main p { margin:... } or .hentry { color:... } and because this empty fancybox div is not living inside the div with ID “main” or class “hentry” these rules do not apply.

Giving inline content the extra class “hentry” (in this example) will make it’s content inherit those style rules even when moved to the empty fancybox div.

Hope that helps ??