File: /home/innocamp/public_html/wp-content/plugins/WP-FormBuilder/admin/styles/demo-preview.php
<?php
defined('ABSPATH') || die();
?>
<div class="hf-form-tempate hf-form-custom-style">
<div class="hf-form-preview" id="hf-container-00">
<h3 class="hf-form-title">Form Title</h3>
<div class="hf-form-description">
<p>This is Form Short Description</p>
</div>
<div class="hf-container">
<div id="hf-field-container-419" class="hf-form-field hf-form-field-required hashform-field-type-name hf-label-position-top hf-label-alignment-left ">
<div class="hf-field-container">
<label class="hf-field-label">Name
<span class="hf-field-required" aria-hidden="true">*</span>
</label>
<div class="hf-field-content">
<div class="hf-grouped-field" id="hf-grouped-field-419" data-name-layout="first_middle_last">
<div id="hf-subfield-container-first-419" class="hf-subfield-element hf-subfield-element-first " data-sub-field-name="first">
<input type="text" id="hf-field-jzqa4_first" value="" name="item_meta[419][first]">
<div class="hf-field-desc" id="hf-subfield-desc-first-419">First</div>
</div>
<div id="hf-subfield-container-middle-419" class="hf-subfield-element hf-subfield-element-middle " data-sub-field-name="middle">
<input type="text" id="hf-field-jzqa4_middle" value="" name="item_meta[419][middle]">
<div class="hf-field-desc" id="hf-subfield-desc-middle-419">Middle</div>
</div>
<div id="hf-subfield-container-last-419" class="hf-subfield-element hf-subfield-element-last " data-sub-field-name="last">
<input type="text" id="hf-field-jzqa4_last" value="" name="item_meta[419][last]">
<div class="hf-field-desc" id="hf-subfield-desc-last-419">Last</div>
</div>
</div>
</div>
</div>
</div>
<div id="hf-field-container-420" class="hf-form-field hashform-field-type-email hf-label-position-top hf-label-alignment-left ">
<div class="hf-field-container">
<label class="hf-field-label">Email
<span class="hf-field-required" aria-hidden="true"></span>
</label>
<div class="hf-field-content">
<input type="text" id="hf-field-nhf53" name="item_meta[420]" value="" aria-describedby="hashform_desc_hf-field-nhf53">
<div class="hf-field-desc">This is field description</div>
</div>
</div>
</div>
<div id="hf-field-container-421" class="hf-form-field hashform-field-type-phone hf-label-position-top hf-label-alignment-left ">
<div class="hf-field-container">
<label class="hf-field-label">Phone
<span class="hf-field-required" aria-hidden="true"></span>
</label>
<div class="hf-field-content">
<input type="text" id="hf-field-o47py" name="item_meta[421]" value="">
</div>
<span class="hf-error-msg">VALIDATION: Invalid Phone Number.</span>
</div>
</div>
<div id="hf-field-container-422" class="hf-form-field hashform-field-type-url hf-label-position-top hf-label-alignment-left ">
<div class="hf-field-container">
<label class="hf-field-label">Website/URL
<span class="hf-field-required" aria-hidden="true"></span>
</label>
<div class="hf-field-content">
<input type="text" id="hf-field-yyw4j" name="item_meta[422]" value="">
</div>
</div>
</div>
<div id="hf-field-container-423" class="hf-form-field hashform-field-type-address hf-label-position-top hf-label-alignment-left ">
<div class="hf-field-container">
<label class="hf-field-label">Address
<span class="hf-field-required" aria-hidden="true"></span>
</label>
<div class="hf-field-content">
<div class="hf-grouped-field" id="hf-grouped-field-423">
<div id="hf-subfield-container-line1-423" class="hf-subfield-element hf-subfield-element-line1 hf-grid-6" data-sub-field-name="line1">
<input type="text" id="hf-field-wzg7_line1" value="" name="item_meta[423][line1]">
<div class="hf-field-desc" id="hf-subfield-desc-line1-423">Line 1</div>
</div>
<div id="hf-subfield-container-line2-423" class="hf-subfield-element hf-subfield-element-line2 hf-grid-6" data-sub-field-name="line2">
<input type="text" id="hf-field-wzg7_line2" value="" name="item_meta[423][line2]">
<div class="hf-field-desc" id="hf-subfield-desc-line2-423">Line 2</div>
</div>
<div id="hf-subfield-container-city-423" class="hf-subfield-element hf-subfield-element-city hf-grid-6" data-sub-field-name="city">
<input type="text" id="hf-field-wzg7_city" value="" name="item_meta[423][city]">
<div class="hf-field-desc" id="hf-subfield-desc-city-423">City</div>
</div>
<div id="hf-subfield-container-state-423" class="hf-subfield-element hf-subfield-element-state hf-grid-6" data-sub-field-name="state">
<input type="text" id="hf-field-wzg7_state" value="" name="item_meta[423][state]">
<div class="hf-field-desc" id="hf-subfield-desc-state-423">State/Province</div>
</div>
<div id="hf-subfield-container-zip-423" class="hf-subfield-element hf-subfield-element-zip hf-grid-6" data-sub-field-name="zip">
<input type="text" id="hf-field-wzg7_zip" value="" name="item_meta[423][zip]">
<div class="hf-field-desc" id="hf-subfield-desc-zip-423">Zip/Postal</div>
</div>
<div id="hf-subfield-container-country-423" class="hf-subfield-element hf-subfield-element-country hf-grid-6" data-sub-field-name="country">
<select id="hf-field-wzg7_country" value="" name="item_meta[423][country]" class="hf-full-width">
<option value="Afghanistan">Afghanistan</option>
<option value="Aland Islands">Aland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
</select>
<div class="hf-field-desc" id="hf-subfield-desc-country-423">Country</div>
</div>
</div>
</div>
</div>
</div>
<div id="hf-field-container-426" class="hf-form-field hashform-field-type-separator hf-field-alignment-left">
<div class="hf-field-container">
<div class="hf-field-content">
<div class="hf-separator-border" style="border-bottom-style:solid; border-bottom-width:2px;" id="field_change_style_426"></div>
</div>
</div>
</div>
<div id="hf-field-container-424" class="hf-form-field hashform-field-type-heading hf-text-alignment-left">
<div class="hf-field-container">
<div class="hf-field-content">
<h1 id="hf-field-424">
This is Heading
</h1>
</div>
</div>
</div>
<div id="hf-field-container-425" class="hf-form-field hashform-field-type-paragraph hf-text-alignment-left">
<div class="hf-field-container">
<div class="hf-field-content">
<p id="hf-field-425">
This is Paragraph
</p>
</div>
</div>
</div>
<div id="hf-field-container-429" class="hf-form-field hashform-field-type-text hf-label-position-top hf-label-alignment-left ">
<div class="hf-field-container">
<label class="hf-field-label">Text
<span class="hf-field-required" aria-hidden="true"></span>
</label>
<div class="hf-field-content">
<input type="text" id="hf-field-it7tv" name="item_meta[429]" value="">
</div>
</div>
</div>
<div id="hf-field-container-430" class="hf-form-field hashform-field-type-textarea hf-label-position-top hf-label-alignment-left ">
<div class="hf-field-container">
<label class="hf-field-label">Text Area
<span class="hf-field-required" aria-hidden="true"></span>
</label>
<div class="hf-field-content">
<textarea name="item_meta[430]" id="hf-field-idkqz" rows="5"></textarea>
</div>
</div>
</div>
<div id="hf-field-container-431" class="hf-form-field hashform-field-type-select hf-label-position-top hf-label-alignment-left ">
<div class="hf-field-container">
<label class="hf-field-label">Dropdown
<span class="hf-field-required" aria-hidden="true"></span>
</label>
<div class="hf-field-content">
<select name="item_meta[431]" id="hf-field-n05ha">
<option value="Strongly Disagree">Strongly Disagree</option>
<option value="Disagree">Disagree</option>
<option value="Neutral">Neutral</option>
<option value="Agree">Agree</option>
<option value="Strongly Agree">Strongly Agree</option>
<option value="N/A">N/A</option>
</select>
</div>
</div>
</div>
<div id="hf-field-container-432" class="hf-form-field hashform-field-type-checkbox hf-label-position-top hf-label-alignment-left hf-options-layout-inline">
<div class="hf-field-container">
<label class="hf-field-label">Checkboxes
<span class="hf-field-required" aria-hidden="true"></span>
</label>
<div class="hf-field-content">
<div class="hf-choice-container">
<div class="hf-choice hf-checkbox" id="hf-checkbox-432-0">
<label for="hf-field-i6zak-0">
<input type="checkbox" name="item_meta[432][]" id="hf-field-i6zak-0" value="Strongly Disagree">
Strongly Disagree</label>
</div>
<div class="hf-choice hf-checkbox" id="hf-checkbox-432-1">
<label for="hf-field-i6zak-1">
<input type="checkbox" name="item_meta[432][]" id="hf-field-i6zak-1" value="Disagree">
Disagree</label>
</div>
<div class="hf-choice hf-checkbox" id="hf-checkbox-432-2">
<label for="hf-field-i6zak-2">
<input type="checkbox" name="item_meta[432][]" id="hf-field-i6zak-2" value="Neutral">
Neutral</label>
</div>
<div class="hf-choice hf-checkbox" id="hf-checkbox-432-3">
<label for="hf-field-i6zak-3">
<input type="checkbox" name="item_meta[432][]" id="hf-field-i6zak-3" value="Agree">
Agree</label>
</div>
<div class="hf-choice hf-checkbox" id="hf-checkbox-432-4">
<label for="hf-field-i6zak-4">
<input type="checkbox" name="item_meta[432][]" id="hf-field-i6zak-4" value="Strongly Agree">
Strongly Agree</label>
</div>
<div class="hf-choice hf-checkbox" id="hf-checkbox-432-5">
<label for="hf-field-i6zak-5">
<input type="checkbox" name="item_meta[432][]" id="hf-field-i6zak-5" value="N/A">
N/A</label>
</div>
</div>
</div>
</div>
</div>
<div id="hf-field-container-433" class="hf-form-field hashform-field-type-radio hf-label-position-top hf-label-alignment-left hf-options-layout-inline">
<div class="hf-field-container">
<label class="hf-field-label">Radio Buttons
<span class="hf-field-required" aria-hidden="true"></span>
</label>
<div class="hf-field-content">
<div class="hf-choice-container">
<div class="hf-choice hf-radio" id="hf-radio-433-0">
<label for="hf-field-dfwf8-0">
<input type="radio" name="item_meta[433]" id="hf-field-dfwf8-0" value="Strongly Disagree">
Strongly Disagree</label>
</div>
<div class="hf-choice hf-radio" id="hf-radio-433-1">
<label for="hf-field-dfwf8-1">
<input type="radio" name="item_meta[433]" id="hf-field-dfwf8-1" value="Disagree">
Disagree</label>
</div>
<div class="hf-choice hf-radio" id="hf-radio-433-2">
<label for="hf-field-dfwf8-2">
<input type="radio" name="item_meta[433]" id="hf-field-dfwf8-2" value="Neutral">
Neutral</label>
</div>
<div class="hf-choice hf-radio" id="hf-radio-433-3">
<label for="hf-field-dfwf8-3">
<input type="radio" name="item_meta[433]" id="hf-field-dfwf8-3" value="Agree">
Agree</label>
</div>
<div class="hf-choice hf-radio" id="hf-radio-433-4">
<label for="hf-field-dfwf8-4">
<input type="radio" name="item_meta[433]" id="hf-field-dfwf8-4" value="Strongly Agree">
Strongly Agree</label>
</div>
<div class="hf-choice hf-radio" id="hf-radio-433-5">
<label for="hf-field-dfwf8-5">
<input type="radio" name="item_meta[433]" id="hf-field-dfwf8-5" value="N/A">
N/A</label>
</div>
</div>
</div>
</div>
</div>
<div id="hf-field-container-434" class="hf-form-field hashform-field-type-image_select hf-label-position-top hf-label-alignment-left hf-options-layout-inline">
<div class="hf-field-container">
<label class="hf-field-label">Image Selector
<span class="hf-field-required" aria-hidden="true"></span>
</label>
<div class="hf-field-content">
<div class="hf-choice-container">
<div class="hf-choice hf-radio" id="hf-radio-434-0">
<label for="hf-field-yqvhx-0">
<input type="radio" name="item_meta[434]" id="hf-field-yqvhx-0" value="Option 1">
<div class="hf-field-is-container hf-field-is-has-label">
<div class="hf-field-is-image"><span class="hf-field-is-checked mdi-check-circle"></span><img src="<?php echo esc_url(HASHFORM_URL . '/img/placeholder.jpg') ?>" alt="Option 1"></div>
<div class="hf-field-is-label">Option 1</div>
</div>
</label>
</div>
<div class="hf-choice hf-radio" id="hf-radio-434-1">
<label for="hf-field-yqvhx-1">
<input type="radio" name="item_meta[434]" id="hf-field-yqvhx-1" value="Option 2">
<div class="hf-field-is-container hf-field-is-has-label">
<div class="hf-field-is-image"><span class="hf-field-is-checked mdi-check-circle"></span><img src="<?php echo esc_url(HASHFORM_URL . '/img/placeholder.jpg') ?>" alt="Option 2"></div>
<div class="hf-field-is-label">Option 2</div>
</div>
</label>
</div>
<div class="hf-choice hf-radio" id="hf-radio-434-2">
<label for="hf-field-yqvhx-2">
<input type="radio" name="item_meta[434]" id="hf-field-yqvhx-2" value="Option 3">
<div class="hf-field-is-container hf-field-is-has-label">
<div class="hf-field-is-image"><span class="hf-field-is-checked mdi-check-circle"></span><img src="<?php echo esc_url(HASHFORM_URL . '/img/placeholder.jpg') ?>" alt="Option 3"></div>
<div class="hf-field-is-label">Option 3</div>
</div>
</label>
</div>
</div>
</div>
</div>
</div>
<div id="hf-field-container-446" class="hashform-field-type-upload hf-label-position-top hf-label-alignment-left hf-form-field">
<div class="hf-field-container">
<label class="hf-field-label ">
Upload
</label>
<div class="hf-field-content">
<div class="hf-file-uploader-wrapper">
<div class="hf-file-uploader" id="hf-file-uploader-29336" data-upload-label="Upload File" data-extensions="jpg,jpeg,gif,png" data-extensions-error-message="Invalid Extension" data-multiple-uploads="true" data-multiple-uploads-limit="5" data-multiple-uploads-error-message="Maximum file upload limit exceeded" data-max-upload-size="5242880" data-field-uploader-id="hf-field-4rrmi8">
<div class="qq-uploader">
<div class="qq-upload-drop-area" style="display: none;">
<span>Drop files here to upload</span>
</div>
<div class="qq-upload-button" style="position: relative; overflow: hidden; direction: ltr;">
Upload File
<input multiple="multiple" type="file" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="hf-field-container-435" class="hf-form-field hashform-field-type-number hf-label-position-top hf-label-alignment-left ">
<div class="hf-field-container">
<label class="hf-field-label">Number
<span class="hf-field-required" aria-hidden="true"></span>
</label>
<div class="hf-field-content">
<input type="number" id="hf-field-20wn5" min="0" max="9999999" step="" name="item_meta[435]" value="">
</div>
</div>
</div>
<div id="hf-field-container-436" class="hf-form-field hashform-field-type-range_slider hf-label-position-top hf-label-alignment-left ">
<div class="hf-field-container">
<label class="hf-field-label">Range Slider
<span class="hf-field-required" aria-hidden="true"></span>
</label>
<div class="hf-field-content">
<div class="hashform-range-slider-container">
<div class="hashform-range-slider-wrap">
<div class="hashform-range-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">
<div class="ui-slider-range ui-corner-all ui-widget-header ui-slider-range-min" style="width: 0%;"></div>
<span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 0%;"></span>
</div>
<input id="hf-field-haguj" class="hashform-range-input-selector" type="number" min="1" max="10" step="1" name="item_meta[436]" value="1">
</div>
</div>
</div>
</div>
</div>
<div id="hf-field-container-437" class="hf-form-field hashform-field-type-star hf-label-position-top hf-label-alignment-left ">
<div class="hf-field-container">
<label class="hf-field-label">Star
<span class="hf-field-required" aria-hidden="true"></span>
</label>
<div class="hf-field-content">
<div class="hf-choice-container">
<div class="hashform-star-group" id="hf-field-star-437">
<label class="hf-star-rating">
<input type="radio" name="item_meta[437]" value="1">
<span class="mdi mdi-star-outline"></span>
</label>
<label class="hf-star-rating">
<input type="radio" name="item_meta[437]" value="2">
<span class="mdi mdi-star-outline"></span>
</label>
<label class="hf-star-rating">
<input type="radio" name="item_meta[437]" value="3">
<span class="mdi mdi-star-outline"></span>
</label>
<label class="hf-star-rating">
<input type="radio" name="item_meta[437]" value="4">
<span class="mdi mdi-star-outline"></span>
</label>
<label class="hf-star-rating">
<input type="radio" name="item_meta[437]" value="5">
<span class="mdi mdi-star-outline"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div id="hf-field-container-438" class="hf-form-field hashform-field-type-spinner hf-label-position-top hf-label-alignment-left ">
<div class="hf-field-container">
<label class="hf-field-label">Spinner
<span class="hf-field-required" aria-hidden="true"></span>
</label>
<div class="hf-field-content">
<div class="hf-quantity">
<div class="hf-quantity-input">
<span class="mdi-minus"></span>
<input type="number" name="item_meta[438]" value="" min="0" max="9999999" step="" placeholder="" inputmode="numeric" autocomplete="off" id="hf-field-3i60n">
<span class="mdi-plus"></span>
</div>
</div>
</div>
</div>
</div>
<div class="hf-submit-wrap">
<button class="hf-submit-button">Submit</button>
</div>
</div>
<?php
echo '<style>';
echo '#hf-container-00{';
self::get_style_vars($hashform_styles, '');
echo '}';
echo '</style>';
?>
</div>
</div>