Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> 

<div class="popup popup-form-two">

        <div class="container__step">
            <form name="form">
                <div class="swiper-container swiper-container-sub">

                    <div class="swiper-wrapper">

                        <div class="swiper-slide">

                            <!-- form 1 -->

                            <div class="form" name="form">

                                <div class="container__step__header">
                                    <h3>расчет стоимости</h3>
                                    <div id="close" class="close close__sub"></div>

                                </div>

                                <div class="container__step__main">


                                    <div class="container__step__flex">
                                        <div>
                                            <h4>Куда вы планируете устанавливать окна</h4>
                                        </div>

                                        <div class="media__with__sub">
                                            <label> 
                                            <img src="img/stepone/1.jpg" alt="stepone">
                                            <div class="input__form__flex">
                                            <input id="allow_one" class="check__one" name="where" type="radio" data-form="formOne" > <span>Квартира</span>
                                        </div>
                                    </label>
                                        </div>
                                        <div class="media__with__sub">
                                            <label><img src="img/stepone/2.jpg" alt="stepone">
                                            <div class="input__form__flex">
                                                <input id="allow" name="where" type="radio" data-form="formTwo">
                                                <span>Частный дом</span>
                                            </div></label>
                                        </div>
                                        <div class="media__with__sub">
                                            <label><img src="img/stepone/3.jpg" alt="stepone">
                                            <div class="input__form__flex">
                                                <input id="allow_two" name="where" type="radio" data-form="formThree" ><span>Дача</span>
                                            </div></label>
                                        </div>
                                        <div>
                                            <label>
                                            <img 
                                        </div>
                                        </label>
                                        </div>

                                    </div>
                                    <div>
                                        <div class="container__step__flex__sub">
                                            <div class="container__step__title">
                                                <p>После опроса вы сможете<br> выбрать один из подарков:</p>
                                            </div>
                                            <div><img src="img/123.jpg" alt=""></div>
                                            <!-- <div><img src="img/stepsub/2.jpg" alt=""></div>
                                        <div><img src="img/stepsub/3.jpg" alt=""></div> -->
                                            <div class="container__step__bacground">
                                                <p>
                                                    Шаг 1 из 7
                                                </p>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                                <div class="navigation navigation__one " id="nav__left">
                                    <div class="swiper-button-pre none__swip__pre"></div>
                                    <div class="swiper-button-nex" id="swiper__button">
                                        <input class="btn__sub" type="submit" id="submit"  value="Дальше &#8594;">
                                        <!-- <p>Дальше &#8594;</p> -->
                                        </input>
                                    </div>

                                </div>


                            </div>

                        </div>
                        <div class="swiper-slide">


                            <!-- form 2-1  -->
                            <div id="formOne" class="form form__two__one" name="form">

                                <div class="container__step__header">
                                    <h3>расчет стоимости</h3>
                                    <div id="close" class="close  close__sub"></div>

                                </div>

                                <div class="container__step__main">


                                    <div class="container__step__flex">
                                        <div>
                                            <h4>В каком доме вы живете:</h4>
                                        </div>

                                        <div class="media__with">
                                            <label>  <img src="img/steptwo/1.jpg" alt="stepone">
                                        <div class="input__form__flex">
                                            <input name="name" type="radio"><span> Панельный</span>
                                        </div></label>
                                        </div>
                                        <div class="media__with">
                                            <label><img src="img/steptwo/2.jpg" alt="stepone">
                                            <div class="input__form__flex">
                                                <input name="name" type="radio"><span>Монолитный</span>
                                            </div></label>
                                        </div>
                                        <div>
                                            <label> <img src="img/steptwo/3.jpg" alt="stepone">
                                        <div class="input__form__flex">
                                            <input name="name" type="radio"><span>Кирпичный</span>
                                        </div></label>
                                        </div>


                                    </div>
                                    <div>
                                        <div class="container__step__flex__sub">
                                            <div class="container__step__title">
                                                <p>После опроса вы сможете<br> выбрать один из подарков:</p>
                                            </div>
                                            <div><img src="img/123.jpg" alt=""></div>
                                            <!-- <div><img src="img/stepsub/1.jpg" alt=""></div>
                                        <div><img src="img/stepsub/2.jpg" alt=""></div>
                                        <div><img src="img/stepsub/3.jpg" alt=""></div> -->
                                            <div class="container__step__bacground">
                                                <p>
                                                    Шаг 2 из 7
                                                </p>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                                <div class="navigation navigation__one ">
                                    <div class="swiper-button-pre">
                                        <p>
                                            &#8592; Назад
                                        </p>
                                    </div>
                                    <div class="swiper-button-nex">
                                        <p>Дальше &#8594;</p>
                                    </div>

                                </div>


                            </div>
                            <!-- form 2-2  -->
                            <div id="formTwo" class="form form__two__two" name="form">

                                <div class="container__step__header">
                                    <h3>расчет стоимости</h3>
                                    <div id="close" class="close  close__sub"></div>

                                </div>

                                <div class="container__step__main">


                                    <div class="container__step__flex">
                                        <div class="three__form">
                                            <h4>Какая у вас дача:</h4>
                                        </div>

                                        <div class="media__with">
                                            <label>
                                        <img src="img/steptwo/1-2.jpg" alt="stepone">
                                        <div class="input__form__flex">
                                            <input name="name" type="radio"> <span>Из бруса</span>
                                        </div>
                                       </label>
                                        </div>
                                        <div class="media__with">
                                            <label><img src="img/steptwo/2-2.jpg" alt="stepone">
                                            <div class="input__form__flex">
                                                <input name="name" type="radio"><span>Щитовая</span>
                                            </div></label>
                                        </div>
                                        <div class="media__with">
                                            <label>
                                        <img src="img/steptwo/2-3.jpg" alt="stepone">
                                        <div class="input__form__flex">
                                            <input name="name" type="radio"><span>Кирпич / ПГС</span>
                                        </div>
                                       </label>
                                        </div>


                                    </div>
                                    <div>
                                        <div class="container__step__flex__sub">
                                            <div class="container__step__title">
                                                <p>После опроса вы сможете<br> выбрать один из подарков:</p>
                                            </div>
                                            <div><img src="img/123.jpg" alt=""></div>
                                            <!-- <div><img src="img/stepsub/1.jpg" alt=""></div>
                                        <div><img src="img/stepsub/2.jpg" alt=""></div>
                                        <div><img src="img/stepsub/3.jpg" alt=""></div> -->
                                            <div class="container__step__bacground">
                                                <p>
                                                    Шаг 2 из 7
                                                </p>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                                <div class="navigation navigation__one">
                                    <div class="swiper-button-pre">
                                        <p>
                                            &#8592; Назад
                                        </p>
                                    </div>
                                    <div class="swiper-button-nex">
                                        <p>Дальше &#8594;</p>
                                    </div>

                                </div>


                            </div>
                            <!-- form 2-3  -->
                            <div id="formThree" class="form form__two__three" name="form">

                                <div class="container__step__header">
                                    <h3>расчет стоимости</h3>
                                    <div id="close" class="close  close__sub"></div>

                                </div>

                                <div class="container__step__main">


                                    <div class="container__step__flex">
                                        <div>
                                            <h4>Материал стен Вашего дома:</h4>
                                        </div>

                                        <div class="media__with">
                                            <label>
                                        <img src="img/steptwo/3-1.jpg" alt="stepone">
                                        <div class="input__form__flex">
                                            <input name="name" type="radio"> <span>Бревенчатый</span>
                                        </div>
                                       </label>
                                        </div>
                                        <div class="media__with">
                                            <label>
                                            <img src="img/steptwo/3-2.jpg" alt="stepone">
                                        <div class="input__form__flex">
                                            <input name="name" type="radio"><span>Кирпич</span>
                                        </div>
                                        </label>
                                        </div>
                                        <div class="media__with">
                                            <label>
                                        <img src="img/steptwo/3-3.jpg" alt="stepone">
                                        <div class="input__form__flex">
                                            <input name="name" type="radio"><span>ПГС</span>
                                        </div>
                                       </label>
                                        </div>


                                    </div>
                                    <div>
                                        <div class="container__step__flex__sub">
                                            <div class="container__step__title">
                                                <p>После опроса вы сможете<br> выбрать один из подарков:</p>
                                            </div>
                                            <div><img src="img/123.jpg" alt=""></div>
                                            <!-- <div><img src="img/stepsub/1.jpg" alt=""></div>
                                        <div><img src="img/stepsub/2.jpg" alt=""></div>
                                        <div><img src="img/stepsub/3.jpg" alt=""></div> -->
                                            <div class="container__step__bacground">
                                                <p>
                                                    Шаг 2 из 7
                                                </p>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                                <div class="navigation navigation__one">
                                    <div class="swiper-button-pre">
                                        <p>
                                            &#8592; Назад
                                        </p>
                                    </div>
                                    <div class="swiper-button-nex">
                                        <p>Дальше &#8594;</p>
                                    </div>

                                </div>


                            </div>
                        </div>
                        <div class="swiper-slide">
                            <!-- form 3  -->
                            <div class="form ">

                                <div class="container__step__header">
                                    <h3>расчет стоимости</h3>
                                    <div id="close" class="close  close__sub"></div>

                                </div>

                                <div class="container__step__main">


                                    <div class="container__step__flex">
                                        <div class="three__form">
                                            <h4>У вас за окном:</h4>
                                        </div>

                                        <div class="media__with">
                                            <label>
                                        <img src="img/stepthree/1.jpg" alt="stepone">
                                        <div class="input__form__flex">
                                            <input type="radio"> <span>Тихий двор</span>
                                        </div>
                                       </label>
                                        </div>
                                        <div class="media__with">
                                            <label>
                                        <img src="img/stepthree/2.jpg" alt="stepone">
                                        <div class="input__form__flex">
                                            <input type="radio"><span>Улица с автомобильным<br> движениями</span>
                                        </div>
                                       </label>
                                        </div>
                                        <div>
                                            <label>
                                        <img src="img/stepthree/3.jpg" alt="stepone">
                                        <div class="input__form__flex">
                                            <input type="radio"><span>Шумная улица</span>
                                        </div>
                                      </label>
                                        </div>


                                    </div>
                                    <div>
                                        <div class="container__step__flex__sub">
                                            <div class="container__step__title">
                                                <p>После опроса вы сможете<br> выбрать один из подарков:</p>
                                            </div>
                                            <div><img src="img/123.jpg" alt=""></div>
                                            <!-- <div><img src="img/stepsub/1.jpg" alt=""></div>
                                        <div><img src="img/stepsub/2.jpg" alt=""></div>
                                        <div><img src="img/stepsub/3.jpg" alt=""></div> -->
                                            <div class="container__step__bacground">
                                                <p>
                                                    Шаг 3 из 7
                                                </p>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                                <div class="navigation navigation__one">
                                    <div class="swiper-button-pre">
                                        <p>
                                            &#8592; Назад
                                        </p>
                                    </div>
                                    <div class="swiper-button-nex">
                                        <p>Дальше &#8594;</p>
                                    </div>

                                </div>


                            </div>
                        </div>
                        <div class="swiper-slide">
                            <!-- form 4 -->
                            <div class="form ">

                                <div class="container__step__header">
                                    <h3>расчет стоимости</h3>
                                    <div id="close" class="close  close__sub"></div>

                                </div>

                                <div class="container__step__main">


                                    <div class="container__step__flex">
                                        <div class="three__form">
                                            <h4>Ваше окно выходит:</h4>
                                        </div>

                                        <div class="media__with">
                                            <label>
                                        <img src="img/stepfour/1.jpg" alt="stepone">
                                        <div class="input__form__flex">
                                            <input name="name" type="radio"><span> Солнечная сторона</span>
                                        </div>
                                       </label>
                                        </div>
                                        <div class="media__with">
                                            <label>
                                        <img src="img/stepfour/2.jpg" alt="stepone">
                                        <div class="input__form__flex">
                                            <input name="name" type="radio"><span>Теневая сторона</span>
                                        </div>
                                      </label>
                                        </div>
                                        <div>
                                            <label>
                                        <img src="img/stepfour/3.jpg" alt="stepone">
                                        <div class="input__form__flex">
                                            <input name="name" type="radio"><span>Остекленный балкон</span>
                                        </div>
                                       </label>
                                        </div>


                                    </div>
                                    <div>
                                        <div class="container__step__flex__sub">
                                            <div class="container__step__title">
                                                <p>После опроса вы сможете<br> выбрать один из подарков:</p>
                                            </div>
                                            <div><img src="img/123.jpg" alt=""></div>
                                            <!-- <div><img src="img/stepsub/1.jpg" alt=""></div>
                                        <div><img src="img/stepsub/2.jpg" alt=""></div>
                                        <div><img src="img/stepsub/3.jpg" alt=""></div> -->
                                            <div class="container__step__bacground">
                                                <p>
                                                    Шаг 4 из 7
                                                </p>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                                <div class="navigation navigation__one">
                                    <div class="swiper-button-pre">
                                        <p>
                                            &#8592; Назад
                                        </p>
                                    </div>
                                    <div class="swiper-button-nex">
                                        <p>Дальше &#8594;</p>
                                    </div>

                                </div>


                            </div>
                        </div>
                        <div class="swiper-slide">
                            <!-- form  5 -->

                            <div class="form ">

                                <div class="container__step__header">
                                    <h3>расчет стоимости</h3>
                                    <div id="close" class="close  close__sub"></div>

                                </div>

                                <div class="container__step__main">


                                    <div class="container__step__flex">
                                        <div>
                                            <h4>Вы платите за отопление в зимний период: </h4>
                                        </div>

                                        <div>
                                            <label>
                                        <img src="img/stepfive/1.jpg" alt="stepone">
                                        <div class="input__form__flex">
                                            <input name="name" type="radio"> <span>По квитанции ЖКХ</span>
                                        </div>
                                       </label>
                                        </div>
                                        <div>
                                            <label>
                                        <img src="img/stepfive/2.jpg" alt="stepone">
                                        <div class="input__form__flex">
                                            <input name="name" type="radio"><span>По показаниям счетчика</span>
                                        </div>
                                      </label>
                                        </div>



                                    </div>
                                    <div>
                                        <div class="container__step__flex__sub">
                                            <div class="container__step__title">
                                                <p>После опроса вы сможете<br> выбрать один из подарков:</p>
                                            </div>
                                            <div><img src="img/123.jpg" alt=""></div>
                                            <!-- <div><img src="img/stepsub/1.jpg" alt=""></div>
                                        <div><img src="img/stepsub/2.jpg" alt=""></div>
                                        <div><img src="img/stepsub/3.jpg" alt=""></div> -->
                                            <div class="container__step__bacground">
                                                <p>
                                                    Шаг 5 из 7
                                                </p>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                                <div class="navigation navigation__one">
                                    <div class="swiper-button-pre">
                                        <p>
                                            &#8592; Назад
                                        </p>
                                    </div>
                                    <div class="swiper-button-nex">
                                        <p>Дальше &#8594;</p>
                                    </div>

                                </div>


                            </div>
                        </div>
                        <div class="swiper-slide">
                            <!-- form 6 -->
                            <div class="form ">

                                <div class="container__step__header">
                                    <h3>расчет стоимости</h3>
                                    <div id="close" class="close  close__sub"></div>

                                </div>

                                <div class="container__step__main">


                                    <div class="container__step__flex">
                                        <div>
                                            <h4>Какой вы хотите вид новых окон: </h4>
                                        </div>

                                        <div class="media__with">
                                            <label>
                                        <img src="img/ftepsix/1.jpg" alt="stepone">
                                        <div class="input__form__flex">
                                            <input name="name" type="radio"> <span>Классические белые</span>
                                        </div>
                                     </label>
                                        </div>
                                        <div class="media__with">
                                            <label>
                                        <img src="img/ftepsix/3.jpg" alt="stepone">
                                        <div class="input__form__flex">
                                            <input name="name" type="radio"><span>Ламинация под дерево(внутри)</span>
                                        </div>
                                       </label>
                                        </div>
                                        <div class="media__with">
                                            <label>
                                        <img src="img/ftepsix/4.jpg" alt="stepone">
                                        <div class="input__form__flex">
                                            <input name="name" type="radio"><span>Ламинация под дерево (снаружи)</span>
                                        </div>
                                       </label>
                                        </div>
                                        <div class="media__with">
                                            <label>
                                            <img src="img/ftepsix/5.jpg" alt="stepone">
                                        <div class="input__form__flex">
        
                                            <input name="name" type="radio"><span>Ламинация с двух сторон</span>
                                        </div>
                                        </label>
                                        </div>




                                    </div>
                                    <div>
                                        <div class="container__step__flex__sub">
                                            <div class="container__step__title">
                                                <p>После опроса вы сможете<br> выбрать один из подарков:</p>
                                            </div>
                                            <div><img src="img/123.jpg" alt=""></div>
                                            <!-- <div><img src="img/stepsub/1.jpg" alt=""></div>
                                        <div><img src="img/stepsub/2.jpg" alt=""></div>
                                        <div><img src="img/stepsub/3.jpg" alt=""></div> -->
                                            <div class="container__step__bacground">
                                                <p>
                                                    Шаг 6 из 7
                                                </p>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                                <div class="navigation navigation__one">
                                    <div class="swiper-button-pre">
                                        <p>
                                            &#8592; Назад
                                        </p>
                                    </div>
                                    <div class="swiper-button-nex">
                                        <p>Дальше &#8594;</p>
                                    </div>

                                </div>


                            </div>
                        </div>
                        <div class="swiper-slide">
                            <!-- five 7 -->
                            <div class="form ">

                                <div class="container__step__header">
                                    <h3>расчет стоимости</h3>
                                    <div id="close" class="close  close__sub"></div>

                                </div>

                                <div class="container__step__main container__step__last">


                                    <div id="container__step__flex__last">
                                        <div>
                                            <h4>Отлично, выберите подарок (получите после установки): </h4>
                                        </div>

                                        <div class="last__form">
                                            <div>
                                                <img class="not__img" src="img/last123.jpg" alt="">
                                            </div>

                                            <!-- <div>
                                            <img src="img/last1.jpg" alt="">
                                            <div>
                                                <input name="name" type="radio"><span>На каждое второе окно энергосберегающее стекло</span>
                                            </div>
                                        </div>
                                        <div>
                                            <img src="img/last3.jpg" alt="">
                                            <div>
                                                <input name="name" type="radio"><span>Каждая третья москитная сетка в заказе</span>
                                            </div>
                                        </div>
                                        <div>
                                            <img src="img/last2.jpg" alt="">
                                            <div>
                                                <input name="name" type="radio"><span>При заказе от 3-х окон – набор средств по уходу за окнами пвх</span>
        
                                            </div>
                                        </div> -->
                                        </div>
                                        <div class="last__form__input">
                                            <label>
                                        <div class="input__form__flex">
                                            <input name="name" type="radio"><span>На каждое второе окно энергосберегающее стекло</span>
                                        </div>
                                       </label>
                                            <label>
                                        <div class="input__form__flex">
                                            <input name="name" type="radio"><span>Каждая третья москитная сетка в заказе</span>
                                        </div>
                                      </label>
                                            <label>
                                        <div class="input__form__flex">
                                            <input name="name" type="radio"><span>При заказе от 3-х окон – набор средств по уходу за окнами пвх</span>
        
                                        </div>
                                       </label>
                                        </div>

                                        <div>
                                            <p>
                                                Веедите свой номер телефона, наш менеджер рассчитает стоимость и перезвонит вам
                                            </p>
                                        </div>
                                        <div class="form__last__input">
                                            <form action="form" class="from " name="form">

                                                <input type="text" placeholder="Имя">
                                                <input id="form__last__margin" type="text" placeholder="Телефон" required>
                                                <button class="">Отправить</button>

                                            </form>
                                        </div>

                                    </div>



                                </div>
                                <div class="navigation navigation__one " id="last__navigation">
                                    <div class="swiper-button-pre">
                                        <p>
                                            &#8592; Назад
                                        </p>
                                    </div>


                                </div>


                            </div>


                        </div>


                    </div>

                </div>
            </form>


        </div>

    </div>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
              
            
!

CSS

              
                .popup{
  width:900px;
  margin:0 auto;
  
}
.swiper-slide{
  border:1px solid black;
}

.form__two__one{
  display: none;
}
    
.form__two__two{
  display: none;
}


.form__two__three{
  display: none;
}

.d-block {
  display: block;
}
              
            
!

JS

              
                var swiper = new Swiper('.swiper-container-sub', {
   

    observer: true,
    observeParents: true,
    spaceBetween: 30,

    navigation: {
        nextEl: '.swiper-button-nex',
        prevEl: '.swiper-button-pre',
    },


});



var inputName = document.querySelectorAll('[name="where"]');

if (inputName) {
    inputName.forEach(function(el) {
        el.addEventListener('change', changeSlide);

    });
}

function changeSlide(evt) {
    var dataForm = evt.target.dataset.form;
    if (document.querySelector('.d-block')) document.querySelector('.d-block').classList.remove('d-block');
  
    var form = document.querySelector("#" + dataForm);
    form.classList.add('d-block');
}

              
            
!
999px

Console