Попытка применить стили к форме ведущего генератора на страницах моего блога WP

Question

Мой менеджер попросил меня создать механизм для создания потенциальных клиентов, добавив во все наши сообщения в блоге форму, предлагающую посетителю получить эту статью в формате PDF, отправив свой адрес электронной почты в форме, расположенной в теле документа. текстовое содержание поста в блоге.

Итак, я встроил код для формы в текстовый файл статьи, эта форма поставляется со стилями, которые в оригинальной версии выглядят не очень хорошо, поэтому мне нужно было стилизовать форму с помощью CSS, чтобы она выглядела немного лучше.

После того, как я оформлю форму, мне нужно будет использовать селекторы для стилизации формы, встроенной в сообщение. Поскольку форма имеет изменяемые идентификаторы, я должен использовать селекторы, которые «начинаются с», чтобы я мог выбирать их по первой части идентификатора.

У меня есть 2 проблемы: одна связана со стилем формы так, как мне нужно, а другая глобально применяет эти изменения к форме, потому что я добавлю ее во все сообщения блога.

Вот ссылка на статью с формой - https://www.treasy.com.br/blog/modelo-gecon/ (форма в конце поста с серыми блоками и зеленой кнопкой отправки)

Я работал с программистом, и он стилизовал его с помощью инспектора, хотя он смог стилизовать его с помощью инспектора, он не задокументировал эти изменения, поэтому я не смог воспроизвести те стили, которые он поместил. Вот как я хотел, чтобы эта форма выглядела следующим образом: https://www9.online -convert.com / dl / web1 / download-file / d5f5806e-e36d-4ced-af8c-d694c2e55bdc / imagem.webp

Вот что программист прислал мне в качестве «документации» о стилях, которые он поместил (но, как я уже сказал, я не могу повторно применить эти стили):

#conversion-baixe-este-artigo-em-pdf-d254cfca8ed02e7333bb
.wrapper
element.style {
    width: 35em !important;
    text-align: center !important;
}

Sem tempo para ler agora? Baixe este artigo em PDF para ler mais tarde.
<h1>
{
    padding-top: 1em !important;
}

<section> Contem o email e botão baixar PDF
{
    width: auto !important;
}

#conversion-form-baixe-este-artigo-em-pdf-d254cfca8ed02e7333bb
<form>
{
    text-align: center !important;
    width: auto !important;
    padding-bottom: .5em !important;
}

Div do Campo de Email
.field
<div>
{
    display: inline-block !important;
    min-width: 23em !important;
    text-align: left !important;
    margin: 0 !important;
}



Div do Botão Baixar PDF
.actions
<div>
{
    display: inline-block !important;
}

#I tried to create selectos to place the styles to modify the form in the header of the global settings of my site, but not all styles applied, I don't have experience with it and not sure what is wrong, but here it is:

lucas.bittencurt [3:54 PM]
div[id^="baixe-este-artigo-em-pdf"] {
   width: 35em !important;
   text-align: center !important;
   margin: 0 auto;
   padding-top: 1em;
}


#conversion-baixe-este-artigo-em-pdf-d254cfca8ed02e7333bb section div.field, #conversion-modal-baixe-este-artigo-em-pdf-d254cfca8ed02e7333bb .modal-content section form div.field {
   display: inline-block !important;
   width: 69% !important;
}

div[id^="baixe-este-artigo-em-pdf"] actions {
   display: inline-block !important;
   width: 30% !important;
}
div[id^="baixe-este-artigo-em-pdf"] field {
   display: inline-block !important;
   width: 69% !important;
}
div[id^="baixe-este-artigo-em-pdf"] actions > call_button {
   padding: 6px 0 6px 0 !important;
   margin: 0!important;
}

form[id^="conversion-form-baixe-este-artigo-em-pdf"] header {
   padding: 10px 0px 0px 0!important;
   margin: 0 !important;
   background-color: #dbdbdb !important;
}
form[id^="conversion-form-baixe-este-artigo-em-pdf"] section {
  padding: 6px 20px 20px 20px!important;
}

Как я могу это исправить?