Add Contact Form 7 shortcode to lightbox / modal window of Enfold. - Support

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts
May 28, 2017 at 5:01 pm #800836

kirillko
Participant

Hi,

Welcome

Building a website for my client, having troubles figuring out how to add a short code to a button in the slider or any other button on the website?

Currently I’ve installed Modal Window plugin, but don’t understand why I need modules for that?

Perhaps this can be done with Enfold without any plugins?

Instructions would be welcomed.

Thanks!
Kirill

May 28, 2017 at 6:21 pm #800860

Mike
Moderator

Hey kirillko,
If I understand correctly, you want to get the shortcode for a button. Open the editor on any post and click the shortcode wand in the tool bar, fill out the button info and copy the generated shortcode.

Best regards,
Mike

May 28, 2017 at 7:39 pm #800878

kirillko
Participant

Hi,
Thank you for your answer, however I think that’s not what I want.
1.I have a shortcode: [contact-form-7 id=”902″ title=”Contact form 1″]
2. Enfold has button elements.
3. Button element can include post/page/category or link – for example youtube link.
4. The youtube link opens in a modal / lightbox window – that’s great.
5. But I need the button to open a modal / lightbox winow with [contact-form-7 id=”902″ title=”Contact form 1″] shortcode.
6. Video illustrating my struggles: https://screencast.com/t/btbvwZLp
Thanks!
Kirill

May 29, 2017 at 12:30 pm #801037

Yigit
Keymaster

Hi,

Please refer to my post here – https://kriesi.at/support/topic/lightbox-for-mailchimp-form/#post-582439

Best regards,
Yigit

May 29, 2017 at 5:30 pm #801161

kirillko
Participant

Hi,

Guys, big thank you for helping me solving this one, I just love Enfold, building sites for my customers only using Enfold and will continue. However I am still stuck. Please help.
Troubleshooting steps:
1. Activated the debug mode.
2. 1st Code block added: https://www.screencast.com/t/PUPsVJu3sQ
3. 2nd Code block added: https://screencast.com/t/z9Wr3Qj20
4. CSS added to enfold quick css: https://screencast.com/t/F9hPPG4mH
5. Code added to functions.php: https://screencast.com/t/KdVOBfHKV9
6. Result, after clicking on the links page moves but lightbox with form doesn’t appear: https://screencast.com/t/vaDFRZcZyClk

What could be wrong? Provided access to website. Thanks!

Kirill

May 29, 2017 at 6:09 pm #801178

Yigit
Keymaster

Hi Kirill,

I created a private testing page (attached in private content field). Please check out the button at the bottom of the page and copy the code to your homepage :)

Best regards,
Yigit

May 29, 2017 at 6:19 pm #801181

kirillko
Participant

Hi Yigit,

Bravo man! Super! Thanks!

Last quick question, what’s the right practice to add now this to a enfold button here? Tried with a #test-pop link doesn’t work.
https://screencast.com/t/Yg1Z82VDL

Once again big thanks!
Kirill

May 29, 2017 at 6:52 pm #801192
Yigit
Keymaster
Hi Kirill,

Please add following code to Quick CSS in Enfold theme options under General Styling tab
```
.open-popup-link { 
    background-color: #d63e2d;
    color: #ffffff;
    border-color: #b41c0b;
    padding: 9px 10px 7px;
    font-size: 13px;
    min-width: 80px;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: normal;
    text-align: center;
    max-width: 100%;
}
```
Best regards,
Yigit
May 29, 2017 at 7:37 pm #801210

kirillko
Participant

Hi Yigit,

Thanks again, however this time nothing changed.

So I am trying to add a #test-popup in a enfold button to open a lightbox with the contact form inside.

Will be waiting for your reply, mega thanks!
Kirill

May 29, 2017 at 7:44 pm #801212

kirillko
Participant

Hi,

By nothing changed I mean added the css code, however after clicking the lightbox doesn’t pop-up but the page moves.

Thanks!
Kirill

May 30, 2017 at 8:09 pm #801654

kirillko
Participant

Hi Enfold,

Any luck solving my question about how to add this shortcode form to a Enfold Button element?

Thanks!
Kirill

June 1, 2017 at 8:01 am #802394

Ismael
Moderator

Hi,

Please do the modification as suggested here then copy the enfold button’s css properties and apply it the custom button.

Best regards,
Ismael

June 1, 2017 at 10:05 am #802444

kirillko
Participant

Hi,

But I did, copy the CSS code to Enfold general styling css.

1. It works on the page if I click on the new code block added, however I am struggling to implement this to the enfold button in the slider.
2. I added the #test-popup tag to the button link, but that doesn’t work.

Please help, thanks.
Kirill

June 1, 2017 at 5:16 pm #802664

Yigit
Keymaster

Hi,

Please work on the testing page we created and try adding the complete code into slider caption. Unfortunately further customization would be out of the scope of our support

Best regards,
Yigit

June 1, 2017 at 5:27 pm #802671

kirillko
Participant

Hi Yigit,

Thank you very much for your assistance. Now I get it. I added the code to caption and it works indeed, I was previoysly trying to add to Enfold button itself… Never mind :)

I am an IT project manager in a company and also running my own small business, building websites for customers (95% on Enfold :P), so I know what out of scope is.

Thank you once again Yigit for the assistance. Wish you a good luck, salary increase, awesome weekends, summer and all those good things in one bundle.

Enfold is great!
Kirill

June 1, 2017 at 5:29 pm #802673

Yigit
Keymaster

Hi Kirill,

Glad it is working fine now and thanks for your understanding! :)

Also, thanks for your good wishes. I am wishing the same for you ;D

Enjoy your weekend and let us know if you have any other questions or issues!

Best regards,
Yigit
Author

Posts

Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘Add Contact Form 7 shortcode to lightbox / modal window of Enfold.’ is closed to new replies.