Button and Shortcode

  • Hello, I am using two plugins (Contact Form 7 and Colorbox) to generate a contact form in a lightbox. I want this lightbox to display when clicking a button. I am having difficulty integrating the shortcode with the code for the button.

    Lightbox/Contact Form 7 Shortcode: 

    [wp_colorbox_media url="#inline_content" type="inline" hyperlink="click here to open inline HTML"]
<div style="display:none;">
<div id="inline_content" style="add style here if you need">
[contact-form-7 id="77" title="Contact form 1"]
</div>
</div>

    Button Code:

    <button class="button button2">4px</button>

    I also added this to my style.css:

    .button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

    Any help would be appreciated. Thanks!

    • This topic was modified 4 years, 10 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic
Viewing 2 replies - 1 through 2 (of 2 total)

  • That would be a question for the colorbox plugin developers. Please post in the support page for the plugin you are using.

    Thread Starter jfk4100

    (@jfk4100)

    Thanks for the response. I actually figured out a solution. I just wrapped all the shortcode in the button code:

    <button class="button button2">
[wp_colorbox_media url="#inline_content" type="inline" hyperlink="click here to open inline HTML"]
<div style="display:none;">
<div id="inline_content" style="add style here if you need">
[contact-form-7 id="77" title="Contact form 1"]
</div>
</div>
</button>

    That did the trick.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Button and Shortcode’ is closed to new replies.