Forums

WordPress › Support » Plugins and Hacks

[resolved] Display page with fancy box without header (6 posts)

  1. Nicole Hough
    Member
    Posted 4 months ago #

    Hello - I would like to display content from my menu using easy-fancybox. (specifically a contact form) I am using WPMU Contact form, Easy Fancy box, and Widgets on Pages (to place to contact form widget on the page) and used CSS class fancybox-iframe to make the link work.
    The problem I'm having is that the form displays as the whole page with the header, footer, etc. I would like to just display the form on a white background and I can't think of how to do it.
    (I've had luck inserting a cart this way on another site, but it was already and external page)
    Thanks for your guidance.
    Site in question: http://houghconsulting.com
    Thanks!

  2. RavanH
    Member
    Posted 4 months ago #

    Hi,

    The class fancybox-iframe is meant for showing complete pages. So if you want to use fancybox-iframe and only show a contact form that is being generated on a seperate page, you will need to create a new template that does not show any header or other stuff and use that template for your contact page... More on creating custom page templates: http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates

    Another approach might be to include a hidden form inline. I do not know how WPMU Contact Form works (is that from WPMU.DEV? And how is that different from normal form plugins?) because I simply use Contact Form 7 on multi-site installations. But let's say:
    1. your contact form plugin allows you to put a form in a sidebar as a widget and
    2. your theme allows for a custom menu to be used as main menu,
    then here is an example of how it might work for you:

    1. Create your form as a widget that is available on EVERY (!) page and post. It does not matter where you place it (in the footer for example) because it will be hidden later.

    2. Find out which ID or class name is used for the document object that WRAPS (!) your contact form. It can be a div or a ul or li. Then add a CSS rule to your themes stylesheet similar like this:

    .widgets .your-form-widget-class {display:none}

    3. Find out the ID of the form itself and link to it from your main custom menu with href/target #your-form-id and class fancybox (not fancybox-iframe)

    You might need to be inventive to make it work with your particular theme and plugin...

  3. Nicole Hough
    Member
    Posted 4 months ago #

    Thank you!!!!! I tried your first suggestion and made a template that doesn't call the header or footer and it worked like a charm!!! Re: WPMU contact form, I just like the way it looks, but might try with others too. Definitely using this trick again! Thanks!!!

  4. RavanH
    Member
    Posted 4 months ago #

    Is WPMU Contact Form on WordPress Extend? Can't even seem to find it with Google...

    Oh, and could you mark this thread as solved? Thanks :)

  5. Nicole Hough
    Member
    Posted 4 months ago #

    Here is the link - it is really a widget - I am using widgets-on-pages to show it.
    http://premium.wpmudev.org/project/contact-widget

    Yes, thx for your help!!

  6. RavanH
    Member
    Posted 4 months ago #

    Thanks :)

    Looking at the source code of your bare contact page http://houghconsulting.com/?page_id=52 I notice it is now missing some obligatory html tags. Namely the opening <html><head>...</head><body> and the closing </body></html> tags.

    I don't know how/if missing inclusion of stylesheets and script files in the head section will affect your contact form or how it shows across different browsers, but it might be wise to copy all up to and including the <body> tag from the (in this template unused) header.php to prepend what you have in the custom template. And then append </body></html> all the way at the end...

Reply

You must log in to post.

About this Topic

Tags