Search code examples
csswordpresspopupslidercarousel

Pop-up Slider in Wordpress

I have created a pop-up form using Popup maker and Metaslider plugin to allow the user to slide between two different images.

I need to only display the contact form for image 1, and for image 2 i wish to replace the contact form with text.

Code inside popupmaker editor:

<div style="width:700px; height:490px;"> [metaslider id="716"]</div>

&nbsp;
<p style="text-align: center;">[contact-form-7 id="728" 
title="Untitled"]</p>

I tried to use the id of the contact form to hide the image inside the metaslider editor in image 2 using:

.728 {
    display: none;
    }

Unsuccessful. How can I change the CSS below to hide the contact form shortcode for image 1 only?

Solution

  • You can't target a contactform7 by its ID '728' it is only used to find wich form to display.

    As described in your comment, the shortcode displays:

    <div role="form" class="wpcf7" id="wpcf7-f728-o2" lang="en-US" dir="ltr">

    So to hide this particular form with CSS, you need to target its ID on front as follow:

    #wpcf7-f728-o2 {
   display: none;
}