Open Contact Form 7 in a Pop-up

imabhiraj · June 2019

Hello,

I want an pop-up contact form to be open on the slider, I have used the following code by referring to the order tickets, but this didn't help

[button title="Button" link="you-custom-id" target="_blank" class="" download="" rel="lightbox" onclick=""] <div id="you-custom-id" style="display:none">CONTENT HERE</div>

Kindly help us with the same, below is the website link:

http://www.buypropertyonline.co.in/

Thanks

Pablo · June 2019

Hi,

What do you mean by "to be open on the slider"

You mean the Revolution Slider?

I tested that code with CF7 shortcode using the "Column" item of Muffin Builder and it works.

Also, you're missing the "#" before "you-custom-id".

It should be #you-custom-id

Thanks

imabhiraj · July 2019

Now the pop up form is working, but I am facing issues with the
button alignment, I have tried to implement pop-up code in 2
different ways:

1. I have selected a button in the Revolution slider as a layer
and added the code in the same place where we put the button
title, the form worked fine but the button started to look like
this: https://snag.gy/4CkUEQ.jpg

2. I have added an HTML text box as my layer and entered the
pop-up code into it, now the button looks perfect but the form's
alignment is totally messed up: https://snag.gy/GqUshp.jpg

Kindly help me fix this issue.

Pablo · July 2019

1) I can see that button looks okay, did you fix it?

On which browser do you test it?

2) Just use CSS to style it.

Look, I've just applied 25px of padding inside that box and it looks better.

http://prntscr.com/o8yti6

Thanks

imabhiraj · July 2019

Hi Pablo,

The CSS worked fine in the Firefox Mozila browser, however the alignment still look messed up in Internet explorer & chrome.

https://snag.gy/z4t8j1.jpg

Pablo · July 2019

Yes, that normal behavior of CSS.

That's because browsers are rendering(reading code) very different and you have to provide more specific rules to the css code.

More about it here:

https://stackoverflow.com/questions/2954659/css-size-of-buttons-in-chrome-is-different-than-firefox

Thanks

Open Contact Form 7 in a Pop-up

Comments