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() {
        
        $('table').removeClass('webform').addClass('table');
        
        
        $('table br').each(function() {
            
           $(this).remove();
            
        });
        
        $('.table 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('cat_dropdown').addClass('form-control c-select');
            
        });
        
        $('input:checkbox').parent().wrapInner('<div class="c-inputs-stacked"></div>');
        
        $('.c-inputs-stacked').children('label,input').not(':first-child').wrapAll('<div class="wrapit"></div>');
        
        
        
        var _html = "";
        var $container = $('.wrapit');
        
        $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>';
        });
        $container.html(_html);
        
        var child = $('.c-inputs-stacked').children('label,.wrapit');
        
        $('.c-inputs-stacked').html(child);
        
        $('input:button').removeClass('cat_textbox').addClass('form-control');
        $('.cat_button').removeClass().addClass('btn btn-primary waves-effect waves-light');
    });