Тема: Дизайн калькулятора, CSS, HTML
Если вы хотите применить к калькулятору свое оформление перейдите в настройки калькулятора и укажите в опции: Дизайн калькулятора - "Без темы".
После чего вы сможете применять свое оформление для каркаса калькулятора.
В коде указаны параметры означающие:
WPCC_ID = номер калькулятора
WPCC_FID = номер поля
WPCC_i = порядковый номер в списке, начинается всегда с 1Описание стилей калькулятора
.wpcc {}
.wpcc_form {}
.wpcc_form_WPCC_ID {}
.wpcc_form .wpcc_box {}
.wpcc_form .wpcc_box_WPCC_FID {}
.wpcc_form .wpcc_description {}
.wpcc_form .wpcc_description_empty {}
.wpcc_form .wpcc_fields {}
.wpcc_form .wpcc_fields_WPCC_FID {}
.wpcc_form .wpcc_text {}
.wpcc_form .wpcc_select {}
.wpcc_form .wpcc_select_WPCC_FID {}
.wpcc_form .wpcc_checkbox {}
.wpcc_form .wpcc_checkbox label {}
.wpcc_form .wpcc_checkbox_WPCC_FID {}
.wpcc_form .wpcc_radio {}
.wpcc_form .wpcc_radio label {}
.wpcc_form .wpcc_radio_WPCC_FID {}
.wpcc_form .wpcc_inputtext {}
.wpcc_form .wpcc_inputtext_WPCC_FID {}
.wpcc_form .wpcc_jq_slider_horizontal {}
.wpcc_form .wpcc_jq_slider_vertical {}
.wpcc_form .wpcc_jq_slider {}
.wpcc_form .wpcc_jq_slider_box {}
.wpcc_form .wpcc_jq_slider_box_WPCC_FID {}
.wpcc_form .wpcc_jq_slider_text {}
.wpcc_form .ui-slider-horizontal {}
.wpcc_form .ui-slider-vertical {}
.wpcc_form .ui-slider-range {}
.wpcc_form .ui-slider-horizontal .ui-slider-range {}
.wpcc_form .ui-slider-vertical .ui-slider-range {}
.wpcc_form .ui-slider-handle {}
.wpcc_form .ui-slider-horizontal .ui-slider-handle {}
.wpcc_form .ui-slider-vertical .ui-slider-handle {}
.wpcc_form .wpcc_submit {}
.wpcc_form .wpcc_submit_WPCC_ID {}
.wpcc_result_block {}
.wpcc_result_block_WPCC_ID {}
.wpcc_result {}
.wpcc_result_WPCC_ID {}
.wpcc_result .wpcc_field_result_WPCC_i {}
.wpcc_mail {}
.wpcc_mail_WPCC_ID {}
.wpcc_mail .wpcc_text {}
.wpcc_mail .input {}
.wpcc_mail .textarea {}
.wpcc_mail .wpcc_submit {}
.wpcc_mail .wpcc_error {}
.wpcc_mail .wpcc_mail_success {}
.wpcc_mail .wpcc_submit {}
.wpcc_mail .wpcc_loading {}
.wpcc_widget {}
.wpcc_clear {}HTML структура калькулятора ()
<!-- из структуры вырезаны системные параметры, скрытые поля и стили. -->
<div class="wpcc"> <!-- Если виджет добавляется класс wpcc_widget -->
<form method="POST" action="" class="wpcc_form wpcc_form_WPCC_ID">
<!-- Текстовой блок -->
<!-- Если заголовок пустой добавляется класс wpcc_description_empty -->
<div class="wpcc_box wpcc_box_WPCC_FID">
<div class="wpcc_description">
Текстовой блок
</div>
<div class="wpcc_fields wpcc_text wpcc_text_WPCC_FID">
Пример текста<br>
</div>
<div class="wpcc_clear"></div>
</div>
<!-- Поле SELECT -->
<div class="wpcc_box wpcc_box_WPCC_FID">
<div class="wpcc_description">
Select блок
</div>
<div class="wpcc_fields">
<select name="" class="wpcc_select wpcc_select_WPCC_FID">
<option value="100" selected> Первый селект</option>
<option value="200"> Второй селект</option>
<option value="300"> Третий селект</option>
</select>
</div>
<div class="wpcc_clear"></div>
</div>
<!-- Поле Checkbox -->
<div class="wpcc_box wpcc_box_WPCC_FID">
<div class="wpcc_description">
Чекбокс блок
</div>
<div class="wpcc_fields wpcc_checkbox wpcc_checkbox_WPCC_FID">
<label><input type="checkbox" name="" value="100"> Первый чекбокс</label>
<label><input type="checkbox" name="" value="200"> Второй чекбокс</label>
<label><input type="checkbox" name="" value="300"> Третий чекбокс</label>
</div>
<div class="wpcc_clear"></div>
</div>
<!-- Поле Radio -->
<div class="wpcc_box wpcc_box_WPCC_FID">
<div class="wpcc_description">
Радио блок
</div>
<div class="wpcc_fields wpcc_radio wpcc_radio_WPCC_FID">
<label><input type="radio" name="" value="100" checked> Первый Radio</label>
<label><input type="radio" name="" value="200"> Второй Radio</label>
<label><input type="radio" name="" value="300"> Третий Radio</label>
</div>
<div class="wpcc_clear"></div>
</div>
<!-- Поле Input Text -->
<div class="wpcc_box wpcc_box_WPCC_FID">
<div class="wpcc_description">
Инпут текст
</div>
<div class="wpcc_fields">
<input type="text" name="" value="" class=" wpcc_inputtext wpcc_inputtext_WPCC_FID">
</div>
<div class="wpcc_clear"></div>
</div>
<!-- Поле Слайдер -->
<div class="wpcc_box wpcc_box_WPCC_FID">
<div class="wpcc_description">
Слайдер
</div>
<!-- У горизонтального wpcc_jq_slider_horizontal, у вертикального класс wpcc_jq_slider_vertical -->
<div class="wpcc_fields wpcc_jq_slider_horizontal">
<div class="wpcc_jq_slider wpcc_jq_slider_box wpcc_jq_slider_box_WPCC_FID">
<!-- Добавлемые блоки jQuery UI Slider -->
</div>
<input type="text" name="" value="" class="wpcc_jq_slider_text">
</div>
<div class="wpcc_clear"></div>
</div>
<!-- Далее идут скрыте поля -->
<div class="wpcc_clear"></div>
<input type="submit" value="Рассчитать" name="wpcc_calculate" class="wpcc_submit wpcc_submit_WPCC_ID">
<div class="wpcc_loading"><div style="display: none;"></div></div>
</form>
<!-- Блок с результатами -->
<div class="wpcc_result_block wpcc_result_block_WPCC_ID">
<!-- Список сумм -->
<div class="wpcc_result wpcc_result_WPCC_ID" id="wpcc_result">
<p class="wpcc_field_result_WPCC_i">Результат 8020856 руб.</p>
<p class="wpcc_field_result_WPCC_i">Вторая сумма 8020956 руб.</p>
</div>
<!-- Форма отправки письма -->
<form method="POST" action="#wpcc_mail_scroll" class="wpcc_mail wpcc_mail_WPCC_ID" id="wpcc_mail_scroll">
<div class="wpcc_text">Отправить расчет администратору?</div>
<p>
<input type="text" name="wpcc_user_name" value="" placeholder="Ваш Имя" class="input">
</p>
<p>
<input type="email" name="wpcc_user_email" value="" placeholder="Ваш E-Mail" class="input">
</p>
<p>
<input type="text" name="wpcc_user_phone" value="" placeholder="Ваш Телефон" class="input">
</p>
<p>
<textarea name="wpcc_user_comment" placeholder="Ваш комментарий" value="" class="textarea"></textarea>
</p>
<!-- Для ошибок -->
<div class="wpcc_error"></div>
<input type="submit" class="wpcc_submit" value="Отправить">
<div class="wpcc_loading"><div></div></div>
</form>
<!-- Отображается после успешной отправки письма заменяя собой форму отправки-->
<div class="wpcc_mail wpcc_mail_success" id="wpcc_mail_scroll">
<div class="wpcc_text">
Спасибо! Ваш расчет отправлен! Мы свяжемся с Вами в ближайшее время.
</div>
</div>
</div>
</div>