Hi @sewmagic
I hope you’re well today!
CSS will not help here but it can be done with a bit of additional PHP code.
Here is how to do this:
1. first, you will need to make sure that the name field already has prefixes enabled; you do this by editing the “name” field on the form and in its “Labels” section switching it from “single” to “multiple”; then in its “Settings” section you set which “parts” of the name you want to gather – make sure that “prefix” is enabled there.
2. then you need to add this code to the site:
https://gist.githubusercontent.com/wpmudev-sls/e8b9d1646bad1af0202ff3e793e69193/raw/2f894acc9820431ff03678ce360fa72c04e43049/wpmudev-forminator-custom-name-prefixes.php
a) access your site’s WordPress install via FTP, cPanel’s “File Manager” or similar way
b) go to “/wp-content/” folder and see if there already is a folder named “mu-plugins”; if not, create an empty one
c) enter “/wp-content/mu-plugins” folder
d) and create an empty file with a .php extension (e.g. “forminator-add-prefixes.php”)
e) copy code from above linked page and paste it into that file
f) now you’ll need to do a bit of configuration in the code
– in this line
private $form_id = 488;
replace number 488 with an ID of your form; form ID is the number you see in form’s shortcode
– and in these lines
private $prefixes = array(
'Parent' => 'Parent',
'Child' => 'Child',
'Grandchild' => 'Grandchild',
);
set your custom prefixes; just follow above example, I hope it’s pretty self-explanatory
– finally, in this line
private $append = true;
if you want your prefixes to be added to existing ones, leave it as is; if you want tor remove default prefixes entirely and use only your custom ones, change true to false.
g) and save the file.
That’s it, it should now work out of the box. Just note that you may need to clear all cache on site/server and reload the page a few times in browser to override browser cache.
I just tested this solution on my own setup and it works just fine.
Best regards,
Adam