WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
[resolved] Open an Easy Fancybox containing a contact form using a call-to-action button (7 posts)

  1. backupsoluciones
    Member
    Posted 9 months ago #

    I'm trying to make a call to action button (in a Responsive Theme) open a contact form in a floating popup. For that purpose I'm using "Easy Fancybox" and "Contact Form 7" plugins. I've only been able to open the popup from a linked text using this code:

    <a href="#contact_form_pop" class="fancybox">Solicite una cotización</a>
    <div style="display:none" class="fancybox-hidden">
    	<div id="contact_form_pop">
    		[contact-form-7 id="9" title="Contact form 1"]
    	</div>
    </div>

    The site I'm working on is: http://www.backupsoluciones.com

    Thanks!

    http://wordpress.org/plugins/easy-fancybox/

  2. backupsoluciones
    Member
    Posted 9 months ago #

    Thanks to the plugin developer I managed to this easily, excellent support! This is the code for anyone intersted.

    <div class="call-to-action">
    	<a href="#contact_form_pop" class="blue button fancybox-inline">Solicite una cotización</a>
    </div>
    <div style="display:none" class="fancybox-hidden">
    	<div id="contact_form_pop">
    		[contact-form-7 id="9" title="Contact form 1"]
    	</div>
    </div>
  3. joakim.a.olsson
    Member
    Posted 1 month ago #

    @backupsoluciones

    the fancybox-popup works great but would I can't figure out how to convert the text link into a call-to-action button as you have nicely on your page.

    Are you using a button plug-in? How do you link it altogether to get the button-link on the page/post instead of the text-link?

    Thanks in advance

    /newbie

  4. RavanH
    Member
    Plugin Author

    Posted 1 month ago #

    Hi joakim, look closely at the 'button' on that page (hit Ctrl+U to see page source code or use right-click and choose Inspect Element in Google Chrome or Opera browser) and you'll notice that it's not a button at all. It's still a link but styled to look like a button:

    <div class="call-to-action">
    	<a href="#contact_form_pop" class="blue button fancybox-inline">Solicite una cotización</a>
    </div>

    Styled with these CSS rules:

    .call-to-action {
    text-align: center;
    }
    .call-to-action a.button {
    font-size: 24px;
    padding: 15px 35px;
    }
    a.button:hover, input[type='reset']:hover, input[type='button']:hover, input[type='submit']:hover {
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    background-color: #ffffff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f1f1f1));
    background-image: -webkit-linear-gradient(top, #ffffff, #f1f1f1);
    background-image: -moz-linear-gradient(top, #ffffff, #f1f1f1);
    background-image: -ms-linear-gradient(top, #ffffff, #f1f1f1);
    background-image: -o-linear-gradient(top, #ffffff, #f1f1f1);
    background-image: linear-gradient(top, #ffffff, #f1f1f1);
    border: 1px solid #dddddd;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    color: #333333;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f1f1f1);
    }
    a.button:active, input[type='reset']:active, input[type='button']:active, input[type='submit']:active {
    -moz-box-shadow: 0 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f1f1f1));
    background-image: -webkit-linear-gradient(top, #f9f9f9, #f1f1f1);
    background-image: -moz-linear-gradient(top, #f9f9f9, #f1f1f1);
    background-image: -ms-linear-gradient(top, #f9f9f9, #f1f1f1);
    background-image: -o-linear-gradient(top, #f9f9f9, #f1f1f1);
    background-image: linear-gradient(top, #f9f9f9, #f1f1f1);
    box-shadow: 0 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, 0.1);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f9f9f9, endColorstr=#f1f1f1);
    }
    a.blue {
    background-color: #1874cd;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#4f9eea), to(#1874cd));
    background-image: -webkit-linear-gradient(top, #4f9eea, #1874cd);
    background-image: -moz-linear-gradient(top, #4f9eea, #1874cd);
    background-image: -ms-linear-gradient(top, #4f9eea, #1874cd);
    background-image: -o-linear-gradient(top, #4f9eea, #1874cd);
    background-image: linear-gradient(top, #4f9eea, #1874cd);
    border: 1px solid #115290;
    color: #ffffff;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4f9eea, endColorstr=#1874cd);
    text-shadow: 0 -1px 0 #115290;
    }
    a.blue:hover {
    background-color: #7db7f0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#7db7f0), to(#1874cd));
    background-image: -webkit-linear-gradient(top, #7db7f0, #1874cd);
    background-image: -moz-linear-gradient(top, #7db7f0, #1874cd);
    background-image: -ms-linear-gradient(top, #7db7f0, #1874cd);
    background-image: -o-linear-gradient(top, #7db7f0, #1874cd);
    background-image: linear-gradient(top, #7db7f0, #1874cd);
    border: 1px solid #115290;
    color: #ffffff;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7db7f0, endColorstr=#1874cd);
    text-shadow: 0 -1px 0 #115290;
    }
    a.button, input[type='reset'], input[type='button'], input[type='submit'] {
    -moz-border-radius: 2px;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    -webkit-border-radius: 2px;
    background-color: #f9f9f9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f1f1f1));
    background-image: -webkit-linear-gradient(top, #f9f9f9, #f1f1f1);
    background-image: -moz-linear-gradient(top, #f9f9f9, #f1f1f1);
    background-image: -ms-linear-gradient(top, #f9f9f9, #f1f1f1);
    background-image: -o-linear-gradient(top, #f9f9f9, #f1f1f1);
    background-image: linear-gradient(top, #f9f9f9, #f1f1f1);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    border: 1px solid #dddddd;
    border-radius: 2px;
    color: #333333;
    cursor: pointer;
    display: inline-block;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f9f9f9, endColorstr=#f1f1f1);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    margin: 0;
    padding: 4px 10px;
    text-decoration: none;
    text-shadow: 0 1px 0 #ffffff;
    vertical-align: middle;
    white-space: nowrap;
    }

    Hope that helps you on your way :)

  5. joakim.a.olsson
    Member
    Posted 1 month ago #

    RavanH! Thanks for response!

    I have an own style as well that I would like to use but as a newbie I can't figure out how to "get" it to be used for the link.

    Could you have a look at http://socialoffice.se. the style for the "button" I want to use is the same as the buttons in the top menu "Start" etc.

    I have identified them in the style.css but now I don't know how to write the code for the easy fancybox-contact form

    This is the code I have now that generates a regular text link. Would you know how I should rewrite it to get the "button" with my own css style?

    Offertförfrågan
    <div style="display: none" class="fancybox-hidden">
    <div class="hentry" id="contact_form_pop" style="width: 460px; height: 700px;">[contact-form-7 id="77" title="Offertförfrågan"]</div>
    </div>

    Thanks again!

  6. joakim.a.olsson
    Member
    Posted 1 month ago #

    <a href="#contact_form_pop">Offertförfrågan</a>
    <div style="display: none" class="fancybox-hidden">
    <div class="hentry" id="contact_form_pop" style="width: 460px; height: 700px;">[contact-form-7 id="77" title="Offertförfrågan"]</div>
    </div>
  7. joakim.a.olsson
    Member
    Posted 1 month ago #

    I figured it out with help from my coder friend! Thanks anyway!

Reply

You must log in to post.

About this Plugin

About this Topic