Popup button

rezamgm · May 2016

Hi,

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

[popup title="Request a Free Quote" padding="0" button="1"][contact-form-7 id="5029" title="Request Free Quote"][/popup]

I tried to use a button shortcode with prettyPhoto class but I couldn't get it to work.

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:

http://vishka.com/production

Thank you in advance

Albert · May 2016

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; }

rezamgm · May 2016

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

rezamgm · May 2016

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.

Albert · May 2016

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.

rezamgm · May 2016

Thank you so much for your great support.

Albert · May 2016

You are welcome

Popup button

Comments