Button IconFeedbacky

Feedbacky Demo

This is a demo page for the Feedbacky package. You can use it to test out the form below and see how it works.

Customize Options

You can use this form to test out the Feedbacky package. Enter your options and click the button below to reload the Feedbacky modal with your options.

If you want to use Feedbacky Api, you can set this option to true.

If you want to use Sheet Db Api, you can set this option to true.

Custom submit handler function. For demo purposes it render an alert with data.

Show backdrop behind the form and prevent body scroll.

Close the form when clicking on the backdrop.

Close the form when pressing the 'Escape' key.

Background color of the form.

Primary color used for buttons and highlights.

Secondary color (not widely used).

Text for the submit button.

Icon shown in the form title.

Position of the main button ('left' or 'right').

Text content for the main button.

Description text displayed in the form.

Title text displayed in the form.

Icon displayed on successful form submission.

Success message displayed after form submission.

Icon displayed on form submission error.

Error message displayed after form submission error.

Text for the success message button.

Text for the error message button.

Fields to be shown in the form. Please be aware that if you use Sheet DB Api, POST request will be failed cause of the missing fields. See detail from the documentation.

Options Preview

This is a preview of the options you have selected.

{
  "customSubmitHandler": null,
  "showBackdrop": true,
  "closeOnBackdropClick": true,
  "closeOnEscape": true,
  "backgroundColor": "#fff",
  "primaryColor": "#303530bf",
  "secondaryColor": "#152027",
  "submitButtonText": "Submit",
  "titleIcon": "<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <title>Feedback Icon</title>\n  <path d=\"M3 7.2C3 6.07989 3 5.51984 3.21799 5.09202C3.40973 4.71569 3.71569 4.40973 4.09202 4.21799C4.51984 4 5.0799 4 6.2 4H17.8C18.9201 4 19.4802 4 19.908 4.21799C20.2843 4.40973 20.5903 4.71569 20.782 5.09202C21 5.51984 21 6.0799 21 7.2V20L17.6757 18.3378C17.4237 18.2118 17.2977 18.1488 17.1656 18.1044C17.0484 18.065 16.9277 18.0365 16.8052 18.0193C16.6672 18 16.5263 18 16.2446 18H6.2C5.07989 18 4.51984 18 4.09202 17.782C3.71569 17.5903 3.40973 17.2843 3.21799 16.908C3 16.4802 3 15.9201 3 14.8V7.2Z\" stroke=\"#000000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>",
  "position": "right",
  "requiredErrorMessage": "This field is required!",
  "buttonText": "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#000000\" height=\"40px\" width=\"40px\" version=\"1.1\" id=\"Layer_1\" viewBox=\"-45.8 -45.8 549.60 549.60\" xml:space=\"preserve\" transform=\"rotate(0)matrix(1, 0, 0, 1, 0, 0)\" stroke=\"#000000\" stroke-width=\"0.00458\" role=\"img\" aria-labelledby=\"button-icon-title\">\n  <title id=\"button-icon-title\">Button Icon</title>\n  <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n  <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n  <g id=\"SVGRepo_iconCarrier\">\n    <g>\n      <g>\n        <path d=\"M428,41.534H30c-16.569,0-30,13.431-30,30v252c0,16.568,13.432,30,30,30h132.1l43.942,52.243 c5.7,6.777,14.103,10.69,22.959,10.69c8.856,0,17.258-3.912,22.959-10.69l43.942-52.243H428c16.568,0,30-13.432,30-30v-252 C458,54.965,444.568,41.534,428,41.534z M323.916,281.534H82.854c-8.284,0-15-6.716-15-15s6.716-15,15-15h241.062 c8.284,0,15,6.716,15,15S332.2,281.534,323.916,281.534z M67.854,198.755c0-8.284,6.716-15,15-15h185.103c8.284,0,15,6.716,15,15 s-6.716,15-15,15H82.854C74.57,213.755,67.854,207.039,67.854,198.755z M375.146,145.974H82.854c-8.284,0-15-6.716-15-15 s6.716-15,15-15h292.291c8.284,0,15,6.716,15,15C390.146,139.258,383.43,145.974,375.146,145.974z\"></path>\n      </g>\n    </g>\n  </g>\n</svg>",
  "description": "Let us know what you think!",
  "title": "Feedbacky Demo",
  "successIcon": "🎉",
  "successMessage": " Your message was sent successfully!",
  "errorIcon": "😢",
  "errorMessage": "Error! Something went wrong, please try again later.",
  "successButtonText": "Close ",
  "errorButtonText": "Close Modal",
  "formFields": [
    {
      "element": "input",
      "type": "email",
      "name": "email",
      "label": "Email",
      "required": true,
      "placeholder": "Your email address"
    },
    {
      "element": "textarea",
      "name": "message",
      "label": "Message",
      "required": true,
      "rows": 5,
      "maxLength": 2000,
      "placeholder": "Your feedback is important to us!"
    }
  ],
  "onErrorSubmit": null,
  "onSuccessSubmit": null,
  "clientId": "******* YOUR CLIENT ID *******"
}