0

I have some problems with the Pardot layout css. I trying to customize a form and I need to add classes to design the different fields. There was no problem to create new classes, the code looks like this:

        form.form .ownclass{
        margin-left:40px; !important;
        }

        form.form .ownclass label{
              font-size: 14px; !important;
              font-weight: bold !important;
         }  

I dont know if this is the best way, but it is working. The problem is, I have some radio buttons for example. I want to change the font-weight of the heading, but not the font-weight of the text next to the radio buttons. When I try the label code above, i alway change the the heading an the text of the options. Same problem with checkboxes. Any idea how can I adress my code only to the heading or to radio button option?

Thanks for any help.

Edit:

There is this strange pardot hmtl code. Here it is:

<form accept-charset="UTF-8" method="post" action="%%form-action-url%%" class="form" id="pardot-form">

%%form-opening-general-content%%


%%form-if-thank-you%%
    %%form-javascript-focus%%
    %%form-thank-you-content%%
    %%form-thank-you-code%%
%%form-end-if-thank-you%%

%%form-if-display-form%%

    %%form-before-form-content%%
        %%form-if-error%%
            <p class="errors">Please correct the errors below:</p>
        %%form-end-if-error%%
        <br/>
        %%form-start-loop-fields%%
        <section class="container">
        <div class="row col-md-12 col-sm-12">
            <p class="form-field %%form-field-css-classes%% %%form-field-class-type%% %%form-field-class-required%% %%form-field-class-hidden%% %%form-field-class-no-label%% %%form-field-class-error%% %%form-field-dependency-css%%" style="padding-left:-160px;">
                %%form-if-field-label%%
                    <label class="field-label" for="%%form-field-id%%">%%form-field-label%%</label>
                %%form-end-if-field-label%%

                %%form-field-input%%
                %%form-if-field-description%%
                    <span class="description">%%form-field-description%%</span>
                %%form-end-if-field-description%%
            </p>
            <div id="error_for_%%form-field-id%%" style="display:none"></div>
            %%form-field-if-error%%
                <p class="error no-label">%%form-field-error-message%%</p>
            %%form-field-end-if-error%%
</div></section>
        %%form-end-loop-fields%%


        %%form-spam-trap-field%%

        <!-- forces IE5-8 to correctly submit UTF8 content  -->
        <input name="_utf8" type="hidden" value="&#9731;" />

        <section class="container">
        <div class="row col-md-12 col-sm-12">

        <br/>
        <br/>
        <p class="submit">
            <input type="submit" accesskey="s" value="%%form-submit-button-text%%" %%form-submit-disabled%%/>
        </p>

    %%form-after-form-content%%
    </div>
    </section>
%%form-end-if-display-form%%

%%form-javascript-link-target-top%%
</form>

Edit 2: Here is the html code of the checkbox:

        <section class="container">
    <div class="row col-md-12 col-sm-12">
        <p class="form-field ownclass Custom_5018_V_M_Alle pd-checkbox required required-custom    " style="padding-left:-160px;">

                <label class="field-label" for="310831_66701pi_310831_66701">Title of the checkbox *</label>


            <span class="value"><span><input type="checkbox" name="310831_66701pi_310831_66701_526719" id="310831_66701pi_310831_66701_526719" value="526719" onchange="" /><label class="inline" for="310831_66701pi_310831_66701_526719">Option 1</label></span><span><input type="checkbox" name="310831_66701pi_310831_66701_526721" id="310831_66701pi_310831_66701_526721" value="526721" onchange="" /><label class="inline" for="310831_66701pi_310831_66701_526721">Option 2</label></span></span>

        </p>
        <div id="error_for_310831_66701pi_310831_66701" style="display:none"></div>

    <section class="container">
    <div class="row col-md-12 col-sm-12">
        <p class="form-field ownclass Opt_in_Status pd-checkbox required required-custom    " style="padding-left:-160px;">

                <label class="field-label" for="310831_67219pi_310831_67219">Überschrift *</label>


            <span class="value"><span><input type="checkbox" name="310831_67219pi_310831_67219_529439" id="310831_67219pi_310831_67219_529439" value="529439" onchange="" /><label class="inline" for="310831_67219pi_310831_67219_529439">Text for the checkbox</label></span></span>

        </p>
        <div id="error_for_310831_67219pi_310831_67219" style="display:none"></div>

Here is the html code of a radio button:

    <section class="container">
    <div class="row col-md-12 col-sm-12">
        <p class="form-field  salutation pd-radio required required-custom    " style="padding-left:-160px;">

                <label class="field-label" for="310831_66691pi_310831_66691">Title of the radio button *</label>


            <span class="value"><span class="" style=""><input type="radio" name="310831_66691pi_310831_66691[]" id="310831_66691pi_310831_66691_526699_526699" value="526699" onchange="" /><label class="inline" for="310831_66691pi_310831_66691_526699_526699"> Frau</label></span><span class="" style=""><input type="radio" name="310831_66691pi_310831_66691[]" id="310831_66691pi_310831_66691_526701_526701" value="526701" onchange="" /><label class="inline" for="310831_66691pi_310831_66691_526701_526701"> Herr</label></span></span>

        </p>
        <div id="error_for_310831_66691pi_310831_66691" style="display:none"></div>
Tob
  • 1
  • 1
  • 1
    Please share your HTML code.. – Sunil R. Nov 27 '19 at 12:38
  • Pardot can be hard to work with, edit the question with the RENDERED HTML for the section you are trying to change (keep the Pardot template as well) - no need to share the whole form markup - just need to see how it's rendering the checkboxes/radio buttons – disinfor Nov 27 '19 at 14:50
  • I've added the code. Thanks for your input. – Tob Nov 27 '19 at 15:02
  • The `label` elements have classes. Did you try `label.field-label { styles }`? Not sure what else you might be looking for. – disinfor Nov 27 '19 at 15:22
  • Oh now it is working, thanks for your help. Maybe font-weight was a bald example. I tried the same code with the font-size and it worked. I think there the font-weight is overwritten later in the code. – Tob Nov 27 '19 at 15:49

0 Answers0