Second version of forms.

app/assets/javascripts/app/controllers/_channel/form.js.coffee

@@ -1,9 +1,13 @@
 class App.ChannelForm extends App.Controller
+  events:
+    'change form.js-params': 'updateParams'
+    'keyup form.js-params': 'updateParams'
+
   constructor: ->
     super
     @title 'Form'
     @render()
-
+    @updateParams()
     new App.SettingsArea(
       el:   @el.find('.js-settings')
       area: 'Form::Base'
@@ -13,3 +17,15 @@ class App.ChannelForm extends App.Controller
     @html App.view('channel/form')(
       baseurl: window.location.origin
     )
+
+  updateParams: ->
+    params = @formParam(@$('.js-params'))
+    paramString = ''
+    for key, value of params
+      if paramString != ''
+        paramString += ",\n"
+      if value == 'true' || value == 'false'
+        paramString += "  #{key}: #{value}"
+      else
+        paramString += "  #{key}: '#{value}'"
+    @$('.js-modal-params').html(paramString)

app/assets/javascripts/app/views/channel/form.jst.eco

@@ -9,34 +9,45 @@
   <div class="js-settings"></div>
 
   <h2><%- @T('Settings') %></h2>
-  <table class="settings-list">
+  <form class="js-params">
-    <thead>
+    <table class="settings-list">
-      <tr>
+      <thead>
-        <th style="white-space: nowrap;"><%- @T('Option') %></th>
+        <tr>
-      </tr>
+          <th style="white-space: nowrap;"><%- @T('Option') %></th>
-    </thead>
+        </tr>
-    <tbody>
+      </thead>
-      <tr>
+      <tbody>
-        <td><label><input type="checkbox" name="debug"/> <%- @T('Debug') %></label></td>
+        <tr>
-      </tr>
+          <td><label><input type="text" name="title" value="<%- @T('Feedback Form') %>" style="display: inline; width: auto;"/> <%- @T('Title of the form.') %></label></td>
-      <tr>
+        </tr>
-        <td><label><input type="checkbox" name="modal"/> <%- @T('Modal Dialog') %></label></td>
+        <tr>
-      </tr>
+          <td><label><input type="text" name="submit" value="<%- @T('Submit') %>" style="display: inline; width: auto;"/> <%- @T('Name of submit button.') %></label></td>
-      <tr>
+        </tr>
-        <td><label><input type="checkbox"/> <%- @T('Debug') %></label></td>
+        <tr>
-      </tr>
+          <td><label><input type="text" name="thank_you" value="<%- @T('Thank you for your inquiry!') %>" style="display: inline; width: auto;"/> <%- @T('Message after sending form.') %></label></td>
-    </tbody>
+        </tr>
-  </table>
+        <tr>
+          <td><label><input type="checkbox" name="debug" value="true"/> <%- @T('Enable debugging for implementation.') %></label></td>
+        </tr>
+        <tr>
+          <td><label><input type="checkbox" name="modal" value="true" checked/> <%- @T('Start modal dialog for form.') %></label></td>
+        </tr>
+        <tr>
+          <td><label><input type="checkbox" name="noCSS" value="true"/> <%- @T('Load no CSS for form. You need to generate your own CSS for the form.') %></label></td>
+        </tr>
+      </tbody>
+    </table>
+  </form>
 
   <p><%- @T('You need to add the following Java Script code snipped to your web page') %>:
 
   <pre>
+&lt;button id="feedback-form"&gt;Feedback&lt;/button&gt;
+
 &lt;script id="zammad_form_script" src="<%= @baseurl %>/assets/form/form.js"&gt;&lt;/script&gt;
 &lt;script&gt;
 $('#feedback-form').zammad_form({
-  lang: 'de-de',
+<span class="js-modal-params"></span>
-  debug: true,
-  modal: false,
 });
 &lt;/script&gt;</pre>
 </div>

app/controllers/form_controller.rb

@@ -33,6 +33,9 @@ class FormController < ApplicationController
     if params[:email] !~ /@/
       errors['email'] = 'invalid'
     end
+    if !params[:title] || params[:title].empty?
+      errors['title'] = 'required'
+    end
     if !params[:body] || params[:body].empty?
       errors['body'] = 'required'
     end
@@ -65,7 +68,7 @@ class FormController < ApplicationController
     ticket = Ticket.create(
       group_id: 1,
       customer_id: customer.id,
-      title: '',
+      title: params[:title],
       state_id: Ticket::State.find_by( name: 'new' ).id,
       priority_id: Ticket::Priority.find_by( name: '2 normal' ).id,
       updated_by_id: customer.id,
@@ -78,7 +81,7 @@ class FormController < ApplicationController
       sender_id: Ticket::Article::Sender.find_by( name: 'Customer' ).id,
       body: params[:body],
       from: email,
-      subject: '',
+      subject: params[:title],
       internal: false,
       updated_by_id: customer.id,
       created_by_id: customer.id,

public/assets/form/form.css

@@ -1,5 +1,9 @@
 .zammad-form {
-  width: 300px;
+  width: 100%;
+}
+
+.zammad-form h1, .zammad-form h2 {
+  margin-top: 0;
 }
 
 .zammad-form .form-group {
@@ -16,4 +20,46 @@
 }
 .zammad-form .has-error label {
   color: #a94442;
+}
+
+.modal {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+}
+
+.modal:before {
+    content: "";
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+    margin-right: -0.25em;
+}
+
+.modal-backdrop {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.7;
+    background-color: gray;
+}
+
+.modal-body {
+    text-align: left;
+    background: white;
+    border-radius: 5px;
+    padding: 24px 24px 22px;
+    width: 26em;
+    margin: 0 auto;
+    box-sizing: border-box;
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+    box-shadow: 0 0 50px rgba(0,0,0,.3);
+    color: #949494;
 }

public/assets/form/form.html

@@ -5,13 +5,47 @@
 </head>
 <body>
 
-<div id="example_form"></div>
+<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+
+<h1>Feedback as Modal</h1>
+<button id="feedback-form-modal">Feedback as Modal</button>
+
+<h1>Feedback Inline</h1>
+<div id="feedback-form-inline"></div>
+
+
+<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
+<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
+
+<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
+
+<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
+
+<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
+
+<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.</p>
+
+<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+
+<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
+<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
+
+<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo</p>
+
 
 <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
 <script id="zammad_form_script" src="http://localhost:3000/assets/form/form.js"></script>
 
 <script>
- $('#example_form').zammad_form({debug:true});
+$('#feedback-form-modal').zammad_form({
+  modal: true,
+});
+
+ $('#feedback-form-inline').zammad_form({
+  modal: false,
+});
 </script>
 
 

public/assets/form/form.js

@@ -7,7 +7,10 @@
   var pluginName = 'zammad_form',
   defaults = {
     debug: false,
-    loadCss: true,
+    noCSS: false,
+    title: 'Zammad Form',
+    submit: 'Submit',
+    thank_you: 'Thank you for your inquiry!',
   };
 
   function Plugin( element, options ) {
@@ -20,7 +23,14 @@
     this._name     = pluginName;
 
     this._endpoint_config = '/api/v1/form_config'
+    this._endpoint_submit = '/api/v1/form_submit'
     this._script_location = '/assets/form/form.js'
+    this._css_location    = '/assets/form/form.css'
+
+    src = document.getElementById('zammad_form_script').src
+    this.css_location = src.replace(this._script_location, this._css_location)
+    this.endpoint_config = src.replace(this._script_location, this._endpoint_config)
+    this.endpoint_submit = src.replace(this._script_location, this._endpoint_submit)
 
     this._config  = {}
 
@@ -52,35 +62,40 @@
 
 
   Plugin.prototype.init = function () {
-    var _this = this,
+    var _this = this
-      src = document.getElementById("zammad_form_script").src,
-      endpoint_config = src.replace(this._script_location, this._endpoint_config)
 
     _this.log('init')
 
-    if (_this.options.loadCss) {
+    if (!_this.options.noCSS) {
-      _this.loadCss('form.css')
+      _this.loadCss(_this.css_location)
     }
 
-    _this.log('endpoint_config: ' + endpoint_config)
+    _this.log('endpoint_config: ' + _this.endpoint_config)
+    _this.log('endpoint_submit: ' + _this.endpoint_submit)
 
     // load config
     $.ajax({
-      url: endpoint_config,
+      url: _this.endpoint_config,
     }).done(function(data) {
       _this.log('config:', data)
       _this._config = data
-      _this.render()
     }).fail(function() {
       alert('Faild to load form config!')
     });
 
-    // bind form submit
+    // show form
-    this.$element.on('submit', function (e) {
+    if (!this.options.modal) {
-      e.preventDefault()
+      _this.render()
-      _this.submit()
+    }
-      return true
+
-    })
+    // bind form on call
+    else {
+      this.$element.on('click', function (e) {
+        e.preventDefault()
+        _this.render()
+        return true
+      })
+    }
   }
 
   // load css
@@ -97,28 +112,29 @@
   Plugin.prototype.submit = function() {
     var _this = this
 
-    _this.log('submit form', _this.getParams())
-
     $.ajax({
       method: 'post',
-      url: _this._config.endpoint,
+      url: _this.endpoint_submit,
       data: _this.getParams(),
     }).done(function(data) {
-      _this.log('ok done', _this._config.endpoint)
 
       // removed errors
-      _this.$element.find('.has-error').removeClass('has-error')
+      _this.$form.find('.has-error').removeClass('has-error')
 
       // set errors
       if (data.errors) {
         $.each(data.errors, function( key, value ) {
-          _this.$element.find('[name=' + key + ']').closest('.form-group').addClass('has-error')
+          _this.$form.find('[name=' + key + ']').closest('.form-group').addClass('has-error')
         })
         return
       }
 
       // ticket has been created
       _this.thanks()
+
+      // rerender after 6 seconds
+      _this.render()
+
     }).fail(function() {
       alert('Faild to submit form!')
     });
@@ -129,15 +145,44 @@
     var _this = this,
       params = {}
 
-    $.each( _this.$element.find('form').serializeArray(), function( index, item ) {
+    $.each( _this.$form.serializeArray(), function( index, item ) {
       params[item.name] = item.value
     })
+
+    if (!params.title) {
+      params.title = this.options.title
+    }
+
+    _this.log('params', params)
+
     return params
   }
 
+  Plugin.prototype.closeModal = function() {
+    if (this.$modal) {
+      this.$modal.remove()
+    }
+  }
+
   // render form
   Plugin.prototype.render = function(e) {
-    var form = $('<form class="zammad-form"></form>')
+    var _this = this
+    _this.closeModal()
+
+    var element = '<div class="modal">\
+      <div class="modal-backdrop js-close"></div>\
+      <div class="modal-body">\
+        <form class="zammad-form"></form>\
+      </div>\
+    </div>'
+
+    if (!this.options.modal) {
+      element = '<div><form class="zammad-form"></form></div>'
+    }
+
+    var $element = $(element)
+    var $form = $element.find('form')
+    $form.append('<h2>' + this.options.title + '</h2>')
     $.each(this.attributes, function( index, value ) {
       var item = $('<div class="form-group"><label>' + value.display + '</label></div>')
       if (value.tag == 'input') {
@@ -146,18 +191,43 @@
       else if (value.tag == 'textarea') {
         item.append('<textarea class="form-control" name="' + value.name + '" placeholder="' + value.placeholder + '"></textarea>')
       }
-      form.append(item)
+      $form.append(item)
     })
-    form.append('<button type="submit">' + 'Submit' + '</button')
+    $form.append('<button type="submit" class="btn">' + this.options.submit + '</button')
-    this.$element.html(form)
+
-    return form
+    this.$modal = $element
+    this.$form  = $form
+
+    // bind on close
+    $element.find('.js-close').on('click', function (e) {
+      e.preventDefault()
+      _this.closeModal()
+      return true
+    })
+
+    // bind form submit
+    $element.on('submit', function (e) {
+      e.preventDefault()
+      _this.submit()
+      return true
+    })
+
+    // show form
+    if (!this.options.modal) {
+      _this.$element.html($element)
+    }
+
+    // append modal to body
+    else {
+      $('body').append($element)
+    }
+
   }
 
   // thanks
   Plugin.prototype.thanks = function(e) {
-    var form = $('<div>Thank you for your inquery!</div>')
+    var thanks = $('<div>Thank you for your inquery!</div>')
-    this.$element.html(form)
+    this.$form.html(thanks)
-    return form
   }
 
   // log method