[ThomxnjParticipant]

Is it possible to create a modal pop-up with a contact form 7 form inside? I saw somewhere in a forum post that this can be created with a lightbox, but I can not find the post.

Thanks in advance!

[ThaiModerator]

Hi There,
Thanks for writing in.
You can try adding this following code to the page / post content, don’t forget to switch your Content Editor to Text Mode:

<div id="my-content">
  [contact-form-7 id="54" title="Contact Modal"]
</div>

<a href="#my-content" class="lightbox-selector x-btn" data-type="inline">Click Me</a>

[lightbox selector=".lightbox-selector"]

Hope it helps.

[IntegratutionsParticipant]

Hi,

I managed to get it all setup. But I have some extra gap on my form’s top and bottom. Please refer to screenshot : http://tinypic.com/r/35k205i/8

How do I get rid of those gaps/white spaces?

Thanks in advance! 🙂

[IntegratutionsParticipant]

Hi,

I managed to get it all setup. But I have some extra gap on my form’s top and bottom. Please refer to screenshot : http://tinypic.com/r/35k205i/8

http://axiomlearning.sg/primary-school/

How do I get rid of those gaps/white spaces?

And lastly, the q from (required) and g from (Message) is slightly cut off, what’s the best way to align them properly?

Thanks in advance! 🙂

[Prasant RaiModerator]

Hello There,

Thanks for writing in!

Kindly use following CSS under Custom > CSS in the Customizer:

form.wpcf7-form {
    margin-bottom: 0 !important;
}

form.wpcf7-form h4 {
    margin-top: 0.50em !important;
}

.ilightbox-container {
    height: auto !important;
}

Let us know how it goes.

Thanks.

[IntegratutionsParticipant]

Wow, thanks for the quick update. The white spaces on top and bottom have been removed. 🙂

Just need the alignment of the input fields or the field titles to be adjusted so that the “g” and “q” aren’t cut off.
http://tinypic.com/r/npgpcg/8

Thanks again! 🙂

[John EzraMember]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

form.wpcf7-form p {
    line-height: 1.8;
}

Hope this helps – thanks!

[IntegratutionsParticipant]

Yeah. It’s all great now! 🙂

[Paul RModerator]

Good to know.

Have a great day! 🙂

[cooper2121Participant]

How would I put this code :

<div id="my-content">
  [contact-form-7 id="54" title="Contact Modal"]
</div>

<a href="#my-content" class="lightbox-selector x-btn" data-type="inline">Click Me</a>

[lightbox selector=".lightbox-selector"]

Into my theme with cornerstone?

[LelyModerator]

Hello There,

Using Cornerstone, please add a RAW CONTENT element and then enter above code.

Hope this helps.

[niqujaggaParticipant]

Hello

Is it possible, to link a ligthbox not to a button but to an usual link? I imagine a normal textblock and in this text, i link a word to a lightbox containing a form.

[ThaiModerator]

Hi There,

Please update the previous code a bit:

<div id="my-content">
  [contact-form-7 id="177" title="Contact form 1"]
</div>

Hello, click <a href="#my-content" class="lightbox-selector">me</a> to show the lightbox!

[lightbox selector=".lightbox-selector"]

Hope it helps 🙂

[chelseakleinsasserParticipant]

Hello,
I added the code from above:
<div id=”my-content”>
[contact-form-7 id=”54″ title=”Contact Modal”]
</div>

Click Me

[lightbox selector=”.lightbox-selector”]

But it showed up with the contact form showing, with a button underneath. The button works to open up the lightbox, but I would like the form hidden until you click the button.
Here is a screenshot of my form.

[LelyModerator]

Hi There,

Please try updating the code to this:

<div id="my-content" style="display:none;">
[contact-form-7 id="54" title="Contact Modal"]
</div>

Hope this helps.

[Author]

Posts