How to reformat Business Catalyst forms with bootstrap 4 webforms

by Ryan Perez

HTML

<form name="catwebformform83417" method="post" onsubmit="return checkWholeForm83417(this)" enctype="multipart/form-data" action="/FormProcessv2.aspx?WebFormID=729604&amp;OID=6889043&amp;OTYPE=1&amp;EID=0&amp;CID=0">
    <br>
    <table class="webform" cellspacing="0" cellpadding="2" border="0">
        <tbody>

            <tr>
                <td>
                    <label for="FirstName" class="">First Name <span class="req">*</span>
                    </label>
                    <br>
                    <input type="text" name="FirstName" id="FirstName" class="cat_textbox" maxlength="255"> </td>
            </tr>
            <tr>
                <td>
                    <label for="LastName">Last Name <span class="req">*</span>
                    </label>
                    <br>
                    <input type="text" name="LastName" id="LastName" class="cat_textbox" maxlength="255"> </td>
            </tr>
            <tr>
                <td>
                    <label for="EmailAddress">Email Address <span class="req">*</span>
                    </label>
                    <br>
                    <input type="text" name="EmailAddress" id="EmailAddress" class="cat_textbox" maxlength="255"> </td>
            </tr>
            <tr>
                <td><div style="display: none">
<input type="text" name="s_content" id="s_content" class="cat_textbox">
<input type="text" name="s_summary" id="s_summary" class="cat_textbox" value="cb688c30986a4b41988365011cbe8c93">
</div>
</td>
            </tr>
            <tr>
                <td>
                    <label for="CAT_Custom_1946909">Type of Customer</label>
                    <br>
                    <select name="CAT_Custom_1946909" id="CAT_Custom_1946909" class="cat_dropdown">
                        <option value=" ">-- Please select --</option>
                        <option value="Residential">Residential</option>
                        <option value="Commercial">Commercial</option>
                ...

CSS

fieldset {
  
 color: red;
  
}

.form-group {
  
  color: blue;
  
}

.form-control {
  
  background-color: green;
  
}

.c-select {
  
    background-color: green;
  
}

.c-inputs-stacked {
  
  background-color: red;
  
}

.ryan(

color:white;
background:white;

)

JavaScript

$( document ).ready(function() {
	
  $('.webform td').each(function(){
  
  	$(this).wrapInner("<fieldset class='form-group'></fieldset>");
    $('input:text').removeClass('cat_textbox').addClass('form-control');
     $('textarea').removeClass('cat_listbox').addClass('form-control');
    $('select').removeClass('*').addClass('c-select');
		

  
 	});

$('input:checkbox').parent().wrapInner('<div class="c-inputs-stacked"></div>');
var _html = "";
var $container = $('.c-inputs-stacked');
$container.find('input').each(function(){
  $this = $(this);
  _name = $this.attr('name');
  _id = $this.attr('id');
  _value = $this.attr('value');
  _text = $this.text();

  _html += '<label class="c-input c-checkbox">';
  _html += '  <input id="' + _id + '" name="' + _name + '" type="checkbox" value="' + _value + '">';
  _html += '  <span class="c-indicator"></span>';
  _html += _value;
  _html += '</label><br>';
});
$container.html(_html); 

$('input:button').removeClass('cat_textbox').addClass('form-control');

});