var ContactForm = Ractive.extend({ template: '#contactFormTemplate', oninit: function() { var self = this; self.set('isVisible', false); self.on({ 'showForm': function(event) { self.toggle('isVisible'); self.set({ name: '', email: '', phoneNumber: '', url: '', success: false, class: '', registrationFailed: false, userHasWebsite: false }) event.original.preventDefault(); }, 'submitForm': function(event) { var name = self.nodes.userName.value; var email = self.nodes.userEmail.value; if (name == '' || email == '') { self.set({ registrationFailed: true, class: 'empty-form' }); } else { self.set({ success: true, registrationFailed: false, class: 'filled-form' }); var user = { name: this.get('name'), email: this.get('email'), phoneNumber: this.get('phoneNumber'), url: this.get('url') }; // you can add this user to database for example console.log(user); }; event.original.preventDefault(); }, 'websiteExists': function() { self.toggle('userHasWebsite'); self.set('url', ''); } }); } }) var form = new ContactForm({ el: '#main', });