WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Plugin: Form Lightbox] Open Contact form in Lightbox using button (4 posts)

  1. row321
    Member
    Posted 1 year ago #

    I want to put a button in the widget area called "Request Quote" when a user clicks the button i want to open the contact form using lightbox.

    I've tried various plugins and code variations but could not get it to work so I hope someone here can help me out.

    I have installed Form Lightbox plugin and Contact form 7 plugin and I also have PHP code widget plugin.

    Can anyone guide how can I get the button click to open the contact form in lightbox?

    Please let me know if I need to provide anymore info here. Thanks!!

  2. row321
    Member
    Posted 1 year ago #

    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!!

  3. Alvaro
    Member
    Posted 11 months ago #

    thank you row321
    I am able to open contact form 7 form in a light box but faces a problem
    when i click on the button the forms open up and everything works fine, but if i close the form and try to open the form agian by clicking on the button it open the page in light box instead of the form...
    any idea what is causing the problem??

  4. apapanic
    Member
    Posted 10 months ago #

    I'm getting the same issue, did anyone get to solve this? I click once it works, but then when I close the lightbox and click the button/link again it lightboxes the whole page instead of just the form. WTF?

Topic Closed

This topic has been closed to new replies.

About this Topic