Piano Piano, ninja form sta conquistando sempre più le mie installazioni ( a discapito del sempre ottimo contact form 7)… questo vuol dire che mi sono dovuto cercare / imparare / ingegnare per modificare i css per modificare la grafica di Ninja Forms.
vedi anche: I top 5 form per WordPress (optin & contact form per Wp)
Esiste la possibilità di comprare un add-on per farlo, ma devo dire che l’addon è cosi compreto da avere fin troppe opzioni e si perde molto tempo per metterlo come si vuole.
Sulla falso riga di quelli di Contact Form 7 (che trovate qui: modificare i form di Contact form 7) ecco quindi
Come Modificare i form e i bottoni di Ninja Form
Note: articolo relativo fino alla versione 2.x di Ninja forms… con la Versione 3.x verrà aggiornato
Modificare i form di Ninja Forms
/* The full form */
#ninja_forms_form_1_wrap {
background-color: #f89a16;
padding: 20px;
border: 2px solid #ccc;
border-radius: 8px;
box-shadow: 0px 3px 5px #444;
}
/* Fields marked with an * are required text */
.ninja-forms-required-items {
margin-bottom: 15px;
}
/* All Input fields */
.ninja-forms-field {
background-color: #e5e5e7;
border: 1px solid #fff;
font-size: 16px;
border-radius: 5px;
}
/* Name field label and input box.
NB! Notice the styling changes on resizing the browser. Fix this in your media queries. This will change from theme to theme.*/
#ninja_forms_field_1_div_wrap,
#ninja_forms_field_1 {
width: 47%;
min-width: 220px;
height: 35px;
float: left;
margin-right: 28px;
}
/* Email field input */
#ninja_forms_field_2{
width: 47%;
min-width: 220px;
height: 35px;
float: right;
}
/* Message field input */
#ninja_forms_field_3{
}
/* The Send button */
#ninja_forms_field_5 {
background-color: #8d5303;
border: 1px solid #333;
border-radius: 8px;
text-shadow: 2px 1px 3px #000;
box-shadow: 0px 3px 5px #444;
}
/* The Send button – hover – mouse over effect */
#ninja_forms_field_5:hover{
background-color: #8d5303;
border: 1px solid #ccc;
text-shadow: 0px 0px 2px #ccc;
box-shadow: 1px 1px 2px #ccc;
}
Questi sono i codici dell’HTML
**** The full form area. To edit the look of the form edit either the following id or the class. ***
<div id="ninja_forms_form_1_cont" class="ninja-forms-cont">
<div id="ninja_forms_form_1_wrap" class="ninja-forms-form-wrap">
<div id="ninja_forms_form_1_response_msg" class="ninja-forms-response-msg "></div>
***** The form fields area.***
<form id=”ninja_forms_form_1″ class=”ninja-forms-form” action=”” enctype=”multipart/form-data” method=”post” name=””><input id=”_wpnonce” name=”_wpnonce” type=”hidden” value=”905e7362bc” /><input name=”_wp_http_referer” type=”hidden” value=”/test/?page_id=62&preview=true&form_id=1″ /> <input name=”_ninja_forms_display_submit” type=”hidden” value=”1″ />
<input id=”_form_id” name=”_form_id” type=”hidden” value=”1″ />
<div id=”ninja_forms_form_1_all_fields_wrap” class=”ninja-forms-all-fields-wrap”>
***** The text: “Fields marked with an * are required” *****
<div class=”ninja-forms-required-items”>Fields marked with an <span class=”ninja-forms-req-symbol”>*</span> are required</div>
***** Name field label *****
<div id=”ninja_forms_field_1_div_wrap” class=”field-wrap text-wrap label-above” data-visible=”1″><input id=”ninja_forms_field_1_type” type=”hidden” value=”text” />
<label class=”” for=”ninja_forms_field_1″><label class=”” for=”ninja_forms_field_1″>Name <span class=”ninja-forms-req-symbol”><strong>*</strong></span></label></label>***** Name field input *****
<input id=”ninja_forms_field_1″ class=”ninja-forms-field ninja-forms-req ” name=”ninja_forms_field_1″ type=”text” value=”” placeholder=”” data-mask=”” data-input-limit=”” data-input-limit-type=”” data-input-limit-msg=”” /></div>
***** Email field label *****
<div id=”ninja_forms_field_2_div_wrap” class=”field-wrap text-wrap label-above” data-visible=”1″><input id=”ninja_forms_field_2_type” type=”hidden” value=”text” />
<label id=”ninja_forms_field_2_label” class=”” for=”ninja_forms_field_2″>Email <span class=”ninja-forms-req-symbol”><strong>*</strong></span> </label>***** Email field input *****
<input id=”ninja_forms_field_2″ class=”ninja-forms-field ninja-forms-req email ” name=”ninja_forms_field_2″ type=”text” value=”” placeholder=”” data-mask=”” data-input-limit=”” data-input-limit-type=”” data-input-limit-msg=”” />
<div id=”ninja_forms_field_2_error” class=”ninja-forms-field-error” style=”display: none;”></div>
</div>
***** Message field label *****
<div id=”ninja_forms_field_3_div_wrap” class=”field-wrap textarea-wrap label-above” data-visible=”1″><input id=”ninja_forms_field_3_type” type=”hidden” value=”textarea” />
<label id=”ninja_forms_field_3_label” class=”” for=”ninja_forms_field_3″>Message <span class=”ninja-forms-req-symbol”><strong>*</strong></span> </label>***** Message field input *****
<textarea id=”ninja_forms_field_3″ class=”ninja-forms-field ninja-forms-req” name=”ninja_forms_field_3″ data-input-limit=”” data-input-limit-type=”” data-input-limit-msg=””></textarea>
<div id=”ninja_forms_field_3_error” class=”ninja-forms-field-error” style=”display: none;”></div>
</div>
***** Spam field label *****
<div id=”ninja_forms_field_4_div_wrap” class=”field-wrap spam-wrap label-left” data-visible=”1″><input id=”ninja_forms_field_4_type” type=”hidden” value=”spam” />
<label id=”ninja_forms_field_4_label” class=”” for=”ninja_forms_field_4″>What is thirteen minus 6? <span class=”ninja-forms-req-symbol”><strong>*</strong></span> </label>***** Spam field input *****
<input id=”ninja_forms_field_4″ class=”ninja-forms-field ninja-forms-req” name=”ninja_forms_field_4″ type=”text” value=”” />
<div id=”ninja_forms_field_4_error” class=”ninja-forms-field-error” style=”display: none;”></div>
</div>
***** Send button field *****
<code>
<div id=”ninja_forms_field_5_div_wrap” class=”field-wrap submit-wrap label-above” data-visible=”1″>
<input id=”ninja_forms_field_5_type” type=”hidden” value=”submit” />
<div id=”nf_submit_1″>
<input id=”ninja_forms_field_5″ class=”ninja-forms-field ” name=”_ninja_forms_field_5″ type=”submit” value=”Send” /></div>
<div id=”nf_processing_1″ style=”display: none;”><input id=”ninja_forms_field_5″ class=”ninja-forms-field ” disabled=”disabled” name=”_ninja_forms_field_5″ type=”submit” value=”Processing” /></div>
<div id=”ninja_forms_field_5_error” class=”ninja-forms-field-error” style=”display: none;”</div>
</div>
</div>
</form></div>
</div>
Presi da easywebdesigntutorial.com http://easywebdesigntutorials.com/styling-a-ninja-forms-contact-form/
