JSFiddle - React, Tailwind, and code Playground

by dpnminh

HTML

<div id="contact-form">
  <button onclick="addForm('Contact', 'contact-form')">
    Add Contact Form
  </button>
</div>
<div id="feedback-form">
  <button onclick="addForm('Feedback', 'feedback-form')">
    Add Feedback Form
  </button>
</div>
<!-- <div id="survey-form">
  <button onclick="addForm('Survey', 'survey-form')">
    Add Survey Form
  </button>
</div> -->

CSS

form[class^="cooladata-form-"]{
  font-size: 1rem;
  font-family: Arial;
}

.header-form{
  text-transform: capitalize;
  color: #2FB1CD;
  font-size:2rem;
  padding: 0.5rem;
  text-align:center;
}

.question-container{
  display:flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
}

.question-container>.label-input{
  padding-bottom: 0.5rem;
}

.question-container>.answer-input{
  padding: 0.5rem;
}

.checkboxes-container{
  display:flex;
  flex-direction: column;
}

.label-option{
  display:flex;
  align-items: center;
}

input[id^="answer-option-"]{
  width: 1.1rem;
  height:1.1rem;
}

button{
  padding: 0.5rem;
  color:white;
  background: #2FB1CD;
  border: none;
  display:block;
  margin: 0.5rem auto;
}

JavaScript

'use strict';

(function(d,a){if(!a.__SV){var b,c,g,e;window.cooladata=a;a._i=[];a.init=function(b,c,f){function d(a,b){var c=b.split(".");2==c.length&&(a=a[c[0]],b=c[1]);a[b]=function(){a.push([b].concat(Array.prototype.slice.call(arguments,0)))}}var h=a;"undefined"!==typeof f?h=a[f]=[]:f="cooladata";g=["trackEvent","trackEventLater","trackPageload","flush","setConfig"];for(e=0;e<g.length;e++)d(h,g[e]);a._i.push([b,c,f])};a.__SV=1.2;b=d.createElement("script");b.type="text/javascript";b.async=!0;b.src="https://cdn.cooladata.com/tracking/cooladata-latest.min.js";c=d.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c)}})(document,window.cooladata||[]);
cooladata.init({
	"app_key": "8ni0gv45kuxt0sgm4p21xlznrpi1femi",
	"track_pageload": true,
	"img_src_get_request": true
});

(function(_parent){
	if (_parent.CooladataService) return;

	loadCSS();

	var classNames = {
		form: "cooladata-form-",
		header: "header-form",
		subtitle: "subtitle-text-form",
		questionCon: "question-container",
		answerOp: "answer-option-",
		answer: 'answer-input',
		labelOp: 'label-option',
		label: 'label-input',
		checkboxesContainer: 'checkboxes-container'
	}

	function CooladataService(){
		var forms = new Map();

		return {
			init: function(settings){
				if (typeof settings !== "object"){
					settings = JSON.parse(settings);
				}

				if (settings.forms && settings.forms.length > 0){
					for (var i = 0; i < settings.forms.length; i++){
						this.initForm(settings.forms[i]);
					}
				}
			},
			initForm: function(form){
				forms.set(form.type, new Form(form));
			},
			loadForm: function(type){
				if (forms.has(type)){
					return forms.get(type);
				}

				return undefined;
			},
			loadFormInTo: function(type, divId){
				var form = this.loadForm(type);

				if (form && divId){
					form.appendTo(divId);
				}
			}
		}
	}

	function Form (info){
		var type = info.type,
			title = info.title || type,
			subtitle = info.subtitle || "",
			formId = type + '-' +...