post #6494
Código CSS Personalização Formulário RD Station
Publicado em: 27/10/2025 / Atualizado em: 24/02/2026
Código CSS básico para personalização e correção de layout do formulário RD Station para ser aplicado de maneira global no site.
<style id="rd-form-custom">
.bricks--component-embeddable-form [id^="rd-column-"] > div, .bricks--component-embeddable-form [id^="rd-section-"] {
background-color: transparent !important;
}
.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form input, .bricks--component-embeddable-form [id^="rd-column-"] .rd-form form select, .bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .bricks-form__input:not(textarea) {
height: 50px !important;
border-radius: 8px !important;
}
.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form input[type="checkbox"] {
width: 20px !important;
height: 20px !important;
border-radius: 4px !important;
}
.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .bricks-form__field__option {
margin-bottom: 6px !important;
}
.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .bricks-form__field__option > .bricks-form__label {
display: flex !important;
gap: 8px !important;
}
.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form textarea {
height: 120px !important;
border-radius: 8px !important;
}
.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .bricks-form__field {
display: flex;
min-height: 80px;
flex-direction: column;
justify-content: flex-end;
}
.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form label {
font-weight: bold !important;
}
.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .select2-container .select2-choice {
margin-top: 6px !important;
padding-left: 12px !important;
height: 48px !important;
border-radius: 8px !important;
}
.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .select2-container .select2-choice .flag {
margin-left: 8px !important;
margin-top: 2px !important;
border-radius: 4px !important;
}
.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .select2-chosen {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
}
.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .phone-country .select2-choice {
margin-top: 0px !important;
margin-left: 0px !important;
height: 0px !important;
border-radius: 0px !important;
}
.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .phone-country {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
}
.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .select2-container-active .select2-choice, .bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .select2-container-active .select2-choices {
box-shadow: none !important;
outline: none !important;
}
.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .select2-container .select2-choice {
background: transparent !important;
}
.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .phone-input-group {
background: #fff;
border: 1px solid #ccc !important;
border-radius: 8px !important;
}
.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .with-select-flags > .phone-input-group > .phone {
border: none !important;
margin-left: -54px !important;
}
.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .select2-container .select2-choice {
margin-bottom: -12px !important;
}
.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form span.select2-arrow {
display: none !important;
}
.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form ul.select2-results li div {
display: flex !important;
flex-direction: row !important;
justify-content: flex-start !important;
align-items: center !important;
gap: 24px !important;
}
.bricks--component-embeddable-form [id^="rd-column-"] .rd-form ul.select2-results li div .flag {
width: 40px !important;
}
.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .bricks--component-button {
background: var(--e-global-color-accent)!important;
color: #fff !important;
border: none !important;
display: block !important;
}
</style>Publicações recomendadas:
Link Direto
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.
bruno.art.br/?p=6494
ID de Referência: 6494
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.