Ideas - Click Marketing Automation for D365

Currently, forms built via the form builder tool use tables to layout where form elements go, this has several problems which should be considered for review.

1. Tables are for tabluar data, not layout. Using them for layout is bad practice and has been for years, it is against accessibility and best practice, amongst other things.
2. Form builder forms produce empty tables cells, regardless if the space is in use or not. These are bad.
3. Due to how each form element is placed, you can't stack tables cell as block elements for optimising forms on mobile devices, they become out of order.
4. The only way to make a form via form builder mobile friendly is stick to the one column and reset all the widths to 100%, as using more than one column, means you can't stack table cells to one column on smaller devices for the reason above. This one column requirement, impacts the form appearance for desktop users, particularly on long forms.
5. MOBILE OPTIMISATION! I can't stress this enough, in today's web world, if something isn't mobile optimised, its a wasted opportunity. Using tables restricts this possibility almost completely.

While there is custom form capture and programmatic form capture options, where you can control the form layout. Some features of ClickDimensions require a standalone form via form builder for certain functionality to work, like profile management.

An idea for new HTML structure for form builder

I would like to see a structure using divs for forms created by form builder, moving away from tables entirely, or at least, not used to control the main layout.

The idea would be, rather than a table cell, the div would contain ALL elements for the placed form element, this would include the span i.e. label, input field and error label, rather than it being spread across several table rows, which makes it hard to do anything useful with for mobile devices via media queries.

Example of current syntax, where elements are split across two table rows.

<table border="0" cellpadding="0" cellspacing="0">
     <tr>
         <td colspan="1" class="alignBottom minSize1">
              <span class="maxSize1" style="font-family:Arial; font-weight:normal; font-size:14px; color:#000000;">First Name<span class="requiredStar">*</span>
              </span>
         </td>
         <td colspan="1" class="alignBottom minSize1">
              <span class="maxSize1" style="font-family:Arial; font-weight:normal; font-size:14px; color:#000000;">Last Name<span class="requiredStar">*</span>
              </span>
         </td>
         <td rowspan="2" class="minSize1">�</td>
     </tr>
     <tr>
        <td colspan="1" class="alignTop minSize1">
         <div id="cont_id">
             <input leadField="firstname" contactField="firstname" class="maxSize1 width100per" type="text" id="f_19664897b061e31189d3005056b50017" name="" maxlength="50" style="font-family:Arial !important;" value="" />
                <div id="required_info_f" class="requiredInfo floatLeft"> </div>
              <input type="hidden" name="reqField" value="" alt="Text" req="true" errorMsg="Please enter a valid value." requredErrorMsg="This field is required. Please enter a value." patternID="0" customRegex="" />
          </div>
        </td>
        <td colspan="1" class="alignTop minSize1">
           <div id="cont_id_f">
              <input leadField="lastname" contactField="lastname" class="maxSize1 width100per" type="text" id="" maxlength="50" style="font-family:Arial !important;" value="" />
                <div id="required_info_f" class="requiredInfo floatLeft"></div>
                <input type="hidden" name="reqField" value="" alt="Text" req="true" errorMsg="Please enter a valid value." requredErrorMsg="This field is required. Please enter a value." patternID="0" customRegex="" />
              </div>
        </td>
    </tr>
</table>

�

Potential new structure with divs:

<div class="row-container" style="clear:both;">
    <div id="firstname_field" class="minSize1">
        <span class="maxSize1" style="font-family:Arial; font-weight:normal; font-size:14px; color:#000000;">First Name<span class="requiredStar">*</span>
        </span>
            <input leadField="firstname" contactField="firstname" class="maxSize1 width100per" type="text" id="" name="" maxlength="50" style="font-family:Arial !important;" value="" />
            <div id="required_info_f" class="requiredInfo floatLeft"> 
        </div>
    </div>
    
    <div id="lastname_field" class="minSize1">
        <span class="maxSize1" style="font-family:Arial; font-weight:normal; font-size:14px; color:#000000;">Last Name<span class="requiredStar">*</span>
        </span>
            <input leadField="lastname" contactField="lastname" class="maxSize1 width100per" type="text" id="" name="" maxlength="50" style="font-family:Arial !important;" value="" />
            <div id="required_info_f" class="requiredInfo floatLeft"> 
        </div>
    </div>
</div>

�

This is just a rough example, but hopefully it explains my idea. To replicate table cells, the divs can be floated so they appear on one line. In order to prevent divs getting wrapped around each other for multiple rows, the row container div will act as float clearer, so for a new row following, the content will be one its own new line.

Colspan and rowspan would then no longer be required, with the use of CSS widths applied on the containing row or div block containing form elements itself depending on the 1-3 variability of form elements per line.

Obviously a lot of default styling rules would be needed in cdform.min.css to create a default layout for less technical users who don't know HTML/CSS, but this would allow greater flexibility for more advanced users that use form builder forms.

�

I hope this idea does get considered sometime soon!