Support Center Visit Demo License manager Buy @ envato

Popup button

rezamgmrezamgm
in Shortcodes

Hi,

I'm using the following shortcode to create a popup button for a Contact Form 7 form:


Could you please tell me how I can create a button (with icon) that will pop up a CF7 form that would look similar to my other buttons (I need to control the color of the button)?

You can see what I have done on this page:

Thank you in advance

Comments

  • AlbertAlbert
    Hey,

    you can not create the same button with icon if you want to get form in popup but you can create something similar with the code as below: 
    [popup title="<i class='icon-attention'></i> Request a Free Quote" padding="0" button="1"][contact-form-7 id="447" title="Contact page"][/popup]
    But to control it's color, you need to use an extra css: 
    a.popup-link.button { background: #000 !important; color: #FFF !important; }
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • rezamgmrezamgm
    Hey,

    Thank you for the quick reply.
    Are you sure the code you included is correct? This is the button I get after I include this code:

    [popup title="<i class="icon-attention"></i>Request a Free Quote" padding="0" button="1"][contact-form-7 id="5029" title="Request Free Quote"][/popup]

    and this is the button I get (see the screenshot please):
    Just a white rectangle with no text or icon. The popup works but the button doesn't look like one.

    Thanks
  • rezamgmrezamgm
    Could you please also tell me what custom css I would have to use if I want another popup on a different page with a different background color?

    Thank you.
  • AlbertAlbert
    Yes, we are sure as we tested it on our end. Please compare your code with what we gave you above and will see the difference because codes are not the same.

    To set different buttons colors per pages, you need to use: 
    .page-id-xxx a.popup-link.button { background: #000 !important; color: #FFF !important; }
    where xxx is page id.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • rezamgmrezamgm
    Thank you so much for your great support.
  • AlbertAlbert
    You are welcome :)
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.