Customize the output of inserted data

Continue:

I also suggest some UX for the back end.

The “INSERT FIELDS+” is at the button of the form fields, and it will be a hard experience when the form is long, since if we want to add a new field somewhere in the top, we should scroll the mouse for a long way to the bottom to add a new field.

I suggest in addition to that button “INSERT FIELDS+” in the bottom, you also provide the same button somewhere in the sidebar menu of Forminator, or in the top menu bar of Forminator somewhere between “UPDATE” …”Status” or floating.

Thanks.

• This reply was modified 2 years, 4 months ago by s.
• This reply was modified 2 years, 4 months ago by s.
• This reply was modified 2 years, 4 months ago by s.

Hi @sdnazdi

I hope you are doing good today.

I already asked if it is possible to have a formatted output (not as a simple text as it is now) when a copy of submitted form is sent to admin and client.

We have already improvement task for this and we should see this in future updates. There is no ETA at this point.

==============

I like to know if it is possible to customize the color of inserted data in the fields/text area as well as selected checkbox/radio option etc. when a copy of submitted form is sent to the admin and client.

In Email Notification edit mode in text mode you can for example use such thing:

<p style="color:red;">{textarea-1}</p>
<p style="color:yellow;">{text-1}</p>
<p style="color:blue;">{select-1}</p>
<p style="color:pink;">{radio-1}</p>
<p style="color:green;">{checkbox-1}</p>

and font color will be applied to that correct field.

==============

to add an option for preview a form before submit.

This is already possible :
– create your form with pagination
– on second page insert HTML fields
– in each HTML field use “ADD FORM DATA” icon and choose each field

In short, step #2 will be a preview mode.

==============

to add a circle like with “?” or “!” inside it to popup/show when hover on it to display hint about that field at the end label of the field.

We have already improvement task for this and we should see this in future updates. There is no ETA at this point. For now, you can use this walkaround which gives the possibility of displaying the descriptions of the fields as tooltips.
Please download the zip from https://gist.github.com/wpmudev-sls/9785a414467ee079ff1434d7bc8b6680 , extract it, and upload the wpmudev-forminator-field-descriptions-tooltips.php file to your site’s wp-content/mu-plugins folder. If that folder doesn’t exist you can simply create it like this https://premium.wpmudev.org/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins

We recommend testing this on the dev/staging version first before putting it on the live site.

==============

I suggest in addition to that button “INSERT FIELDS+” in the bottom, you also provide the same button somewhere in the sidebar menu of Forminator, or in the top menu bar of Forminator somewhere between “UPDATE” …”Status” or floating.

Sounds very useful, I will make sure we will have this on improvement list.

Kind Regards,
Kris

@wpmudevsupport13 , Thanks for your detailed reply.

• This reply was modified 2 years, 4 months ago by s.

Hi,
For my question below,

Q: to add an option for preview a form before submit.

you gave the respective answer:

A:
This is already possible :
– create your form with pagination
– on second page insert HTML fields
– in each HTML field use “ADD FORM DATA” icon and choose each field

I like to add a print button at the bottom of that HTML page of preview.

I used the following code:

<button onclick="window.print()">Print this page</button>

however it does not work. Do you have any suggestion?
Thanks.

Hi @sdnazdi

Thanks for response!

It’s doable but in a slightly different way:

1. On the second page of the form (where you already have those HTML fields for summary/preview) add yet another HTML field

– put eg. “PRINT THIS PAGE” in field content
– put this in “Additional CSS Classes” field in “Styling” tab:

form_print_button

2. then add this code to the site as MU plugin:

<?php 

add_action( 'wp_footer', 'forminator_print_form_page');
function forminator_print_form_page() {
	
	?>
	<script>
	jQuery(function($) {
		
		$('.form_print_button').click(function() {
			window.print();
		});
		
	});
	</script>
	<?php 
	
}

To add code as MU plugin:
– create an empty file with a .php extension (e.g. “forminator-print-form-page”)
– copy and paste code into it
– save the file and upload it to the “/wp-content/mu-plugins” folder of your site’s WordPress installation.

I’ve tested it on my own site and it works fine.

Note: as an alternative to adding MU plugin, you can instead use any plugin that allows you to add JS snippet to the site and place it in page footer; then you would just need to add this code as such snippet:

jQuery(function($) {
		
		$('.form_print_button').click(function() {
			window.print();
		});
		
	});

Best regards,
Adam

Hello @sdnazdi ,

We haven’t heard from you for a while now, so it looks like you don’t need our assistance anymore.

Feel free to re-open this ticket if needed.

Kind regards
Kasia