Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #26676

    I’ve used the button shortcode to create a button which when clicked should open the contact page.

    However, I want to open the contact page in a lightbox effect as opposed to new tab or same window. So that the customer doesn’t have to navigate to a another page to fill out the contact form.

    Right now I am using the following code

    [button link="http://---edited out by Devin---.com/contact/" size="xl" style="note" color="#FFFFFF" border="#000000" text="dark"]Request for Quote[/button]

    Would appreciate your help.

    #131226

    Hi row321,

    The button short code doesn’t have a class parameter so you would need to use a regular html button and add the relative value for it as well as load it in as an iframe.

    Eg:

    <a href="http://www.google.com?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" title="Google.com opened at 100%">Google.com</a>

    Reference: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

    Regards,

    Devin

    #131227

    Thanks @Devin! I was able to solve the issue. Was wondering would it be possible for you to edit the original post by me to replace the domain name with example.com in the button code that I mention? Thanks again.

    –xx–

    Here’s what I was trying to accomplish -

    I wanted to display a “Request Quote” button and then have a contact form open when the button was clicked in a lightbox.

    How I did it::

    Installed two plugins – Form Lightbox and Contact form 7.

    Then used a text/HTML widget with the following code.

    <p style="text-align: center;">[formlightbox_call title="lightbox form" class="1374826386773"]<button class="requestquote">Request Quote</button>[/formlightbox_call]

    [formlightbox_obj id="1374826386773" style="" onload="false"][contact-form-7 id="1013" title="Contact form 1"][/formlightbox_obj]</p>

    Where I defined the “requestquote” button class to style the default HTML button.

    I used a CSS Style Button generator website to help me with the CSS styling to match the look and feel of the theme so I used the following -

    .requestquote {

    border: 1px solid #D1D1D1;

    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.08, #FFFFFF), color-stop(0.9, #D1D1D1) );

    background: -moz-linear-gradient( center top, #FFFFFF 8%, #D1D1D1 90% );

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#D1D1D1');

    background-color: #FFFFFF;

    -moz-box-shadow: inset 0px 1px 2px 0px #FFFFFF;

    -webkit-box-shadow: inset 0px 1px 2px 0px #FFFFFF;

    box-shadow: inset 0px 1px 2px 0px #FFFFFF;

    -moz-border-radius: 1px;

    -webkit-border-radius: 1px;

    border-radius: 1px;

    text-shadow: 1px 1px 2px #FFFFFF;

    font-weight: normal;

    margin: 5px 5px;

    padding: 6px 6px;

    color: #174580;

    letter-spacing: 1px;

    font-family: 'Arial', sans-serif;

    font-size: 18px;

    width: 185px;

    text-transform: capitalize;

    text-align: center;

    text-decoration: none;

    cursor: pointer;

    display: inline-block;

    }

    .requestquote:hover {

    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.08, #D1D1D1), color-stop(0.9, #FFFFFF) );

    background: -moz-linear-gradient( center top, #D1D1D1 8%, #FFFFFF 90% );

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D1D1D1', endColorstr='#FFFFFF');

    background-color: #D1D1D1;

    }

    .requestquote:active {

    position: relative;

    top: 1px;

    left: 0px;

    }

    And DONE!!

    Now I have a request quote button on the site that users can click and access a custom contact form to request quote for a product in a lightbox.

    And all this could be done without paying for any custom development. :)

    Hope this helps anyone else trying to accomplish this feature on their site.

    #131228

    Sure thing and thanks for posting what ended up working for you :)

    Regards,

    Devin

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Open link in lightbox’ is closed to new replies.