Form not embedding

Infos:

  • Used Zammad version: 5.2.x
  • Used Zammad installation type: debian package
  • Operating system: Ubuntu 20.0
  • Browser + version: Chrome 103.0.5060.134 / Firefox 102.0.1

Expected behavior:

Embedded functional form

Actual behavior:

The text “Form will be placed here” and I get an error in the browser console “uncaught TypeError: ZammadForm is not a function”
With some references to Jquery

Steps to reproduce the behavior:

Install code on any platform. Even a blank HTML file.


Any ideas why this is happening?

Do you have an example of the code you are using to embed the form?

Do you have the form enabled in Zammad settings?

Hello Sal, yes! The forms are enabled, and the code is as follows:

<div id="zammad-feedback-form">form will be placed in here</div>

<script id="zammad_form_script" src="https://support.visnovo.eu/assets/form/form.js"></script>

<script>
$(function() {
  $('#zammad-feedback-form').ZammadForm({
    messageTitle: 'Feedback Form',
    messageSubmit: 'Submit',
    messageThankYou: 'Thank you for your inquiry (#%s)! We\'ll contact you as soon as possible.'
  });
});
</script>

Did you add the jquery code prior to the code above?

Yes, jquery is loaded in. We have a bunch of other scripts that depend on Jquery. The Zammad chat for example, works just fine!

It happens on a blank HTML file too.

My guess is it’s something to do with jquery not loading or your form loading before jquery.

Make sure the code to load jquery is before the form and is actually loading:

Do you have a URL the form is on?

1 Like

The tool we’re using(Webflow) is adding its own Jquery libraries, which zammad does not seem to like

Removing these two lines respectively seems to fix the issue, while adding a plethora of other issues.

<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=61eac5ed808c157ef470601b" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

and

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

Guess this is a prompt to move away from Webflow and take a more manual approach? :^)

Update: It was an addon that added an extra jquery line. Removing these lines fixed the issue.

1 Like

Happy you have it working now. :smiley: