<?php
defined( 'ABSPATH' ) || die();
?>

<div class="fb-form-tempate fb-form-custom-style">
    <div class="fb-form-preview" id="fb-container-00">
        <h3 class="fb-form-title">Form Title</h3>
        <div class="fb-form-description">
            <p>This is Form Short Description</p>
        </div>
        <div class="fb-container">
            <div id="fb-field-container-419" class="fb-form-field fb-form-field-required formbuilder-field-type-name fb-label-position-top fb-label-alignment-left ">
                <div class="fb-field-container">
                    <label class="fb-field-label">
                        Name
                        <span class="fb-field-required" aria-hidden="true">*</span>
                    </label>
                    <div class="fb-field-content">
                        <div class="fb-grouped-field" id="fb-grouped-field-419" data-name-layout="first_middle_last">
                            <div id="fb-subfield-container-first-419" class="fb-subfield-element fb-subfield-element-first " data-sub-field-name="first">
                                <input type="text" id="fb-field-jzqa4_first" value="" name="item_meta[419][first]">
                                <div class="fb-field-desc" id="fb-subfield-desc-first-419">First</div>
                            </div>
                            <div id="fb-subfield-container-middle-419" class="fb-subfield-element fb-subfield-element-middle " data-sub-field-name="middle">
                                <input type="text" id="fb-field-jzqa4_middle" value="" name="item_meta[419][middle]">
                                <div class="fb-field-desc" id="fb-subfield-desc-middle-419">Middle</div>
                            </div>
                            <div id="fb-subfield-container-last-419" class="fb-subfield-element fb-subfield-element-last " data-sub-field-name="last">
                                <input type="text" id="fb-field-jzqa4_last" value="" name="item_meta[419][last]">
                                <div class="fb-field-desc" id="fb-subfield-desc-last-419">Last</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="fb-field-container-420" class="fb-form-field formbuilder-field-type-email fb-label-position-top fb-label-alignment-left ">
                <div class="fb-field-container">
                    <label class="fb-field-label">
                        Email
                        <span class="fb-field-required" aria-hidden="true"></span>
                    </label>
                    <div class="fb-field-content">
                        <input type="text" id="fb-field-nhf53" name="item_meta[420]" value="" aria-describedby="formbuilder_desc_fb-field-nhf53">
                        <div class="fb-field-desc">This is field description</div>
                    </div>
                </div>
            </div>
            <div id="fb-field-container-421" class="fb-form-field formbuilder-field-type-phone fb-label-position-top fb-label-alignment-left ">
                <div class="fb-field-container">
                    <label class="fb-field-label">
                        Phone
                        <span class="fb-field-required" aria-hidden="true"></span>
                    </label>
                    <div class="fb-field-content">
                        <input type="text" id="fb-field-o47py" name="item_meta[421]" value="">
                    </div>
                    <span class="fb-error-msg">VALIDATION: Invalid Phone Number.</span>
                </div>
            </div>
            <div id="fb-field-container-422" class="fb-form-field formbuilder-field-type-url fb-label-position-top fb-label-alignment-left ">
                <div class="fb-field-container">
                    <label class="fb-field-label">
                        Website / URL
                        <span class="fb-field-required" aria-hidden="true"></span>
                    </label>
                    <div class="fb-field-content">
                        <input type="text" id="fb-field-yyw4j" name="item_meta[422]" value="">
                    </div>
                </div>
            </div>
            <div id="fb-field-container-423" class="fb-form-field formbuilder-field-type-address fb-label-position-top fb-label-alignment-left ">
                <div class="fb-field-container">
                    <label class="fb-field-label">
                        Address
                        <span class="fb-field-required" aria-hidden="true"></span>
                    </label>
                    <div class="fb-field-content">
                        <div class="fb-grouped-field" id="fb-grouped-field-423">
                            <div id="fb-subfield-container-line1-423" class="fb-subfield-element fb-subfield-element-line1 fb-grid-6" data-sub-field-name="line1">
                                <input type="text" id="fb-field-wzg7_line1" value="" name="item_meta[423][line1]">
                                <div class="fb-field-desc" id="fb-subfield-desc-line1-423">Line 1</div>
                            </div>
                            <div id="fb-subfield-container-line2-423" class="fb-subfield-element fb-subfield-element-line2 fb-grid-6" data-sub-field-name="line2">
                                <input type="text" id="fb-field-wzg7_line2" value="" name="item_meta[423][line2]">
                                <div class="fb-field-desc" id="fb-subfield-desc-line2-423">Line 2</div>
                            </div>
                            <div id="fb-subfield-container-city-423" class="fb-subfield-element fb-subfield-element-city fb-grid-6" data-sub-field-name="city">
                                <input type="text" id="fb-field-wzg7_city" value="" name="item_meta[423][city]">
                                <div class="fb-field-desc" id="fb-subfield-desc-city-423">City</div>
                            </div>
                            <div id="fb-subfield-container-state-423" class="fb-subfield-element fb-subfield-element-state fb-grid-6" data-sub-field-name="state">
                                <input type="text" id="fb-field-wzg7_state" value="" name="item_meta[423][state]">
                                <div class="fb-field-desc" id="fb-subfield-desc-state-423">State/Province</div>
                            </div>
                            <div id="fb-subfield-container-zip-423" class="fb-subfield-element fb-subfield-element-zip fb-grid-6" data-sub-field-name="zip">
                                <input type="text" id="fb-field-wzg7_zip" value="" name="item_meta[423][zip]">
                                <div class="fb-field-desc" id="fb-subfield-desc-zip-423">Zip/Postal</div>
                            </div>
                            <div id="fb-subfield-container-country-423" class="fb-subfield-element fb-subfield-element-country fb-grid-6" data-sub-field-name="country">
                                <select id="fb-field-wzg7_country" value="" name="item_meta[423][country]" class="fb-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="fb-field-desc" id="fb-subfield-desc-country-423">Country</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="fb-field-container-426" class="fb-form-field  formbuilder-field-type-separator fb-field-alignment-left">
                <div class="fb-field-container">
                    <div class="fb-field-content">
                        <div class="fb-separator-border" style="border-bottom-style:solid; border-bottom-width:2px;" id="field_change_style_426"></div>
                    </div>
                </div>
            </div>
            <div id="fb-field-container-424" class="fb-form-field  formbuilder-field-type-heading fb-text-alignment-left">
                <div class="fb-field-container">
                    <div class="fb-field-content">
                        <h1 id="fb-field-424">
                            This is Heading
                        </h1>
                    </div>
                </div>
            </div>
            <div id="fb-field-container-425" class="fb-form-field  formbuilder-field-type-paragraph fb-text-alignment-left">
                <div class="fb-field-container">
                    <div class="fb-field-content">
                        <p id="fb-field-425">
                            This is Paragraph
                        </p>
                    </div>
                </div>
            </div>
            <div id="fb-field-container-429" class="fb-form-field formbuilder-field-type-text fb-label-position-top fb-label-alignment-left ">
                <div class="fb-field-container">
                    <label class="fb-field-label">
                        Text
                        <span class="fb-field-required" aria-hidden="true"></span>
                    </label>
                    <div class="fb-field-content">
                        <input type="text" id="fb-field-it7tv" name="item_meta[429]" value="">
                    </div>
                </div>
            </div>
            <div id="fb-field-container-430" class="fb-form-field formbuilder-field-type-textarea fb-label-position-top fb-label-alignment-left ">
                <div class="fb-field-container">
                    <label class="fb-field-label">
                        Text Area
                        <span class="fb-field-required" aria-hidden="true"></span>
                    </label>
                    <div class="fb-field-content">
                        <textarea name="item_meta[430]" id="fb-field-idkqz" rows="5"></textarea>
                    </div>
                </div>
            </div>
            <div id="fb-field-container-431" class="fb-form-field formbuilder-field-type-select fb-label-position-top fb-label-alignment-left ">
                <div class="fb-field-container">
                    <label class="fb-field-label">
                        Dropdown
                        <span class="fb-field-required" aria-hidden="true"></span>
                    </label>
                    <div class="fb-field-content">
                        <select name="item_meta[431]" id="fb-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="fb-field-container-432" class="fb-form-field formbuilder-field-type-checkbox fb-label-position-top fb-label-alignment-left  fb-options-layout-inline">
                <div class="fb-field-container">
                    <label class="fb-field-label">
                        Checkboxes
                        <span class="fb-field-required" aria-hidden="true"></span>
                    </label>
                    <div class="fb-field-content">
                        <div class="fb-choice-container">
                            <div class="fb-choice fb-checkbox" id="fb-checkbox-432-0">
                                <label for="fb-field-i6zak-0">
                                    <input type="checkbox" name="item_meta[432][]" id="fb-field-i6zak-0" value="Strongly Disagree">
                                    Strongly Disagree
                                </label>
                            </div>
                            <div class="fb-choice fb-checkbox" id="fb-checkbox-432-1">
                                <label for="fb-field-i6zak-1">
                                    <input type="checkbox" name="item_meta[432][]" id="fb-field-i6zak-1" value="Disagree">
                                    Disagree
                                </label>
                            </div>
                            <div class="fb-choice fb-checkbox" id="fb-checkbox-432-2">
                                <label for="fb-field-i6zak-2">
                                    <input type="checkbox" name="item_meta[432][]" id="fb-field-i6zak-2" value="Neutral">
                                    Neutral
                                </label>
                            </div>
                            <div class="fb-choice fb-checkbox" id="fb-checkbox-432-3">
                                <label for="fb-field-i6zak-3">
                                    <input type="checkbox" name="item_meta[432][]" id="fb-field-i6zak-3" value="Agree">
                                    Agree
                                </label>
                            </div>
                            <div class="fb-choice fb-checkbox" id="fb-checkbox-432-4">
                                <label for="fb-field-i6zak-4">
                                    <input type="checkbox" name="item_meta[432][]" id="fb-field-i6zak-4" value="Strongly Agree">
                                    Strongly Agree
                                </label>
                            </div>
                            <div class="fb-choice fb-checkbox" id="fb-checkbox-432-5">
                                <label for="fb-field-i6zak-5">
                                    <input type="checkbox" name="item_meta[432][]" id="fb-field-i6zak-5" value="N/A">
                                    N/A
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="fb-field-container-433" class="fb-form-field formbuilder-field-type-radio fb-label-position-top fb-label-alignment-left  fb-options-layout-inline">
                <div class="fb-field-container">
                    <label class="fb-field-label">
                        Radio Buttons
                        <span class="fb-field-required" aria-hidden="true"></span>
                    </label>
                    <div class="fb-field-content">
                        <div class="fb-choice-container">
                            <div class="fb-choice fb-radio" id="fb-radio-433-0">
                                <label for="fb-field-dfwf8-0">
                                    <input type="radio" name="item_meta[433]" id="fb-field-dfwf8-0" value="Strongly Disagree">
                                    Strongly Disagree
                                </label>
                            </div>
                            <div class="fb-choice fb-radio" id="fb-radio-433-1">
                                <label for="fb-field-dfwf8-1">
                                    <input type="radio" name="item_meta[433]" id="fb-field-dfwf8-1" value="Disagree">
                                    Disagree
                                </label>
                            </div>
                            <div class="fb-choice fb-radio" id="fb-radio-433-2">
                                <label for="fb-field-dfwf8-2">
                                    <input type="radio" name="item_meta[433]" id="fb-field-dfwf8-2" value="Neutral">
                                    Neutral
                                </label>
                            </div>
                            <div class="fb-choice fb-radio" id="fb-radio-433-3">
                                <label for="fb-field-dfwf8-3">
                                    <input type="radio" name="item_meta[433]" id="fb-field-dfwf8-3" value="Agree">
                                    Agree
                                </label>
                            </div>
                            <div class="fb-choice fb-radio" id="fb-radio-433-4">
                                <label for="fb-field-dfwf8-4">
                                    <input type="radio" name="item_meta[433]" id="fb-field-dfwf8-4" value="Strongly Agree">
                                    Strongly Agree
                                </label>
                            </div>
                            <div class="fb-choice fb-radio" id="fb-radio-433-5">
                                <label for="fb-field-dfwf8-5">
                                    <input type="radio" name="item_meta[433]" id="fb-field-dfwf8-5" value="N/A">
                                    N/A
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="fb-field-container-434" class="fb-form-field formbuilder-field-type-image_select fb-label-position-top fb-label-alignment-left  fb-options-layout-inline">
                <div class="fb-field-container">
                    <label class="fb-field-label">
                        Image Select
                        <span class="fb-field-required" aria-hidden="true"></span>
                    </label>
                    <div class="fb-field-content">
                        <div class="fb-choice-container">
                            <div class="fb-choice fb-radio" id="fb-radio-434-0">
                                <label for="fb-field-yqvhx-0">
                                    <input type="radio" name="item_meta[434]" id="fb-field-yqvhx-0" value="Option 1">
                                    <div class="fb-field-is-container fb-field-is-has-label">
                                        <div class="fb-field-is-image"><span class="fb-field-is-checked"><?php echo wp_kses( Form_Builder_Icons::get( 'checkmark' ), Form_Builder_Common_Methods::get_kses_extended_ruleset() ); ?></span><img src="<?php echo esc_url( FORMBUILDER_URL . 'assets/img/placeholder.jpg' ) ?>" alt="Option 1"></div>
                                        <div class="fb-field-is-label">Option 1</div>
                                    </div>
                                </label>
                            </div>
                            <div class="fb-choice fb-radio" id="fb-radio-434-1">
                                <label for="fb-field-yqvhx-1">
                                    <input type="radio" name="item_meta[434]" id="fb-field-yqvhx-1" value="Option 2">
                                    <div class="fb-field-is-container fb-field-is-has-label">
                                        <div class="fb-field-is-image"><span class="fb-field-is-checked"><?php echo wp_kses( Form_Builder_Icons::get( 'checkmark' ), Form_Builder_Common_Methods::get_kses_extended_ruleset() ); ?></span><img src="<?php echo esc_url( FORMBUILDER_URL . 'assets/img/placeholder.jpg' ) ?>" alt="Option 2"></div>
                                        <div class="fb-field-is-label">Option 2</div>
                                    </div>
                                </label>
                            </div>
                            <div class="fb-choice fb-radio" id="fb-radio-434-2">
                                <label for="fb-field-yqvhx-2">
                                    <input type="radio" name="item_meta[434]" id="fb-field-yqvhx-2" value="Option 3">
                                    <div class="fb-field-is-container fb-field-is-has-label">
                                        <div class="fb-field-is-image"><span class="fb-field-is-checked"><?php echo wp_kses( Form_Builder_Icons::get( 'checkmark' ), Form_Builder_Common_Methods::get_kses_extended_ruleset() ); ?></span><img src="<?php echo esc_url( FORMBUILDER_URL . 'assets/img/placeholder.jpg' ) ?>" alt="Option 3"></div>
                                        <div class="fb-field-is-label">Option 3</div>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="fb-field-container-446" class="formbuilder-field-type-upload fb-label-position-top fb-label-alignment-left fb-form-field">

                <div class="fb-field-container">
                    <label class="fb-field-label ">
                        Upload
                    </label>
                    <div class="fb-field-content">
                        <div class="fb-file-uploader-wrapper">
                            <div class="fb-file-uploader" id="fb-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="fb-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="fb-field-container-435" class="fb-form-field formbuilder-field-type-number fb-label-position-top fb-label-alignment-left ">
                <div class="fb-field-container">
                    <label class="fb-field-label">
                        Number
                        <span class="fb-field-required" aria-hidden="true"></span>
                    </label>
                    <div class="fb-field-content">
                        <input type="number" id="fb-field-20wn5" min="0" max="9999999" step="" name="item_meta[435]" value="">
                    </div>
                </div>
            </div>
            <div id="fb-field-container-436" class="fb-form-field formbuilder-field-type-range_slider fb-label-position-top fb-label-alignment-left ">
                <div class="fb-field-container">
                    <label class="fb-field-label">
                        Range Slider
                        <span class="fb-field-required" aria-hidden="true"></span>
                    </label>
                    <div class="fb-field-content">
                        <div class="formbuilder-range-slider-container">
                            <div class="formbuilder-range-slider-wrap">
                                <div class="formbuilder-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="fb-field-haguj" class="formbuilder-range-input-selector" type="number" min="1" max="10" step="1" name="item_meta[436]" value="1">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="fb-field-container-437" class="fb-form-field formbuilder-field-type-star fb-label-position-top fb-label-alignment-left ">
                <div class="fb-field-container">
                    <label class="fb-field-label">
                        Star
                        <span class="fb-field-required" aria-hidden="true"></span>
                    </label>
                    <div class="fb-field-content">
                        <div class="fb-choice-container">
                            <div class="formbuilder-star-group" id="fb-field-star-437">
                                <label class="fb-star-rating">
                                    <input type="radio" name="item_meta[437]" value="1">
                                    <span class="fb-star-outline"></span>
                                </label>
                                <label class="fb-star-rating">
                                    <input type="radio" name="item_meta[437]" value="2">
                                    <span class="fb-star-outline"></span>
                                </label>
                                <label class="fb-star-rating">
                                    <input type="radio" name="item_meta[437]" value="3">
                                    <span class="fb-star-outline"></span>
                                </label>
                                <label class="fb-star-rating">
                                    <input type="radio" name="item_meta[437]" value="4">
                                    <span class="fb-star-outline"></span>
                                </label>
                                <label class="fb-star-rating">
                                    <input type="radio" name="item_meta[437]" value="5">
                                    <span class="fb-star-outline"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="fb-field-container-438" class="fb-form-field formbuilder-field-type-spinner fb-label-position-top fb-label-alignment-left ">
                <div class="fb-field-container">
                    <label class="fb-field-label">
                        Spinner
                        <span class="fb-field-required" aria-hidden="true"></span>
                    </label>
                    <div class="fb-field-content">
                        <div class="fb-quantity">
                            <div class="fb-quantity-input">
                                <span class="fb-minus">-</span>
                                <input type="number" name="item_meta[438]" value="" min="0" max="9999999" step="" placeholder="" inputmode="numeric" autocomplete="off" id="fb-field-3i60n">
                                <span class="fb-plus">-</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="fb-submit-wrap">
                <button class="fb-submit-button">Submit</button>
            </div>
        </div>
        <?php
        echo '<style>';
        echo '#fb-container-00{';
        self::get_style_vars( $formbuilder_styles, '' );
        echo '}';
        echo '</style>';
        ?>
    </div>
</div>