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="☃" />
<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>