Change forminator form fields IDs

I have a question. I thought that would be a fundamental feature but cant find it anywhere. Can I assig custom ID's to my forminator form fields?

I'm trying to post field values via url strings to a forminator form but I cant change the target ID and my source form (the form Im posting from) does not allow - symbol in form IDs

  • Predrag Dubajic

    Hi Umut,

    Thanks for your suggestion, we have added this to our features and feedback section so our devs can consider adding this in future releases.
    In the meantime, perhaps using some jQuert to replace hyphen with underscore would do the trick for you?
    You should be able to do that with this code:

    (function ($) {
    	$(document).ready(function () {
    		// Get forminator input field
    		let $input = $('.forminator-input');
    		// Grab the value of the ID
    		let inputId = $input.attr('id');
    		// replace the - to _
    		inputId = inputId.replace(/-/g, '_');
    		// put back in
    		$input.attr('id', inputId);
    	})
    })(jQuery);

    Let us know if that does the trick for you.

    Note that Forminator does allow setting up a custom class to elements from the advanced tab, I'm guessing that you tried this already but you need to use ID in your case?

    Best regards,
    Predrag

  • Tony G

    Predrag Dubajic - I believe your code would change the ID in the form, and yes, allow a query string to populate that new version of the form. But on submit the new IDs will go to the server which won't know what to do with the new "underscore" IDs.

    So to add on to your suggestion, either a JS onSubmit function is required to change the IDs back, or in the server, there needs to be code that changes all inbound underscore IDs to dash before further processing.

    BTW, I believe I already made this suggestion at some point. The positional nature of the IDs (text-1, email-2, etc) breaks code if things get moved around. But a named ID, like "teacher_name" or "sales_email_address", won't break once it's set in the form definition.

  • Josh Yoltay

    Hi

    My problem is I'm trying to post a form data from a landing page to my forminator form so users can complete their information without having to re enter the already entered LP data (3 fields + hidden ones for tracking etc.)

    The LP software lets me only use underscores as non letter characters and Formintor doesn't let me change the IDs.

    BTW even if I enter the url strings by hand to match forminators name or id value, somehow the post method doesn't work. I can"t understand why could you maybe take a look for me to see if its something simple I'm missing?

    http://www.marylandgranite.com/free-estimate-special

    When I try this' it doesnt work:
    http://www.marylandgranite.com/free-estimate-special?name-1=TESTVALUE

    When I try this it gives a 404
    http://www.marylandgranite.com/free-estimate-special?name=TESTVALUE

  • Panos

    Hey there Umut Acar ,

    It would be better not to use wp reserved query vars for this. Here are the reserved ones : https://codex.wordpress.org/WordPress_Query_Vars
    Depending on plugins/theme you use, there might be other's that are used in their rewrite rules.

    Of what I understand you need to pre-fill some input fields of your form. There are a few ways to do it but they all require some js.

    Here is an example:
    1. Set some custom class for those fields from form edit page in Forminator.
    From the field controls, click on Advanced and insert a custom class name as in the following screenshot:

    I added the custom class "the-name-field" for my "Name" field

    2. Decide the query var that will be used in the query string. In my example I'll use _name

    3. Now we can add some js that will get the value of the _name query var and insert it into the the-name-field field

    You can use a js function that will sniff the query string:

    var get_query_var = function get_url_vars( query_var ) {
    			    var page_url = decodeURIComponent(window.location.search.substring(1)),
    			        url_vars = page_url.split('&'),
    			        param_name,
    			        i;
    
    			    for (i = 0; i < url_vars.length; i++) {
    			        param_name = url_vars[i].split('=');
    
    			        if (param_name[0] === query_var) {
    			            return param_name[1] === undefined ? true : param_name[1];
    			        }
    			    }
    			};

    Then you can use it to get the value into the field with the custom class:

    $('.the-name-field input').val( get_query_var('_name') );

    You can insert this script in a mu-plugin, or you can add it in an html field of your Forminator form. The whole snippet would look like:

    <script type="text/javascript">
    		(function(d,$){
    
    			var get_query_var = function get_url_vars( query_var ) {
    			    var page_url = decodeURIComponent(window.location.search.substring(1)),
    			        url_vars = page_url.split('&'),
    			        param_name,
    			        i;
    
    			    for (i = 0; i < url_vars.length; i++) {
    			        param_name = url_vars[i].split('=');
    
    			        if (param_name[0] === query_var) {
    			            return param_name[1] === undefined ? true : param_name[1];
    			        }
    			    }
    			};
    
    			$(d).ready(function(){
    				$('.the-name-field input').val( get_query_var('_name') );
    			});
    		})(document,jQuery);
    	</script>

    Hope this helps :slight_smile: Please let me know if there is some part that is not clear.

    Kind regards!

  • Tony G

    My problem is I'm trying to post a form data from a landing page to my forminator form so users can complete their information without having to re enter the already entered LP data (3 fields + hidden ones for tracking etc.)

    Umut Acar : Are you using Forminator on the Landing Page? If so, then the data doesn't need to be transferred in the URL. When the Entry is submitted on the LP, it's stored, so your second form just needs to retrieve the values from that first form.

    My plugin allows you to set the default for a field based on values in another form entry (including the last entry by a user for a specified form. No code is required. This is done with shortcodes in the form definition. This will be available this week.

    As I think about this, the user may need to be logged in for that to work (for now anyway). The second form needs to be able to find the entry from the LP, and with a logged-in user we have the user ID. However, we can also use the last entry for a specified IP address, and it's unlikely that anyone else will submit a form with the same IP address, in the time it takes for the current user to move from the LP to the second form.

    Am I missing anything?

  • Josh Yoltay

    Hi,

    The script above actually did the trick for now.

    The sitation was:

    I have a landingpage with a third party (unbounce.com). That software does not allow " - " character in the id or name fields.

    Second step is on a wordpress site with a forminator Form. Forminator generates all ID's with " - " character.

    But with the help of above script I mapped them together.

    THe issue wa It did not work at first but after I downgraded to 1.0.6 this and a few other issues are fixed. I sent other issues to the support team in under a ticket.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.