creating a table

Hello @andreiikustov,

I’m not totally sure of your question, however, if you want format the form as a table with the fields distributed in columns, you can use container fields (DIV or Fieldset), selecting the number of columns through the “Columns” attribute, and finally, insert the other fields into the container. More details in the following link:

https://cff.dwbooster.com/faq#q66

Best regards.

created a table with such a code:

<table class=”table table-bordered expTable” border>
<thead>
<tr>
<th colspan=”2″>Dates Months/Year</th>
<th>Vessel Name/Flag</th>
<th>Year of built</th>
<th>Company Name/Crewing Agency</th>
<th>Vessel Type/DWT</th>
<th>Engine/HP</th>
<th>Rank</th>
<th>Reason of Discharge</th>
</tr>
</thead>
<tbody>
<tr>
<td>From</td>
<td><input type=”text” class=”form-control” name=”TFDate1″></td>
<td><input type=”text” class=”form-control” name=”TFVessel1″></td>
<td rowspan=”2″><input type=”text” class=”form-control” name=”TFBuilt1″></td>
<td><input type=”text” class=”form-control” name=”TFCompany1″></td>
<td><input type=”text” class=”form-control” name=”TFType1″></td>
<td><input type=”text” class=”form-control” name=”TFEngine1″></td>
<td rowspan=”2″><textarea rows=”3″ class=”form-control” name=”TFRank1″></textarea></td>
<td rowspan=”2″><textarea rows=”3″ class=”form-control” name=”TFReason1″></textarea></td>
</tr>
<tr>
<td>To</td>
<td><input type=”text” class=”form-control” name=”TTDate1″></td>
<td><input type=”text” class=”form-control” name=”TTVessel1″></td>
<td><input type=”text” class=”form-control” name=”TTCompany1″></td>
<td><input type=”text” class=”form-control” name=”TTType1″></td>
<td><input type=”text” class=”form-control” name=”TTEngine1″></td>
</tr>
<tr>
<td>From</td>
<td><input type=”text” class=”form-control” name=”TFDate2″></td>
<td><input type=”text” class=”form-control” name=”TFVessel2″></td>
<td rowspan=”2″><input type=”text” class=”form-control” name=”TFBuilt2″></td>
<td><input type=”text” class=”form-control” name=”TFCompany2″></td>
<td><input type=”text” class=”form-control” name=”TFType2″></td>
<td><input type=”text” class=”form-control” name=”TFEngine2″></td>
<td rowspan=”2″><textarea rows=”3″ class=”form-control” name=”TFRank2″></textarea></td>
<td rowspan=”2″><textarea rows=”3″ class=”form-control” name=”TFReason2″></textarea></td>
</tr>
<tr>
<td>To</td>
<td><input type=”text” class=”form-control” name=”TTDate2″></td>
<td><input type=”text” class=”form-control” name=”TTVessel2″></td>
<td><input type=”text” class=”form-control” name=”TTCompany2″></td>
<td><input type=”text” class=”form-control” name=”TTType2″></td>
<td><input type=”text” class=”form-control” name=”TTEngine2″></td>
</tr>
<tr>
<td>From</td>
<td><input type=”text” class=”form-control” name=”TFDate3″></td>
<td><input type=”text” class=”form-control” name=”TFVessel3″></td>
<td rowspan=”2″><input type=”text” class=”form-control” name=”TFBuilt3″></td>
<td><input type=”text” class=”form-control” name=”TFCompany3″></td>
<td><input type=”text” class=”form-control” name=”TFType3″></td>
<td><input type=”text” class=”form-control” name=”TFEngine3″></td>
<td rowspan=”2″><textarea rows=”3″ class=”form-control” name=”TFRank3″></textarea></td>
<td rowspan=”2″><textarea rows=”3″ class=”form-control” name=”TFReason3″></textarea></td>
</tr>
<tr>
<td>To</td>
<td><input type=”text” class=”form-control” name=”TTDate3″></td>
<td><input type=”text” class=”form-control” name=”TTVessel3″></td>
<td><input type=”text” class=”form-control” name=”TTCompany3″></td>
<td><input type=”text” class=”form-control” name=”TTType3″></td>
<td><input type=”text” class=”form-control” name=”TTEngine3″></td>
</tr>
<tr>
<td>From</td>
<td><input type=”text” class=”form-control” name=”TFDate4″></td>
<td><input type=”text” class=”form-control” name=”TFVessel4″></td>
<td rowspan=”2″><input type=”text” class=”form-control” name=”TFBuilt4″></td>
<td><input type=”text” class=”form-control” name=”TFCompany4″></td>
<td><input type=”text” class=”form-control” name=”TFType4″></td>
<td><input type=”text” class=”form-control” name=”TFEngine4″></td>
<td rowspan=”2″><textarea rows=”3″ class=”form-control” name=”TFRank4″></textarea></td>
<td rowspan=”2″><textarea rows=”3″ class=”form-control” name=”TFReason4″></textarea></td>
</tr>
<tr>
<td>To</td>
<td><input type=”text” class=”form-control” name=”TTDate4″></td>
<td><input type=”text” class=”form-control” name=”TTVessel4″></td>
<td><input type=”text” class=”form-control” name=”TTCompany4″></td>
<td><input type=”text” class=”form-control” name=”TTType4″></td>
<td><input type=”text” class=”form-control” name=”TTEngine4″></td>
</tr>
<tr>
<td>From</td>
<td><input type=”text” class=”form-control” name=”TFDate5″></td>
<td><input type=”text” class=”form-control” name=”TFVessel5″></td>
<td rowspan=”2″><input type=”text” class=”form-control” name=”TFBuilt5″></td>
<td><input type=”text” class=”form-control” name=”TFCompany5″></td>
<td><input type=”text” class=”form-control” name=”TFType5″></td>
<td><input type=”text” class=”form-control” name=”TFEngine5″></td>
<td rowspan=”2″><textarea rows=”3″ class=”form-control” name=”TFRank5″></textarea></td>
<td rowspan=”2″><textarea rows=”3″ class=”form-control” name=”TFReason5″></textarea></td>
</tr>
<tr>
<td>To</td>
<td><input type=”text” class=”form-control” name=”TTDate5″></td>
<td><input type=”text” class=”form-control” name=”TTVessel5″></td>
<td><input type=”text” class=”form-control” name=”TTCompany5″></td>
<td><input type=”text” class=”form-control” name=”TTType5″></td>
<td><input type=”text” class=”form-control” name=”TTEngine5″></td>
</tr>
</tbody>
</table>

inserted in the Field Type: HTML content. Cells are active, but size “small” – how to make even less? (the table does not fit on the screen).

How to prescribe that the entire table be sent in a letter with the data entered?

Thank you in advance. The answer with the use of the container did not help – it is not possible to make such a view of the table

Hello,

I really, don’t understand the reasons why you are inserting the fields in that way because you won’t be using the advantages of our plugin, and you won’t be using the styles of the plugin. An alternative would be enter the style definition below through the “Customize Form Design” attribute in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png)

.expTable input{width:100%;}

But as I said above, this question is not specific to our plugin.

Best regards.

all good, but how to send the whole table with data and empty fields in a letter????

Hello @andreiikustov,

That is exactly what I meant when I said that you are not using the advantages of the plugin if include your own HTML structure of fields, instead of using the plugin’s controls, because our plugin know the controls inserted in the forms and it is waiting them.

Furthermore, depending on the version of the plugin installed on your website it includes the server side modules or not.

For example, the Professional version of the plugin includes the following features:

– Store the submitted data in the website’s database.
– Send notification emails (where you can includes a summary with the data collected by the form)
– Allows the integration with PayPal as payment gateway (the Platinum version of the plugin includes other payment gateways as add-ons, the complete list of features is available in the following link: https://cff.dwbooster.com/download#comparison)
– Include a submit button is as simple as select the “Yes” option for the attribute: “Display submit button?” in the form’s settings.

Does it means you cannot insert a submit button in the forms created with the free version of the plugin?

Not exactly, insert a submit button in the free version of the plugin is as simple as insert a button field in the form, and enter as its onclick event the piece of code:

jQuery(this).closest('form').submit();

Or inserting a “HTML Content” field with the following tag as its content:

<input type="submit" value="Send form" />

However, with the free version of the plugin the server side operations must be implemented by yourself.

Best regards.

i have Professional. How in it to write ??

Hello,

The simpler alternative to include this table in the notification emails, would be read the table and assign it to a control in the form, and would be this form field who is included in the notification emails.

For example, insert a hidden field in the form, I will assume it is the fieldname123 (you should use in your code the corresponding field’s name), and then, insert a “HTML Content” field in the form, and enter the following piece of code as its content:

<script>
jQuery(document).on('change', '.expTable input,.expTable textarea', function(){
var str = '';
var $ = jQuery;
str+='<table class="table table-bordered expTable" border>';
str+='<thead>';
str+='<tr>';
str+='<th colspan="2">Dates Months/Year</th>';
str+='<th>Vessel Name/Flag</th>';
str+='<th>Year of built</th>';
str+='<th>Company Name/Crewing Agency</th>';
str+='<th>Vessel Type/DWT</th>';
str+='<th>Engine/HP</th>';
str+='<th>Rank</th>';
str+='<th>Reason of Discharge</th>';
str+='</tr>';
str+='</thead>';
str+='<tbody>';
str+='<tr>';
str+='<td>From</td>';
str+='<td>'+$('[name="TFDate1"]').val()+'</td>';
str+='<td>'+$('[name="TFVessel1"]').val()+'</td>';
str+='<td rowspan="2">'+$('[name="TFBuilt1"]').val()+'</td>';
str+='<td>'+$('[name="TFCompany1"]').val()+'</td>';
str+='<td>'+$('[name="TFType1"]').val()+'</td>';
str+='<td>'+$('[name="TFEngine1"]').val()+'</td>';
str+='<td rowspan="2">'+$('[name="TFRank1"]').val()+'</td>';
str+='<td rowspan="2">'+$('[name="TFReason1"]').val()+'</td>';
str+='</tr>';
str+='<tr>';
str+='<td>To</td>';
str+='<td>'+$('[name="TTDate1"]').val()+'</td>';
str+='<td>'+$('[name="TTVessel1"]').val()+'</td>';
str+='<td>'+$('[name="TTCompany1"]').val()+'</td>';
str+='<td>'+$('[name="TTType1"]').val()+'</td>';
str+='<td>'+$('[name="TTEngine1"]').val()+'</td>';
str+='</tr>';
str+='<tr>';
str+='<td>From</td>';
str+='<td>'+$('[name="TFDate2"]').val()+'</td>';
str+='<td>'+$('[name="TFVessel2"]').val()+'</td>';
str+='<td rowspan="2">'+$('[name="TFBuilt2"]').val()+'</td>';
str+='<td>'+$('[name="TFCompany2"]').val()+'</td>';
str+='<td>'+$('[name="TFType2"]').val()+'</td>';
str+='<td>'+$('[name="TFEngine2"]').val()+'</td>';
str+='<td rowspan="2">'+$('[name="TFRank2"]').val()+'</td>';
str+='<td rowspan="2">'+$('[name="TFReason2"]').val()+'</td>';
str+='</tr>';
str+='<tr>';
str+='<td>To</td>';
str+='<td>'+$('[name="TTDate2"]').val()+'</td>';
str+='<td>'+$('[name="TTVessel2"]').val()+'</td>';
str+='<td>'+$('[name="TTCompany2"]').val()+'</td>';
str+='<td>'+$('[name="TTType2"]').val()+'</td>';
str+='<td>'+$('[name="TTEngine2"]').val()+'</td>';
str+='</tr>';
str+='<tr>';
str+='<td>From</td>';
str+='<td>'+$('[name="TFDate3"]').val()+'</td>';
str+='<td>'+$('[name="TFVessel3"]').val()+'</td>';
str+='<td rowspan="2">'+$('[name="TFBuilt3"]').val()+'</td>';
str+='<td>'+$('[name="TFCompany3"]').val()+'</td>';
str+='<td>'+$('[name="TFType3"]').val()+'</td>';
str+='<td>'+$('[name="TFEngine3"]').val()+'</td>';
str+='<td rowspan="2">'+$('[name="TFRank3"]').val()+'</td>';
str+='<td rowspan="2">'+$('[name="TFReason3"]').val()+'</td>';
str+='</tr>';
str+='<tr>';
str+='<td>To</td>';
str+='<td>'+$('[name="TTDate3"]').val()+'</td>';
str+='<td>'+$('[name="TTVessel3"]').val()+'</td>';
str+='<td>'+$('[name="TTCompany3"]').val()+'</td>';
str+='<td>'+$('[name="TTType3"]').val()+'</td>';
str+='<td>'+$('[name="TTEngine3"]').val()+'</td>';
str+='</tr>';
str+='<tr>';
str+='<td>From</td>';
str+='<td>'+$('[name="TFDate4"]').val()+'</td>';
str+='<td>'+$('[name="TFVessel4"]').val()+'</td>';
str+='<td rowspan="2">'+$('[name="TFBuilt4"]').val()+'</td>';
str+='<td>'+$('[name="TFCompany4"]').val()+'</td>';
str+='<td>'+$('[name="TFType4"]').val()+'</td>';
str+='<td>'+$('[name="TFEngine4"]').val()+'</td>';
str+='<td rowspan="2">'+$('[name="TFRank4"]').val()+'</td>';
str+='<td rowspan="2">'+$('[name="TFReason4"]').val()+'</td>';
str+='</tr>';
str+='<tr>';
str+='<td>To</td>';
str+='<td>'+$('[name="TTDate4"]').val()+'</td>';
str+='<td>'+$('[name="TTVessel4"]').val()+'</td>';
str+='<td>'+$('[name="TTCompany4"]').val()+'</td>';
str+='<td>'+$('[name="TTType4"]').val()+'</td>';
str+='<td>'+$('[name="TTEngine4"]').val()+'</td>';
str+='</tr>';
str+='<tr>';
str+='<td>From</td>';
str+='<td>'+$('[name="TFDate5"]').val()+'</td>';
str+='<td>'+$('[name="TFVessel5"]').val()+'</td>';
str+='<td rowspan="2">'+$('[name="TFBuilt5"]').val()+'</td>';
str+='<td>'+$('[name="TFCompany5"]').val()+'</td>';
str+='<td>'+$('[name="TFType5"]').val()+'</td>';
str+='<td>'+$('[name="TFEngine5"]').val()+'</td>';
str+='<td rowspan="2">'+$('[name="TFRank5"]').val()+'</td>';
str+='<td rowspan="2">'+$('[name="TFReason5"]').val()+'</td>';
str+='</tr>';
str+='<tr>';
str+='<td>To</td>';
str+='<td>'+$('[name="TTDate5"]').val()+'</td>';
str+='<td>'+$('[name="TTVessel5"]').val()+'</td>';
str+='<td>'+$('[name="TTCompany5"]').val()+'</td>';
str+='<td>'+$('[name="TTType5"]').val()+'</td>';
str+='<td>'+$('[name="TTEngine5"]').val()+'</td>';
str+='</tr>';
str+='</tbody>';
str+='</table>';
$('[id*="fieldname123_"]').val(str);
});
</script>

and that’s all.
The fieldname123 field would be included in the notification emails with the table and the values of fields into the table.

Best regards.

ok. but in mail i see html code table.
in “HTML Content” field i have code:
<table class=”expTable” >
<tr>
<th colspan=”2″>Dates Months/Year</th>
<th>Vessel Name/Flag</th>
<th>Year of built</th>
<th>Company Name/Crewing Agency</th>
<th>Vessel Type/DWT</th>
<th>Engine/HP</th>
<th>Rank</th>
<th>Reason of Discharge</th>
</tr>
</thead>
<tbody>
<tr>
<td>From</td>
<td ><center><input type=”text” class=”form-control” name=”TFDate1″></td>
<td><center><input type=”text” class=”form-control” name=”TFVessel1″></td>
<td rowspan=”2″><center><input type=”text” class=”form-control” name=”TFBuilt1″></td>
<td><center><input type=”text” class=”form-control” name=”TFCompany1″></td>
<td><center><input type=”text” class=”form-control” name=”TFType1″></td>
<td><center><input type=”text” class=”form-control” name=”TFEngine1″></td>
<td rowspan=”2″><center><textarea rows=”3″ class=”form-control” name=”TFRank1″></textarea></td>
<td rowspan=”2″><center><textarea rows=”3″ class=”form-control” name=”TFReason1″></textarea></td>
</tr>
<tr>
<td>To</td>
<td><center><input type=”text” class=”form-control” name=”TTDate1″></td>
<td><center><input type=”text” class=”form-control” name=”TTVessel1″></td>
<td><center><input type=”text” class=”form-control” name=”TTCompany1″></td>
<td><center><input type=”text” class=”form-control” name=”TTType1″></td>
<td><center><input type=”text” class=”form-control” name=”TTEngine1″></td>
</tr>
<tr>
<td>From</td>
<td><center><input type=”text” class=”form-control” name=”TFDate2″></td>
<td><center><input type=”text” class=”form-control” name=”TFVessel2″></td>
<td rowspan=”2″><center><input type=”text” class=”form-control” name=”TFBuilt2″></td>
<td><center><input type=”text” class=”form-control” name=”TFCompany2″></td>
<td><center><input type=”text” class=”form-control” name=”TFType2″></td>
<td><center><input type=”text” class=”form-control” name=”TFEngine2″></td>
<td rowspan=”2″><center><textarea rows=”3″ class=”form-control” name=”TFRank2″></textarea></td>
<td rowspan=”2″><center><textarea rows=”3″ class=”form-control” name=”TFReason2″></textarea></td>
</tr>
<tr>
<td>To</td>
<td><center><input type=”text” class=”form-control” name=”TTDate2″></td>
<td><center><input type=”text” class=”form-control” name=”TTVessel2″></td>
<td><center><input type=”text” class=”form-control” name=”TTCompany2″></td>
<td><center><input type=”text” class=”form-control” name=”TTType2″></td>
<td><center><input type=”text” class=”form-control” name=”TTEngine2″></td>
</tr>
<tr>
<td>From</td>
<td><center><input type=”text” class=”form-control” name=”TFDate3″></td>
<td><center><input type=”text” class=”form-control” name=”TFVessel3″></td>
<td rowspan=”2″><center><input type=”text” class=”form-control” name=”TFBuilt3″></td>
<td><center><input type=”text” class=”form-control” name=”TFCompany3″></td>
<td><center><input type=”text” class=”form-control” name=”TFType3″></td>
<td><center><input type=”text” class=”form-control” name=”TFEngine3″></td>
<td rowspan=”2″><center><textarea rows=”3″ class=”form-control” name=”TFRank3″></textarea></td>
<td rowspan=”2″><center><textarea rows=”3″ class=”form-control” name=”TFReason3″></textarea></td>
</tr>
<tr>
<td>To</td>
<td><center><input type=”text” class=”form-control” name=”TTDate3″></td>
<td><center><input type=”text” class=”form-control” name=”TTVessel3″></td>
<td><center><input type=”text” class=”form-control” name=”TTCompany3″></td>
<td><center><input type=”text” class=”form-control” name=”TTType3″></td>
<td><center><input type=”text” class=”form-control” name=”TTEngine3″></td>
</tr>
<tr>
<td>From</td>
<td><center><input type=”text” class=”form-control” name=”TFDate4″></td>
<td><center><input type=”text” class=”form-control” name=”TFVessel4″></td>
<td rowspan=”2″><center><input type=”text” class=”form-control” name=”TFBuilt4″></td>
<td><center><input type=”text” class=”form-control” name=”TFCompany4″></td>
<td><center><input type=”text” class=”form-control” name=”TFType4″></td>
<td><center><input type=”text” class=”form-control” name=”TFEngine4″></td>
<td rowspan=”2″><center><textarea rows=”3″ class=”form-control” name=”TFRank4″></textarea></td>
<td rowspan=”2″><center><textarea rows=”3″ class=”form-control” name=”TFReason4″></textarea></td>
</tr>
<tr>
<td>To</td>
<td><center><input type=”text” class=”form-control” name=”TTDate4″></td>
<td><center><input type=”text” class=”form-control” name=”TTVessel4″></td>
<td><center><input type=”text” class=”form-control” name=”TTCompany4″></td>
<td><center><input type=”text” class=”form-control” name=”TTType4″></td>
<td><center><input type=”text” class=”form-control” name=”TTEngine4″></td>
</tr>
<tr>
<td>From</td>
<td><center><input type=”text” class=”form-control” name=”TFDate5″></td>
<td><center><input type=”text” class=”form-control” name=”TFVessel5″></td>
<td rowspan=”2″><center><input type=”text” class=”form-control” name=”TFBuilt5″></td>
<td><center><input type=”text” class=”form-control” name=”TFCompany5″></td>
<td><center><input type=”text” class=”form-control” name=”TFType5″></td>
<td><center><input type=”text” class=”form-control” name=”TFEngine5″></td>
<td rowspan=”2″><center><textarea rows=”3″ class=”form-control” name=”TFRank5″></textarea></td>
<td rowspan=”2″><center><textarea rows=”3″ class=”form-control” name=”TFReason5″></textarea></td>
</tr>
<tr>
<td>To</td>
<td><center><input type=”text” class=”form-control” name=”TTDate5″></td>
<td><center><input type=”text” class=”form-control” name=”TTVessel5″></td>
<td><center><input type=”text” class=”form-control” name=”TTCompany5″></td>
<td><center><input type=”text” class=”form-control” name=”TTType5″></td>
<td><center><input type=”text” class=”form-control” name=”TTEngine5″></td>
</tr>
<script>
jQuery(document).on(‘change’, ‘.expTable input,.expTable textarea’, function(){
var str = ”;
var $ = jQuery;
str+='<table class=”expTable” border>’;
str+='<thead>’;
str+='<tr>’;
str+='<th colspan=”2″>Dates Months/Year</th>’;
str+='<th>Vessel Name/Flag</th>’;
str+='<th>Year of built</th>’;
str+='<th>Company Name/Crewing Agency</th>’;
str+='<th>Vessel Type/DWT</th>’;
str+='<th>Engine/HP</th>’;
str+='<th>Rank</th>’;
str+='<th>Reason of Discharge</th>’;
str+='</tr>’;
str+='</thead>’;
str+='<tbody>’;
str+='<tr>’;
str+='<td>From</td>’;
str+='<td>’+$(‘[name=”TFDate1″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TFVessel1″]’).val()+'</td>’;
str+='<td rowspan=”2″>’+$(‘[name=”TFBuilt1″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TFCompany1″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TFType1″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TFEngine1″]’).val()+'</td>’;
str+='<td rowspan=”2″>’+$(‘[name=”TFRank1″]’).val()+'</td>’;
str+='<td rowspan=”2″>’+$(‘[name=”TFReason1″]’).val()+'</td>’;
str+='</tr>’;
str+='<tr>’;
str+='<td>To</td>’;
str+='<td>’+$(‘[name=”TTDate1″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TTVessel1″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TTCompany1″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TTType1″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TTEngine1″]’).val()+'</td>’;
str+='</tr>’;
str+='<tr>’;
str+='<td>From</td>’;
str+='<td>’+$(‘[name=”TFDate2″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TFVessel2″]’).val()+'</td>’;
str+='<td rowspan=”2″>’+$(‘[name=”TFBuilt2″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TFCompany2″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TFType2″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TFEngine2″]’).val()+'</td>’;
str+='<td rowspan=”2″>’+$(‘[name=”TFRank2″]’).val()+'</td>’;
str+='<td rowspan=”2″>’+$(‘[name=”TFReason2″]’).val()+'</td>’;
str+='</tr>’;
str+='<tr>’;
str+='<td>To</td>’;
str+='<td>’+$(‘[name=”TTDate2″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TTVessel2″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TTCompany2″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TTType2″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TTEngine2″]’).val()+'</td>’;
str+='</tr>’;
str+='<tr>’;
str+='<td>From</td>’;
str+='<td>’+$(‘[name=”TFDate3″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TFVessel3″]’).val()+'</td>’;
str+='<td rowspan=”2″>’+$(‘[name=”TFBuilt3″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TFCompany3″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TFType3″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TFEngine3″]’).val()+'</td>’;
str+='<td rowspan=”2″>’+$(‘[name=”TFRank3″]’).val()+'</td>’;
str+='<td rowspan=”2″>’+$(‘[name=”TFReason3″]’).val()+'</td>’;
str+='</tr>’;
str+='<tr>’;
str+='<td>To</td>’;
str+='<td>’+$(‘[name=”TTDate3″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TTVessel3″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TTCompany3″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TTType3″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TTEngine3″]’).val()+'</td>’;
str+='</tr>’;
str+='<tr>’;
str+='<td>From</td>’;
str+='<td>’+$(‘[name=”TFDate4″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TFVessel4″]’).val()+'</td>’;
str+='<td rowspan=”2″>’+$(‘[name=”TFBuilt4″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TFCompany4″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TFType4″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TFEngine4″]’).val()+'</td>’;
str+='<td rowspan=”2″>’+$(‘[name=”TFRank4″]’).val()+'</td>’;
str+='<td rowspan=”2″>’+$(‘[name=”TFReason4″]’).val()+'</td>’;
str+='</tr>’;
str+='<tr>’;
str+='<td>To</td>’;
str+='<td>’+$(‘[name=”TTDate4″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TTVessel4″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TTCompany4″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TTType4″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TTEngine4″]’).val()+'</td>’;
str+='</tr>’;
str+='<tr>’;
str+='<td>From</td>’;
str+='<td>’+$(‘[name=”TFDate5″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TFVessel5″]’).val()+'</td>’;
str+='<td rowspan=”2″>’+$(‘[name=”TFBuilt5″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TFCompany5″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TFType5″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TFEngine5″]’).val()+'</td>’;
str+='<td rowspan=”2″>’+$(‘[name=”TFRank5″]’).val()+'</td>’;
str+='<td rowspan=”2″>’+$(‘[name=”TFReason5″]’).val()+'</td>’;
str+='</tr>’;
str+='<tr>’;
str+='<td>To</td>’;
str+='<td>’+$(‘[name=”TTDate5″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TTVessel5″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TTCompany5″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TTType5″]’).val()+'</td>’;
str+='<td>’+$(‘[name=”TTEngine5″]’).val()+'</td>’;
str+='</tr>’;
str+='</tbody>’;
str+='</table>’;
$(‘[id*=”fieldname60_”]’).val(str);
});
</script>

and Css Layout Keywords for “HTML Content” expTable, because in “Customize Form Design” for me need #fbuilder .expTable input{width:75% !important;
}

Where is my mistake ?? thank you in advance

Hello @andreiikustov,

You simply should select the option: “HTML (use html in the textarea below)” for the attributes: “Email format?” in the form’s settings.

Best regards.

many thanks. Everything worked out. I have a form with 40 points to fill. the letter indicates everything, even those that the client does not fill. How to specify one condition for all – send, if it is completed?

Hello @andreiikustov,

You have these doubts or questions because you are not using the plugin’s controls.

For example, using the plugin controls if you want the user populate the form’s fields before it be submitted, you simply should tick the checkbox: “Required” in the fields’ settings.

And if you want the blank fields won’t be included in the notification emails, you simply should modify the special tag <%INFO%> in the notification emails to include the attribute: <%INFO if_not_empty%>

But, as you are inserted your own HTML tags, these features do not apply to your case, and you should solve these questions with your own code, I’m sorry.

Best regards.

Thank you very much.

Hello @andreiikustov,

By the way, if you want your fields be required, even if you have entered them with your own HTML tags, assign to them the special class name: required, as follows:

<input type="text" class="form-control required" name="TFDate1">

Best regards.

Thank you. but everything works also at <% INFO if_not_empty%>, since the whole table is passed through a hidden block and the adjustment in the letter does not affect it

Hello @andreiikustov,

If you need a custom coding service, you can contact me from my private website:

https://cff.dwbooster.com/customization

Best regards.