Поддержка Проблемы и решения Проблема применения стилей к форме

  • Добрый вечер.
    Устанавливаю на сайт Wp. При переносе формы контактов на WP не применяются стили к этой форме.
    Теперь подробнее. У меня код формы у index.php вот такой:

    <form action=»#» class=»contacts__feed»>
    <div class=»contacts__input»>
    <input name=’feedname’ id=»feedname» type=»text»>
    <div class=»label-form»>
    <label for=»feedname»>Ваше ім’я</label>
    </div>
    </div>

    <div class=»contacts__input»>
    <input name=»feedemail» id=»feedemail» type=»email»>
    <div class=»label-form»>
    <label for=»feedemail»>Ваша пошта</label>
    </div>
    </div>
    <div class=»contacts__textarea»>
    <textarea name=»feedtext» id=»feedtext»></textarea>
    <div class=»label-form»>
    <label for=»feedtext»>Ваше повідомлення</label>
    </div>
    </div>
    <div class=»contacts__triggers»>
    <button class=»contacts__btn btn»>Відправити повідомлення</button>
    <div class=»contacts__policy»>
    <input name=»feedcheckbox» id=»feedcheckbox» required type=»checkbox»>
    <span>Я згоден(а) з політикою конфіденційності</span>
    </div>
    </div>
    </form>

    Как видно у данном случаи у формы (form) есть класс class=»contacts__feed»
    при установлении WP мы удаляем полностью форму (код выше) в index.php и на его месте
    пишем такой вот код:

    <div class=»contacts__feed»>
    <?php echo do_shortcode( ‘[contact-form-7 id=»337″ title=»Форма Контакты»]’ ); ?>
    </div>

    Тоесть код формы с wp я обернул в div которому присвоил удаленный класс class=»contacts__feed»
    но стили этого класса не применяются к форме в таком случаи и форма остается сплющенной и некрасивой в браузере.
    Тоесть в данном случаи к div стиле не применяются аналогично как они применялись к form.
    Как быть в этом случаи?
    Так же для полной картины проблемы напишу, что у WP c помощю плагина wp для контактов создал вот такой код:
    У WP код у меня такой:

    <div class=»contacts__input»>[text* feedname id:feedname]<div class=»label-form»><label for=»feedname»>Ваше ім’я</label></div></div>
    <div class=»contacts__input»>[email* feedemail id:feedemail]<div class=»label-form»><label for=»email»>Ваша пошта</label></div></div>
    <div class=»contacts__textarea»>[textarea* feedtext id:feedtext]<div class=»label-form»><label for=»feedtext»>Ваше повідомлення</label></div></div>
    <div class=»contacts__triggers»><button class=»contacts__btn btn»>Відправити повідомлення</button>
    <div class=»contacts__policy»>[checkbox* feedcheckbox id:feedcheckbox use_label_element]<span>Я згоден(а) з політикою конфіденційності</span></div></div>

    Ошибок не выдает, но стили не применяются к форме!

    Буду очень благодарен за помощь!

    • Тема изменена 3 года, 2 месяца назад пользователем kushnirenko.

    Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 11 ответов — с 1 по 11 (всего 11)
  • Пожалуйста, оформляйте код нормально!!

    стили не применяются к форме!

    Насколько я вижу — применяются:

    .contacts__feed {
        margin-top: 30px;
        display: grid;
        grid-template: 45px 190px 45px/repeat(2, 280px);
        justify-content: space-between;
        grid-row-gap: 28px;
    }

    Хотелось бы узнать где именно код оформлен не правильно

    Модератор Yuri

    (@yube)

    где именно код оформлен не правильно

    В Вашем вопросе. Сравните, как выглядит «код» в Вашем посте и как в посте tuxfighter.

    • Ответ изменён 3 года, 2 месяца назад пользователем Yuri.

    Отредактировать первый вариант не получилось, дублирую отредактированным.
    Устанавливаю на сайт Wp. При переносе формы контактов на WP не применяются стили к этой форме.
    Теперь подробнее. У меня код формы у index.php вот такой:

    <form action="#" class="contacts__feed">
     <div class="contacts__input">
          <input name='feedname' id="feedname" type="text">
          <div class="label-form">
               <label for="feedname">Ваше ім'я</label>
          </div>
    </div>
     <div class="contacts__input">
          <input name="feedemail" id="feedemail" type="email">
          <div class="label-form">
               <label for="feedemail">Ваша пошта</label>
          </div>
    </div>
    <div class="contacts__textarea">
         <textarea name="feedtext" id="feedtext"></textarea>
         <div class="label-form">
              <label for="feedtext">Ваше повідомлення</label>
         </div>
    </div>
    <div class="contacts__triggers">
         <button class="contacts__btn btn">Відправити повідомлення</button>
         <div class="contacts__policy">
              <input name="feedcheckbox" id="feedcheckbox" required type="checkbox">
              <span>Я згоден(а) з <a href="policy.html" target="_blank">політикою конфіденційності</a></span>
          </div>
    </div>
    </form>
    

    Как видно у данном случаи у формы (form) есть класс class=»contacts__feed»
    при установлении WP мы удаляем полностью форму (код выше) в index.php и на его месте
    пишем такой вот код:

    <div class="contacts__feed">
          <?php echo do_shortcode( '[contact-form-7 id="337" title="Форма Контакты"]' ); ?>
     </div>

    Тоесть код формы с wp я обернул в div которому присвоил удаленный класс class=»contacts__feed»
    но стили этого класса не применяются к форме в таком случаи и форма остается сплющенной и некрасивой в браузере.
    Тоесть в данном случаи к div стиле не применяются аналогично как они применялись к form.
    Как быть в этом случаи?
    Так же для полной картины проблемы напишу, что у WP c помощью плагина Contact form 7 для контактов создал вот такой код:

    
    <div class="contacts__input">[text* feedname id:feedname]<div class="label-form"><label for="feedname">Ваше ім'я</label></div></div>
    <div class="contacts__input">[email* feedemail id:feedemail]<div class="label-form"><label for="feedemail">Ваша пошта</label></div></div>
    <div class="contacts__textarea">[textarea* feedtext id:feedtext]<div class="label-form"><label for="feedtext">Ваше повідомлення</label></div></div>
    <div class="contacts__triggers"><button class="contacts__btn btn">Відправити повідомлення</button><div class="contacts__policy">[checkbox* feedcheckbox id:feedcheckbox use_label_element]<span>Я згоден(а) з <a href="policy.html" target="_blank">політикою конфіденційності</a></span></div></div>

    Ошибок не выдает, но стили не применяются к форме!
    Буду очень благодарен за помощь!

    • Ответ изменён 3 года, 2 месяца назад пользователем kushnirenko.
    • Ответ изменён 3 года, 2 месяца назад пользователем kushnirenko.

    Форму обратной связи лучше делать серез плагин, например этот

    https://ru.wordpress.org/plugins/contact-form-7/

    Я через него и делаю
    Просто изначально в index.php у меня прописан код этой формы, и стили соответственно.
    До установления WP выглядит форма красиво (но понятное дело не работает)
    Этот код с index.php я скопировал в плагин Contact form 7 где отредактировал под этот плагин и вывел его в index.php с помощью шорткода:

    <div class="contacts__feed">
          <?php echo do_shortcode( '[contact-form-7 id="337" title="Форма Контакты"]' ); ?>
     </div>

    В предыдущем проекте у меня получилось все аналогичным способом, а в этом проекте почемуто стили не применяются!

    • Ответ изменён 3 года, 2 месяца назад пользователем kushnirenko.
    • Ответ изменён 3 года, 2 месяца назад пользователем kushnirenko.

    почемуто стили не применяются!

    Мне тоже продублировать свой ответ, что применяются?

    вывел его в index.php с помощью шорткода:

    В файлах лучше не вносить изменения, при обновлении они могут удалиться. Код лучше вставлять через HTML виджеты, а стили прописывать, в дополнительных стилях.

    Мне тоже продублировать свой ответ, что применяются?

    Нет дублировать не надо. Я вижу что они применяются, но применяются не корректно.

    но применяются не корректно.

    Стили это такая вещь, которая может либо применяться, либо нет. А всякие «корректно/не корректно» зависят уже от того, кто их писал.

    А всякие «корректно/не корректно» зависят уже от того, кто их писал.

    Спасибо за конструктивный ответ. Вы мне прям очень сильно помогли !

    • Ответ изменён 3 года, 2 месяца назад пользователем kushnirenko.
Просмотр 11 ответов — с 1 по 11 (всего 11)
  • Тема «Проблема применения стилей к форме» закрыта для новых ответов.