Form Builder

<form method="post" action="https://moore.dev.fastspot.com/fastspot-test-pages/forms/all-fields/process/" enctype="multipart/form-data" class="form_builder">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="form_builder_required_message">
                <p>
                    <span class="form_builder_required_star">*</span> = required field
                </p>
            </div>
            <div class="form_builder_section_header">
                <h2>Section Break</h2>
                <p>
                    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                    auctor. Aenean lacinia bibendum nulla sed consectetur. Sed posuere
                    consectetur est at lobortis. Integer posuere erat a ante venenatis
                    dapibus posuere velit aliquet.
                </p>
            </div>
            <fieldset id="form_builder_data_2">
                <label for="form_builder_field_2">
                    Single Line Text w/ Max Length
                    <span class="form_builder_required_star">*</span>
                </label>
                <input type="text" id="form_builder_field_2" name="form_builder_data_2" class="form_builder_text form_builder_required" value="" placeholder="With a placeholder" maxlength="125" required="" />
            </fieldset>
            <fieldset id="form_builder_data_3">
                <label for="form_builder_field_3">
                    Paragraph Text <span class="form_builder_required_star">*</span>
                </label>
                <textarea id="form_builder_field_3" name="form_builder_data_3" class="form_builder_required" placeholder="Placeholder Text" required=""></textarea>
            </fieldset>
            <fieldset id="form_builder_data_17">
                <label for="form_builder_field_13"> File Upload</label>
                <input type="file" id="form_builder_field_13" name="form_builder_data_17" class="form_builder_upload" value="">
                <div class="form_builder_sublabel"><span id="form_builder_file_size_error_13">Maximum File Size: 1 KB</span></div>
            </fieldset>
            <fieldset id="form_builder_data_17">
                <label for="form_builder_field_13"> File Upload - Required</label>
                <input type="file" id="form_builder_field_13" name="form_builder_data_17" class="form_builder_upload form_builder_required" value="">
                <div class="form_builder_sublabel"><span id="form_builder_file_size_error_13">Maximum File Size: 1 KB</span></div>
            </fieldset>
            <fieldset id="form_builder_data_4">
                <legend>
                    Checkboxes
                </legend>
                <div class="form_builder_checkbox">
                    <input type="checkbox" id="form_builder_field_4" name="form_builder_data_4[]" value="val1" data-price="0" />
                    <span class="form_builder_checkbox_indicator"></span>
                    <label class="form_builder_for_checkbox" for="form_builder_field_4">Option 1</label>
                </div>
                <div class="form_builder_checkbox">
                    <input type="checkbox" id="form_builder_field_5" name="form_builder_data_4[]" value="val2" data-price="0" />
                    <span class="form_builder_checkbox_indicator"></span>
                    <label class="form_builder_for_checkbox" for="form_builder_field_5">Option 2</label>
                </div>
                <div class="form_builder_checkbox">
                    <input type="checkbox" id="form_builder_field_6" name="form_builder_data_4[]" value="val3" data-price="0" />
                    <span class="form_builder_checkbox_indicator"></span>
                    <label class="form_builder_for_checkbox" for="form_builder_field_6">Option 3</label>
                </div>
            </fieldset>
            <fieldset id="form_builder_data_4">
                <legend>
                    Checkboxes - Required
                </legend>
                <div class="form_builder_checkbox">
                    <input type="checkbox" class="form_builder_required" id="form_builder_field_4" name="form_builder_data_4[]" value="val1" data-price="0" />
                    <span class="form_builder_checkbox_indicator"></span>
                    <label class="form_builder_for_checkbox" for="form_builder_field_4">Option 1</label>
                </div>
                <div class="form_builder_checkbox">
                    <input type="checkbox" class="form_builder_required" id="form_builder_field_5" name="form_builder_data_4[]" value="val2" data-price="0" />
                    <span class="form_builder_checkbox_indicator"></span>
                    <label class="form_builder_for_checkbox" for="form_builder_field_5">Option 2</label>
                </div>
                <div class="form_builder_checkbox">
                    <input type="checkbox" class="form_builder_required" id="form_builder_field_6" name="form_builder_data_4[]" value="val3" data-price="0" />
                    <span class="form_builder_checkbox_indicator"></span>
                    <label class="form_builder_for_checkbox" for="form_builder_field_6">Option 3</label>
                </div>
            </fieldset>
            <fieldset id="form_builder_data_5">
                <legend>
                    Radio Buttons
                </legend>
                <div class="form_builder_radio">
                    <input type="radio" id="form_builder_field_8" name="form_builder_data_5" value="val1" data-price="0" />
                    <span class="form_builder_radio_indicator"></span>
                    <label class="form_builder_for_checkbox" for="form_builder_field_8">Option 1</label>
                </div>
                <div class="form_builder_radio">
                    <input type="radio" id="form_builder_field_9" name="form_builder_data_5" value="val2" data-price="0" />
                    <span class="form_builder_radio_indicator"></span>
                    <label class="form_builder_for_checkbox" for="form_builder_field_9">Option 2</label>
                </div>
                <div class="form_builder_radio">
                    <input type="radio" id="form_builder_field_10" name="form_builder_data_5" value="val3" data-price="0" />
                    <span class="form_builder_radio_indicator"></span>
                    <label class="form_builder_for_checkbox" for="form_builder_field_10">Option 3</label>
                </div>
            </fieldset>
            <fieldset id="form_builder_data_5">
                <legend>
                    Radio Buttons - Required
                </legend>
                <div class="form_builder_radio">
                    <input type="radio" class="form_builder_required" id="form_builder_field_8" name="form_builder_data_5" value="val1" data-price="0" />
                    <span class="form_builder_radio_indicator"></span>
                    <label class="form_builder_for_checkbox" for="form_builder_field_8">Option 1</label>
                </div>
                <div class="form_builder_radio">
                    <input type="radio" class="form_builder_required" id="form_builder_field_9" name="form_builder_data_5" value="val2" data-price="0" />
                    <span class="form_builder_radio_indicator"></span>
                    <label class="form_builder_for_checkbox" for="form_builder_field_9">Option 2</label>
                </div>
                <div class="form_builder_radio">
                    <input type="radio" class="form_builder_required" id="form_builder_field_10" name="form_builder_data_5" value="val3" data-price="0" />
                    <span class="form_builder_radio_indicator"></span>
                    <label class="form_builder_for_checkbox" for="form_builder_field_10">Option 3</label>
                </div>
            </fieldset>
            <fieldset id="form_builder_data_6">
                <label for="form_builder_field_12"> Dropdown List</label>
                <div class="form_builder_select">
                    <select id="form_builder_field_12" name="form_builder_data_6">
                        <option value="val1" data-price="0">Option 1</option>
                        <option value="val2" data-price="0">Option 2</option>
                        <option value="val3" data-price="0">Option 3</option>
                    </select>
                </div>
            </fieldset>
            <fieldset id="form_builder_data_6">
                <label for="form_builder_field_12"> Dropdown List - Required</label>
                <div class="form_builder_select">
                    <select id="form_builder_field_12" class="form_builder_required" name="form_builder_data_6">
                        <option value="val1" data-price="0">Option 1</option>
                        <option value="val2" data-price="0">Option 2</option>
                        <option value="val3" data-price="0">Option 3</option>
                    </select>
                </div>
            </fieldset>
            <script>
                document.getElementById(
                    "form_builder_field_13"
                ).onchange = function() {
                    if (this.files[0].size > 1500000) {
                        this.className =
                            this.className.replace("form_builder_error", "") +
                            " form_builder_error";
                        this.value = "";
                        document.getElementById(
                            "form_builder_file_size_error_13"
                        ).className = "form_builder_file_size_error";
                    } else {
                        this.className = this.className.replace(
                            "form_builder_error",
                            ""
                        );
                        document.getElementById(
                            "form_builder_file_size_error_13"
                        ).className = "";
                    }
                };
            </script>
            <fieldset id="form_builder_data_8">
                <legend for="form_builder_field_14">
                    Name
                </legend>
                <div class="form_builder_wrap">
                    <div class="form_builder_firstname">
                        <input type="text" name="form_builder_data_8[first]" id="form_builder_field_14" class="form_builder_text" value="" autocomplete="section-name given-name" />
                        <label for="form_builder_field_14" class="form_builder_sublabel">First</label>
                    </div>

                    <div class="form_builder_lastname">
                        <input type="text" name="form_builder_data_8[last]" id="form_builder_field_15" class="form_builder_text" value="" autocomplete="section-name family-name" />
                        <label for="form_builder_field_15" class="form_builder_sublabel">Last</label>
                    </div>
                </div>
            </fieldset>
            <fieldset id="form_builder_data_9">
                <legend for="form_builder_field_16">
                    Date
                </legend>

                <div class="form_builder_date_2">
                    <input type="text" maxlength="2" name="form_builder_data_9[month]" id="form_builder_field_16" class="form_builder_text" value="" />
                    <label for="form_builder_field_16" class="form_builder_sublabel form_builder_centered">MM</label>
                </div>

                <div class="form_builder_date_2">
                    <input type="text" maxlength="2" name="form_builder_data_9[day]" id="form_builder_field_17" class="form_builder_text" value="" />
                    <label for="form_builder_field_17" class="form_builder_sublabel form_builder_centered">DD</label>
                </div>

                <div class="form_builder_date_4">
                    <input type="text" maxlength="4" name="form_builder_data_9[year]" id="form_builder_field_18" class="form_builder_text" value="" />
                    <label for="form_builder_field_18" class="form_builder_sublabel form_builder_centered">YYYY</label>
                </div>
            </fieldset>
            <fieldset class="form_builder_address" id="form_builder_data_10">
                <legend for="form_builder_field_19">
                    Address
                </legend>

                <div class="form_builder_full">
                    <input type="text" name="form_builder_data_10[street]" id="form_builder_field_19" class="form_builder_text" value="" autocomplete="section-address address-line1" />
                    <label for="form_builder_field_19" class="form_builder_sublabel">Street Address</label>
                </div>

                <div class="form_builder_full">
                    <input type="text" name="form_builder_data_10[street2]" id="form_builder_field_20" class="form_builder_text" value="" autocomplete="section-address address-line2" />
                    <label for="form_builder_field_20" class="form_builder_sublabel">Street Address Line 2</label>
                </div>

                <div class="form_builder_split">
                    <input type="text" name="form_builder_data_10[city]" id="form_builder_field_21" class="form_builder_text" value="" autocomplete="section-address address-level2" />
                    <label for="form_builder_field_21" class="form_builder_sublabel">City</label>
                </div>

                <div class="form_builder_split form_builder_split_last_col">
                    <input type="text" name="form_builder_data_10[state]" id="form_builder_field_22" class="form_builder_text" value="" autocomplete="section-address address-level1" />
                    <label for="form_builder_field_22" class="form_builder_sublabel">State / Province / Region</label>
                </div>

                <div class="form_builder_split form_builder_split_last_row">
                    <input type="text" name="form_builder_data_10[zip]" id="form_builder_field_23" class="form_builder_text" value="" autocomplete="section-address postal-code" />
                    <label for="form_builder_field_23" class="form_builder_sublabel">Postal / Zip Code</label>
                </div>

                <div class="form_builder_split form_builder_split_last_row form_builder_split_last_col">
                    <input type="text" name="form_builder_data_10[country]" id="form_builder_field_24" class="form_builder_text" value="United States" autocomplete="section-address country-name" />
                    <label for="form_builder_field_24" class="form_builder_sublabel">Country</label>
                </div>
            </fieldset>
            <fieldset id="form_builder_data_11">
                <label for="form_builder_field_25"> Email Address </label>
                <input type="email" id="form_builder_field_25" name="form_builder_data_11" class="form_builder_text form_builder_email" value="" autocomplete="section-email-address email" />
            </fieldset>
            <fieldset id="form_builder_data_12">
                <label for="form_builder_field_26"> Website </label>
                <input type="url" id="form_builder_field_26" name="form_builder_data_12" class="form_builder_text form_builder_url" value="" autocomplete="section-website url" />
            </fieldset>
            <fieldset id="form_builder_data_13">
                <legend for="form_builder_field_27">
                    Phone Number
                </legend>
                <div class="form_builder_wrap">
                    <div class="form_builder_phone_3">
                        <input type="text" maxlength="3" name="form_builder_data_13[first]" id="form_builder_field_27" class="form_builder_text" value="" autocomplete="section-phone-number tel-area-code" />
                        <label for="form_builder_field_27" class="form_builder_sublabel form_builder_centered">###</label>
                    </div>

                    <div class="form_builder_phone_3">
                        <input type="text" maxlength="3" name="form_builder_data_13[second]" id="form_builder_field_28" class="form_builder_text" value="" autocomplete="section-phone-number tel-local-prefix" />
                        <label for="form_builder_field_28" class="form_builder_sublabel form_builder_centered">###</label>
                    </div>

                    <div class="form_builder_phone_4">
                        <input type="text" maxlength="4" name="form_builder_data_13[third]" id="form_builder_field_29" class="form_builder_text" value="" autocomplete="section-phone-number tel-local-suffix" />
                        <label for="form_builder_field_29" class="form_builder_sublabel form_builder_centered">####</label>
                    </div>
                </div>
            </fieldset>
            <div class="form_builder_submit_wrapper">
                <div class="form_builder_submit_pill">
                    <input type="submit" class="form_builder_submit" value="Submit Form" />
                    <span class="form_builder_submit_icon">
                        <svg class="icon icon_caret_right">
                            <use href="/images/icons.svg#caret_right" />
                        </svg>
                    </span>
                </div>
            </div>
            <div class="form_builder_reset_wrapper">
                <div class="form_builder_reset_pill">
                    <input type="reset" class="form_builder_reset" value="Reset Form" />
                    <span class="form_builder_reset_icon">
                        <svg class="icon icon_reset">
                            <use href="/images/icons.svg#reset" />
                        </svg>
                    </span>
                </div>
            </div>
        </div>
    </div>
</form>