Support » Plugin: Easy FancyBox » setting href link name

  • Resolved robmcp


    I’ve used this great plug in for a while now and it’s very intuitive.

    I recently created a test form, then a styled button as below

    <p class="Chat">
    <a class="fancybox-inline" href="#form name pop">Chat</a>
    <div class="fancybox-hidden" style="display: none;">
    <div id="form name pop"><!--?php echo do_shortcode('[contact-form-7 id="123" title="form name pop"]'); ?--></div>

    I am stuck as to how to determine the value that should be in here
    “href=”#form name pop” it’s wrong in that when I click the button I see a tiny grey square and a black close cross but not the form fields configured.

Viewing 14 replies - 1 through 14 (of 14 total)
  • Thread Starter robmcp


    on a test site see the right side of the page
    Click on contact link, the form does not appear fully open. Something to do with the href name id?

    • This reply was modified 3 months, 2 weeks ago by robmcp.
    Thread Starter robmcp


    Really stuck on this, have used the code without issue on other site forms. Cannot decipher what /where to find the href values from the form id. Several variations tested form still opens as a small grey square.

    Thread Starter robmcp


    Does any kind soul out there know why my form only pops up a tiny empty square?
    I have one working with similar code to that above, but creating a new form leaves me stuck as to the correct value to go into href=”#form name pop”
    I enter the form name and pop (on the end) but all I get is the empty square.It’s driving me nuts as it must be something obvious that I can’t see.
    Since posting I’ve found a previous query I asked ( some time ago, short memory )
    What I am after is a styled button that will open a popup form. I realise this relates to some PHP code missing/not working as expected but cannot see what that is.
    The button will appear fixed on all pages if possible.

    • This reply was modified 3 months, 2 weeks ago by robmcp.
    • This reply was modified 3 months, 2 weeks ago by robmcp.
    • This reply was modified 3 months, 2 weeks ago by robmcp.
    • This reply was modified 3 months, 2 weeks ago by robmcp.
    Thread Starter robmcp


    This is moving on slowly, Not having the original dev on this, I see that a button to open a Contact Form, code placed in the Header is controlled within header.php all fine.
    I am trying to get a fixed position button on all pages to open would this work if added to the page.php? I tried this and I now see the button at the bottom of the page, not quite where I need it but I now see a different error.

    The requested content cannot be loaded.
    Unexpected response.

    <div id="pagecontact">
    	<p class="FtChatEnquiry"><a class="fancybox-inline" href="#chat_contact_pop">Contact</a></p>
    <div style="display:none"  class="fancybox-hidden">
     <div id="contact_form_pop">
     <?php echo do_shortcode('[contact-form-7 id="123" title="Chat contact form"]'); ?>

    Above code in page.php but not being a php prog I know something is missing in the way the code is inserted with limiters/variables. I am unsure though. button looks nice, so far just for show! keeping on keeping on.

    • This reply was modified 3 months, 2 weeks ago by robmcp.

    Hi, your current source code looks like this:

    <div class="et_pb_text_inner"><p class="FtChatEnquiry"><a class="fancybox-inline" href="#form_name_pop">Contact</a></p>
    <div class="fancybox-hidden" style="display: none;">
    <div id="form_name_pop"><!--?php echo do_shortcode('[contact-form-7 id="3595" title="Form name"]'); ?--></div>

    The popup appears empty because it only has the content <!--?php echo do_shortcode('[contact-form-7 id="3595" title="Form name"]'); ?--> which is interpreted as a html comment (meaning: anything between <!-- and --> is not rendered by the browser).

    Are you sure the PHP file contains <?php echo do_shortcode('[contact-form-7 id="123" title="Chat contact form"]'); ?>?

    It may help when you temporarily remove the part class="fancybox-hidden" style="display: none;" and maybe something like <div id="form_name_pop" style="border:1px solid red;padding:10px"> so that your popup content will actually be visible (or not) on the page before being opened by FancyBox.

    A question: what kind of editor do you use to edit your PHP theme template files? Make sure it is a PLAIN text editor that does not modify your code before saving.

    Thread Starter robmcp


    Thanks, checking that now.

    Thread Starter robmcp


    I made some test changes, and I can get the code working in the Footer on that test site (not where I want it)
    Where I want it is the Contact button that sticks to the right hand side of the Home page.
    I can see that the PHP is wrong but not how to fix it. The footer.php file has this in it

    <div><a class="fancybox-inline" href="#custom_enquiry_popup"><button class="prodenq_button_prodpage">Make an Enquiry</button></a></div>
      <div class="fancybox-hidden" style="display: none;">
      <div id="custom_enquiry_popup"><div class="simplePopup"><?php echo  do_shortcode('[contact-form-7 id="3595" title="Form name"]'); ?></div>

    The above code puts a button link bottom left on the site (footer.phhp)
    What I don’t appear to be able to do is to put that code (presumably) on the main page (page.php)? To make the sticky contact button work as needed.
    Currently still playing with this but as mentioned original dev made no notes so in detective mode so far!

    Thread Starter robmcp


    The sticking point is where to put the php/shortcode to get it working. I had put a code module on the page but that won’t play either.

    There is a ; too many at the end there (after the last </div> but otherwise your code looks good. In fact, it is working on your test site but you cannot click the button because it is currently overlapped by some overflowing (but empty???) video player code. In the About Us page for example, it works fine.

    The fact that the code runs in the footer.php file does not mean you cannot move the button itself to any other desired position on the screen. You can use CSS for that. Also note that you do not need the code <button> to make it look like a button.

    For example, use this link code:

    <a class="fancybox-inline enquiry-button" href="#custom_enquiry_popup">Make an Enquiry</a>

    And enter the following style rules in Custom CSS (or anywhere Divi builder lets you add custom css) to style and position the link:

    .enquiry-button {
      position: fixed;
      right: 0;
      bottom: 20%;
      z-index: 9;
      background-color: #008CBA; /* Blue */
      border: none;
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;

    Just as an example πŸ™‚

    Thread Starter robmcp


    Thanks very much for that. Unfortunately (being extremely needy) I see how I managed to get that working with this code. I now need to add to a staging then live site.

    <p class="FtChatEnquiry"><a class="fancybox-inline" href="#contact_form_pop">Contact</a></p>
    <div class="fancybox-hidden" style="display: none;">
    <div id="contact_form_pop">[contact-form-7 id="34233" title="Chat contact"]</div>

    I thought, OK, now I can copy that process to the clients staging site to replicate and show them.
    The problem is that when I do, because there is some code all over the site that opens a different form (via fancybox), when I set my code and new button up, that opens the same form not mine.
    If I turn off the display = none on my new form, I see it on the page but adding the display none div and clicking to open, it opens the other form.
    Surely if I have that new forms shortcode as a call, then that form, not the existing one, should open?

    I am sure I am asking really basic questions but trying to determine what someone else did can lead you down blind alleys.

    Could you confirm ALL I need to do is to add this code to a page as a button or similar and it should work.
    `<p class=”FtChatEnquiry”><a class=”fancybox-inline” href=”#contact_form_pop”>Contact</a></p>

    <div class=”fancybox-hidden” style=”display: none;”>
    <div id=”contact_form_pop”>[contact-form-7 id=”34233″ title=”Chat contact”]</div>

    OR do I need the PHP call as well, such as <?php echo do_shortcode('[contact-form-7 id="3595" title="Form name"]'); ?> somewhere either in footer/header/page.php

    • This reply was modified 3 months, 2 weeks ago by robmcp.

    Hi, the ID must be unique. It now probably is the same as the other form.

    So if you have one form that has id="contact_form_pop" and you open that with a link that has href="#contact_form_pop" then you must make the other form have a different id, like id="other_form_pop" and then open that with a link that has href="#other_form_pop" to match that second form.

    And so on, for each popup form and link another (and unique) ID.

    Thread Starter robmcp


    Hi and thanks.
    Sorry for the delay in replying, due to being out of the office and illness.

    I looked at this in the cold light of day. Yay! I can see that cut/paste can hang on to snippets that you don’t want it to.
    I found the error and now have TWO buttons, on ONE page that open TWO different forms. Excellent.
    Sorry to have been a needy child, I really appreciate your time on this.

    Good to hear it’s working now. Happy to help πŸ™‚

Viewing 14 replies - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.