Javascript does not appear to be enabled.
USDA Animal and Plant Health Inspection Service (APHIS) - Customer Experience Survey
A red asterisk (*) indicates a required field.
Success
Error
alert message
";
if (item.value.length > 0 &&
item.value != quillDefaultHTML) delete(questions[item.name]);
}
});
for (var key in questions) {
this.showValidationError(questions[key], 'A response is required: ');
return false;
}
return true;
},
checkDate: function(form) {
var dateItems = form.querySelectorAll('.date-select');
var questions = {};
// Build a dictionary of questions which require an answer
Array.prototype.forEach.call(dateItems, function(item) { questions[item.name] = item });
Array.prototype.forEach.call(dateItems, function(item) {
if (item.value.length == 0) {
delete(questions[item.name]);
} else {
var isValidDate = Date.parse(item.value);
if (!isNaN(isValidDate)) delete(questions[item.name]);
}
});
for (var key in questions) {
this.showValidationError(questions[key], 'Please enter a valid value: ');
return false;
}
return true;
},
checkEmail: function(form) {
var emailItems = form.querySelectorAll('input[type="email"]');
var questions = {};
// Build a dictionary of questions which require an answer
Array.prototype.forEach.call(emailItems, function(item) { questions[item.name] = item });
Array.prototype.forEach.call(emailItems, function(item) {
if (item.value.length == 0) {
delete(questions[item.name]);
} else {
var EmailRegex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (EmailRegex.test(item.value)) delete(questions[item.name]);
}
});
for (var key in questions) {
this.showValidationError(questions[key], 'Please enter a valid value: ');
return false;
}
return true;
},
checkPhone: function(form) {
var phoneItems = form.querySelectorAll('input[type="tel"]');
var questions = {};
// Build a dictionary of questions which require an answer
Array.prototype.forEach.call(phoneItems, function(item) { questions[item.name] = item });
Array.prototype.forEach.call(phoneItems, function(item) {
if (item.value.length == 0) {
delete(questions[item.name]);
} else {
const PhoneRegex = /^\(\d{3}\) \d{3}-\d{4}$/;
if (PhoneRegex.test(item.value)) delete(questions[item.name]);
}
});
for (var key in questions) {
this.showValidationError(questions[key], 'Please enter a valid value: ');
return false;
}
return true;
},
showValidationError: function(question, error) {
var questionDiv = question.closest(".question");
var label = questionDiv.querySelector(".usa-label") || questionDiv.querySelector(".usa-legend");
var questionNum = label.innerText;
// show page with validation error
var errorPage = question.closest(".section");
if (!errorPage.classList.contains("fba-visible")) {
var visiblePage = this.formComponent().getElementsByClassName("section fba-visible")[0];
visiblePage.classList.remove("fba-visible");
errorPage.classList.add("fba-visible");
}
questionDiv.setAttribute('class', 'usa-form-group usa-form-group--error');
var span = d.createElement('span');
span.setAttribute('id', 'input-error-message');
span.setAttribute('role','alert');
span.setAttribute('class','usa-error-message');
span.innerText = error + questionNum;
label.parentNode.insertBefore(span, label.nextSibling);
var input = d.createElement('input');
input.setAttribute('hidden', 'true');
input.setAttribute('id','input-error');
input.setAttribute('type','text');
input.setAttribute('name','input-error');
input.setAttribute('aria-describedby','input-error-message');
questionDiv.appendChild(input);
questionDiv.scrollIntoView();
questionDiv.focus();
// enable submit button ( so user can fix error and resubmit )
var submitButton = this.formComponent().querySelector("[type='submit']");
submitButton.disabled = false;
submitButton.classList.remove("aria-disabled");
},
hideValidationError: function(form) {
var elem = form.querySelector('.usa-form-group--error');
if (elem == null) return;
elem.setAttribute('class','question');
var elem = form.querySelector('#input-error-message');
if (elem != null) elem.parentNode.removeChild(elem);
elem = form.querySelector('#input-error');
if (elem != null) elem.parentNode.removeChild(elem);
},
textCounter: function(event) {
const field = event.target;
const maxLimit = event.target.getAttribute("maxlength");
var countfield = field.parentNode.querySelector(".counter-msg");
if (field.value.length > maxLimit) {
field.value = field.value.substring(0, maxLimit);
countfield.innerText = '0 characters left';
return false;
} else {
countfield.innerText = "" + (maxLimit - field.value.length) + " characters left";
}
},
loadButton: function() {
// Add a landmark for button
this.landmarkElement = d.createElement('div');
this.landmarkElement.setAttribute('aria-label', 'Feedback button');
this.landmarkElement.setAttribute('role', 'complementary');
// Add the fixed, floating tab button
this.buttonEl = d.createElement('button');
this.buttonEl.setAttribute('id', 'fba-button');
this.buttonEl.setAttribute('data-id', this.options.formId);
this.buttonEl.setAttribute('class', 'fba-button fixed-tab-button usa-button');
this.buttonEl.setAttribute('name', 'fba-button');
this.buttonEl.setAttribute('aria-label', this.options.modalButtonText);
this.buttonEl.setAttribute('aria-haspopup', 'dialog');
this.buttonEl.setAttribute('aria-controls', this.modalId());
this.buttonEl.setAttribute('data-open-modal', '');
this.buttonEl.innerHTML = this.options.modalButtonText;
this.buttonEl.addEventListener('click', () => d.dispatchEvent(new CustomEvent('onTouchpointsModalOpen', { detail: { form: this } } )));
this.landmarkElement.appendChild(this.buttonEl);
d.body.appendChild(this.landmarkElement);
this.loadFeebackSkipLink();
},
loadFeebackSkipLink: function() {
this.skipLink = d.createElement('a');
this.skipLink.setAttribute('class', 'usa-skipnav touchpoints-skipnav');
this.skipLink.setAttribute('href', '#fba-button');
this.skipLink.addEventListener('click', function() {
d.querySelector("#fba-button").focus();
});
this.skipLink.innerHTML = 'Skip to feedback';
var existingSkipLinks = d.querySelector('.usa-skipnav');
if(existingSkipLinks) {
existingSkipLinks.insertAdjacentElement('afterend', this.skipLink);
} else {
d.body.prepend(this.skipLink);
}
},
sendFeedback: function() {
d.dispatchEvent(new Event('onTouchpointsFormSubmission'));
var form = this.formElement();
this.ajaxPost(form, this.formSuccess);
},
successHeadingText: function() {
return this.options.successTextHeading;
},
successText: function() {
return this.options.successText;
},
showFormSuccess: function(headerText, bodyHTML) {
var formComponent = this.formComponent();
var formElement = this.formElement();
var alertElement = formComponent.querySelector(".fba-alert");
var alertElementHeading = formComponent.querySelector(".usa-alert__heading");
var alertElementBody = formComponent.querySelector(".usa-alert__text");
// Display success Message
alertElementHeading.innerHTML = headerText;
alertElementBody.innerHTML = bodyHTML
alertElement.removeAttribute("hidden");
this.formComponent().scrollIntoView();
// Hide Form Elements
if (formElement) {
// And clear the Form's Fields
formElement.reset();
localStorage.removeItem(this.formLocalStorageKey());
if (formElement.querySelector('.touchpoints-form-body')) {
var formBody = formElement.querySelector('.touchpoints-form-body');
if(formBody) {
formBody.setAttribute("hidden", true);
}
}
if (formComponent.querySelector('.touchpoints-form-disclaimer')) {
var formDisclaimer = formComponent.querySelector('.touchpoints-form-disclaimer');
if(formDisclaimer) {
formDisclaimer.setAttribute("hidden", true);
}
}
}
},
resetFormDisplay: function() {
if (this.successState === false) {
return false;
}
// Hide and Reset Flash Message
this.resetErrors();
// Re-enable Submit Button
var formElement = this.formElement();
var submitButton = formElement.querySelector("[type='submit']");
submitButton.disabled = false;
// Show Form Elements
if (formElement) {
if (formElement.querySelector('.touchpoints-form-body')) {
var formBody = formElement.querySelector('.touchpoints-form-body')
if(formBody) {
formBody.removeAttribute("hidden");
}
}
}
},
formSuccess: function(e) {
// Clear the alert box
var formComponent = this.formComponent();
var alertElement = formComponent.querySelector(".fba-alert");
var alertElementBody = formComponent.getElementsByClassName("usa-alert__text")[0];
var alertErrorElement = formComponent.querySelector(".fba-alert-error");
var alertErrorElementBody = alertErrorElement.getElementsByClassName("usa-alert__text")[0];
alertElementBody.innerHTML = "";
alertErrorElementBody.innerHTML = "";
var formElement = this.formElement();
var submitButton = formElement.querySelector("[type='submit']");
if (e.target.readyState === 4) {
if (e.target.status === 201) { // SUCCESS!
this.successState = true;
d.dispatchEvent(new Event('onTouchpointsFormSubmissionSuccess'));
this.isFormSubmitted = true;
if(submitButton) {
submitButton.disabled = true;
}
const submission = JSON.parse(e.target.response).submission;
const successHeaderText = submission.form.success_text_heading;
const successBodyText = submission.form.success_text;
this.showFormSuccess(successHeaderText, successBodyText);
} else if (e.target.status === 422) { // FORM ERRORS
this.successState = false;
d.dispatchEvent(new Event('onTouchpointsFormSubmissionError'));
if(submitButton) {
submitButton.disabled = false;
}
var jsonResponse = JSON.parse(e.target.response);
var errors = jsonResponse.messages;
for (var err in errors) {
if (errors.hasOwnProperty(err)) {
alertErrorElementBody.innerHTML += err;
alertErrorElementBody.innerHTML += " ";
alertErrorElementBody.innerHTML += errors[err];
alertErrorElementBody.innerHTML += "
";
}
}
alertErrorElement.removeAttribute("hidden");
const errorMessage = this.formComponent().querySelector('.usa-alert--error');
if (errorMessage) {
errorMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
} else { // OTHER SERVER ERROR
this.successState = false;
d.dispatchEvent(new Event('onTouchpointsFormSubmissionError'));
alertErrorElement.removeAttribute("hidden");
alertErrorElementBody.innerHTML += "Server error. We're sorry, but this submission was not successful. The Product Team has been notified.";
const errorMessage = this.formComponent().querySelector('.usa-alert--error');
if (errorMessage) {
errorMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
}
},
ajaxPost: function (form, callback) {
var url = form.action;
var xhr = new XMLHttpRequest();
// for each form question
var params = this.options.questionParams(form);
// Combine Referrer and Pathname with Form-specific params
params["referer"] = d.referrer;
params["hostname"] = N.location.hostname;
params["page"] = N.location.pathname;
params["query_string"] = N.location.search;
params["location_code"] = form.querySelector("#fba_location_code") ? form.querySelector("#fba_location_code").value : null;
params["fba_directive"] = form.querySelector("#fba_directive") ? form.querySelector("#fba_directive").value : null;
params["language"] = "en";
// Submit Feedback with a POST
xhr.open("POST", url);
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8;");
xhr.onload = callback.bind(this);
xhr.send(JSON.stringify({
"submission": params,
}));
},
currentPageNumber: 1, // start at 1
showInstructions: function() {
const instructions = this.formComponent().getElementsByClassName("fba-instructions")[0];
if(instructions) {
if (this.currentPageNumber == 1) {
instructions.removeAttribute("hidden");
} else {
instructions.setAttribute("hidden", true);
}
}
const requiredQuestionsNotice = this.formComponent().getElementsByClassName("required-questions-notice")[0];
if(requiredQuestionsNotice) {
if (this.currentPageNumber == 1) {
requiredQuestionsNotice.removeAttribute("hidden");
} else {
requiredQuestionsNotice.setAttribute("hidden", true);
}
}
},
_pagination: function() {
var previousButtons = this.formComponent().getElementsByClassName("previous-section");
var nextButtons = this.formComponent().getElementsByClassName("next-section");
var self = this;
for (var i = 0; i < previousButtons.length; i++) {
previousButtons[i].addEventListener('click', function(e) {
e.preventDefault();
var currentPage = e.target.closest(".section");
if (!this.validateForm(currentPage)) return false;
currentPage.classList.remove("fba-visible");
this.currentPageNumber--;
this.showInstructions();
currentPage.previousElementSibling.classList.add("fba-visible");
const previousPageEvent = new CustomEvent('onTouchpointsFormPreviousPage', {
detail: {
formComponent: this
}
});
d.dispatchEvent(previousPageEvent);
// if in a modal, scroll to the top of the modal on previous button click
if(this.formComponent().getElementsByClassName("fba-modal")[0]) {
this.formComponent().scrollTo(0,0);
} else {
N.scrollTo(0, 0);
}
}.bind(self));
}
for (var i = 0; i < nextButtons.length; i++) {
nextButtons[i].addEventListener('click', function(e) {
e.preventDefault();
var currentPage = e.target.closest(".section");
if (!this.validateForm(currentPage)) return false;
currentPage.classList.remove("fba-visible");
this.currentPageNumber++;
this.showInstructions();
currentPage.nextElementSibling.classList.add("fba-visible");
const nextPageEvent = new CustomEvent('onTouchpointsFormNextPage', {
detail: {
formComponent: this
}
});
d.dispatchEvent(nextPageEvent);
// if in a modal, scroll to the top of the modal on next button click
if(this.formComponent().getElementsByClassName("fba-modal")[0]) {
this.formComponent().scrollTo(0,0);
} else {
N.scrollTo(0, 0);
}
}.bind(self))
}
},
modalId: function() {
return `fba-modal-${this.options.formId}`;
},
modalElement: function() {
return document.getElementById(this.modalId());
},
enableLocalStorage: function() {
const form = this.formElement();
const savedData = localStorage.getItem(this.formLocalStorageKey());
if (savedData) {
const formData = JSON.parse(savedData);
for (const key in formData) {
const input = form.querySelector(`[name="${key}"]`);
if (input) {
input.value = formData[key];
}
}
}
form.addEventListener('input', (event) => {
const inputData = {};
const formData = new FormData(form);
formData.forEach((value, key) => {
inputData[key] = value;
});
localStorage.setItem(this.formLocalStorageKey(), JSON.stringify(inputData));
});
},
};
};
// Specify the options for your form
var touchpointFormOptions8a22dd4d = {
'formId': "8a22dd4d",
'modalButtonText': "Feedback",
'elementSelector': "",
'css' : ".fba-modal-dialog {\n font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;\n font-size: 100%;\n}\n\n.fba-modal-dialog h1 {\n margin-right: 20px;\n margin-top: -1rem;\n word-wrap: break-word;\n}\n\n.fba-inline-container {\n background: #fff;\n border: 1px solid #E5E5E5;\n max-width: 35rem;\n margin: 0 auto 40px auto;\n}\n\n.fixed-tab-button {\n bottom: 0;\n padding: 5px 10px;\n position: fixed;\n right: 12px;\n z-index: 9999;\n\n}\n#fba-button.usa-button:hover,\n.fixed-tab-button.usa-button:hover {\n color:white;\n background-color:#1a4480;\n border-bottom:0;\n text-decoration:none;\n}\n\n#fba-text-name, #fba-text-email {\n max-width: 100% !important;\n font-size: 100%\n}\n\n/* Form Sections */\n.touchpoints-form-wrapper form div.section {\n display: none;\n}\n.touchpoints-form-wrapper form div.section.fba-visible {\n display: block;\n}\n\n.hide {\n display: none;\n}\n\n\n/*! from USWDS uswds v2.9.0 */\n#fba-button.usa-button{\n font-family:Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;\n font-size:1.06rem;\n line-height:0.9;\n -moz-osx-font-smoothing:grayscale;\n -webkit-font-smoothing:antialiased;\n color:white;\n background-color:#005ea2;\n -webkit-appearance:none;\n -moz-appearance:none;\n appearance:none;\n border:0;\n border-radius:0.25rem;\n cursor:pointer;\n display:inline-block;\n font-weight:bold;\n margin-right:0.5rem;\n padding:0.75rem 1.25rem;\n text-align:center;\n text-decoration:none;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0\n}\n\n.usa-skipnav.touchpoints-skipnav{\n font-family:Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;\n font-size:1.06rem;\n line-height:1.5;\n color:#005ea2;\n text-decoration:underline;\n background:transparent;\n left:0;\n padding:0.5rem 1rem;\n position:absolute;\n top:-3.8rem;\n transition:0.15s ease-in-out;\n z-index:100;\n}\n.usa-skipnav.touchpoints-skipnav:visited{\n color:#54278f;\n}\n.usa-skipnav.touchpoints-skipnav:hover{\n color:#1a4480;\n}\n.usa-skipnav.touchpoints-skipnav:active{\n color:#162e51;\n}\n.usa-skipnav.touchpoints-skipnav:focus{\n outline:0.25rem solid #2491ff;\n outline-offset:0;\n}\n.usa-skipnav.touchpoints-skipnav:focus{\n background:white;\n left:0;\n position:absolute;\n top:0;\n transition:0.2s ease-in-out;\n}\n\n.fba-modal-dialog abbr[title=required]{\n text-decoration:none;\n}\n\n/* Custom */\n.touchpoints-form-wrapper .usa-banner {\n margin-top: 10px;\n}\n\n.usa-banner__header.touchpoints-footer-banner {\n min-height: 0;\n}\n\n.fba-modal-dialog .question-options.big-thumbs .usa-radio__label::before {\n display: none;\n}\n\n/* Same max-width as texarea */\n.touchpoints-form-body .big-thumbs {\n max-width: 35rem;\n}\n\n.question-options.big-thumbs .usa-radio__input--tile+.usa-radio__label {\n color: #005ea2;\n padding-left: 1rem;\n}\n\n.touchpoint-form .question-options {\n clear: both;\n}\n\n.touchpoint-form {\n max-width: 35em;\n margin-left: auto;\n margin-right: auto;\n}\n\n.fba-modal-dialog .margin-top-3{\n margin-top:1.5rem;\n}\n\n/* Override */\n.touchpoint-form .usa-form--large {\n max-width: 35rem;\n}\n\n.fba-modal-dialog .usa-sr-only{\n position:absolute;\n left:-999em;\n right:auto;\n}\n\n/* big thumbs up down buttons */\n.fba-modal-dialog .usa-icon{\n display:inline-block;\n fill:currentColor;\n height:1em;\n position:relative;\n width:1em;\n}\n\n.fba-modal-dialog .margin-top-2 {\n margin-top:1rem;\n}\n\n.fba-modal-dialog .text-center{\n text-align:center;\n}\n\n.fba-modal-dialog .font-sans-3xl{\n font-size:3.19rem;\n}\n\n.fba-modal-dialog .margin-bottom-2 {\n margin-bottom:1rem;\n}\n\n.fba-modal-dialog .margin-bottom-3 {\n margin-top:1.5rem;\n}\n\n.fba-modal-dialog .text-right{\n text-align:right;\n}\n\n.fba-modal-dialog .text-bold{\n font-weight:700;\n}\n\n.fba-modal-dialog .usa-button .margin-top-0{\n margin-top:0;\n}\n\n.fba-modal-dialog .previous-section.usa-button{\n margin-top:0;\n}\n\n.fba-modal-dialog .border-0{\n border:0 solid;\n}\n\n.fba-modal-dialog .border-gray-10{\n border-color:#e6e6e6;\n}\n\n.fba-modal-dialog .border-top{\n border-top:1px solid;\n}\n\n.fba-modal-dialog .display-none{\n display:none;\n}\n\n.fba-modal-dialog .padding-bottom-0 {\n padding-bottom:0;\n}\n\n.fba-modal-dialog .padding-top-0 {\n padding-top:0;\n}\n\n.fba-modal-dialog .touchpoints-form-wrapper .usa-form {\n max-width: 100%;\n}\n\n.ql-editor[contentEditable=true]:focus {\n outline: none;\n}",
'loadCSS' : true,
'formSpecificScript' : function() {
},
'deliveryMethod' : "touchpoints-hosted-only",
'successTextHeading' : "Success",
'successText' : "Thank you for your response! Your feedback will be used to improve the site and help us serve you better.",
'questionParams' : function(form) {
return {
answer_01 : form.querySelector("input[name=question_1026_answer_01]:checked") && form.querySelector("input[name=question_1026_answer_01]:checked").value,
answer_02 : form.querySelector("input[name=question_1027_answer_02]:checked") && form.querySelector("input[name=question_1027_answer_02]:checked").value,
answer_03 : form.querySelector("input[name=question_1028_answer_03]:checked") && form.querySelector("input[name=question_1028_answer_03]:checked").value,
answer_04 : form.querySelector("input[name=question_1029_answer_04]:checked") && form.querySelector("input[name=question_1029_answer_04]:checked").value,
answer_05 : form.querySelector("input[name=question_1030_answer_05]:checked") && form.querySelector("input[name=question_1030_answer_05]:checked").value,
answer_06 : form.querySelector("input[name=question_1031_answer_06]:checked") && form.querySelector("input[name=question_1031_answer_06]:checked").value,
answer_07 : form.querySelector("input[name=question_1038_answer_07]:checked") && form.querySelector("input[name=question_1038_answer_07]:checked").value,
answer_09 : form.querySelector("#question_1032_answer_09") && form.querySelector("#question_1032_answer_09").value,
answer_11 : form.querySelector("input[name=question_1039_answer_11]:checked") && Array.apply(null,form.querySelectorAll("input[name=question_1039_answer_11]:checked")).map(function(x) {return x.value;}).join(','),
answer_12 : form.querySelector("input[name=question_1040_answer_12]:checked") && form.querySelector("input[name=question_1040_answer_12]:checked").value,
answer_13 : form.querySelector("#question_1041_answer_13") && form.querySelector("#question_1041_answer_13").value,
answer_14 : form.querySelector("input[name=question_1033_answer_14]:checked") && form.querySelector("input[name=question_1033_answer_14]:checked").value,
answer_15 : form.querySelector("input[name=question_1034_answer_15]:checked") && Array.apply(null,form.querySelectorAll("input[name=question_1034_answer_15]:checked")).map(function(x) {return x.value;}).join(','),
answer_16 : form.querySelector("#question_1042_answer_16") && form.querySelector("#question_1042_answer_16").value,
answer_17 : form.querySelector("input[name=question_1043_answer_17]:checked") && form.querySelector("input[name=question_1043_answer_17]:checked").value,
answer_18 : form.querySelector("input[name=question_1035_answer_18]:checked") && Array.apply(null,form.querySelectorAll("input[name=question_1035_answer_18]:checked")).map(function(x) {return x.value;}).join(','),
answer_19 : form.querySelector("#question_1036_answer_19") && form.querySelector("#question_1036_answer_19").value,
answer_20 : form.querySelector("#question_1037_answer_20") && form.querySelector("#question_1037_answer_20").value,
}
},
'suppressUI' : true,
'suppressSubmitButton' : false,
'htmlFormBody' : function() {
return null;
},
'htmlFormBodyNoModal' : function() {
return null;
}
}
// Create an instance of a Touchpoints form object
window.touchpointForm8a22dd4d = new FBAform(document, window);
window.touchpointForm8a22dd4d.init(touchpointFormOptions8a22dd4d);