New to the community? Start here

Forminator select field customization

Whenever a user visits the page maybe like:

https://xxxxxx.com/sample-form/?urlparameter=ask-for-quote

Depending on the URL parameter, the select field should be automatically filled.

Fri, 12 Jul 2019 10:40:42

Dimitris

Support Star

2,154 pts: Hero points 10,621 pts: Rep. points LEVEL 28

Hello there Lemonade

I created a little MU plugin that you could use for this case. In order to use it, please create a new PHP file like wp-content/mu-plugins/forminator-urlparam.php (just create the /mu-plugins/ folder, if it doesn’t exist already) and insert in there the exact following snippet:

<?php

/**

* Populate select field in a forminator form from a url param.

*

* ?urlparameter=one

*

* urlparameter

*/



if ( ! function_exists( 'populate_urlparameter_fields' ) ) {



add_action(

'forminator_after_form_render',

function( $id, $form_type, $post_id, $form_fields, $form_settings ) {

// Change the number 1811 with your Form ID.

if ( 1811 === $id ) {

add_action( 'wp_footer', 'populate_urlparameter_fields', 999 );

}

},

15,

5

);



function populate_urlparameter_fields() {



$urlparameter   = ( isset( $_GET['urlparameter'] ) ) ? sanitize_text_field( $_GET['urlparameter'] ) : '';



?>

<script>

( function( $ ) {

$( document ).ready( function() {

// Adjust the Select value depending on the urlparameter value.

$( '.myclass .forminator-select').attr( 'data-default-value', '<?php echo $urlparameter; ?>' );

$( '.myclass .forminator-select > option').removeAttr( 'selected' );

$( '.myclass .forminator-select option[value="<?php echo $urlparameter; ?>"]').attr( 'selected', 'selected' );

} );

} ( jQuery ) )

</script>

<?php

}

}

There are a couple of values that you should change though and these are:

// Change the number 1811 with your Form ID

if ( 1811 === $id ) {

that can be found while editing the form, please check the following screenshot from my test site:

2. myclass is a custom class added to the Select field

In the first screenshot, you can also see the values of the options that I set for my test. Visiting the following URLs was resulting to auto-change the select field:

mydomain.com/form/

mydomain.com/form/?urlparameter=none

mydomain.com/form/?urlparameter=one

mydomain.com/form/?urlparameter=two

Warm regards,

Dimitris :slight_smile:

Lemonade
- Design Lord, Child of Thor
- 103 pts: Hero points 93 pts: Rep. points LEVEL 3
Great, thanks.

It does work perfectly :slight_smile:…
Lemonade
- Design Lord, Child of Thor
- 103 pts: Hero points 93 pts: Rep. points LEVEL 3
We have a question,

Can we change the URL or customize it to like:

https://hwacheonasia.com/sample-form/?toe=ask-for-quote

instead of https://hwacheonasia.com/sample-form/?urlparameter=ask-for-quote

change the ” ?urlparameter= ” to ” ?toe= “

Thanks!

Nahid

Tech Support

601 pts: Hero points 4,131 pts: Rep. points LEVEL 20

Hey there Lemonade !

Hope you are doing well today!

Here’s the version of the code snippet sent by my colleague Dimitris is his previous response, with the only exception of “?urlparameter=” replaced with “?toe=”:

<?php

/**

* Populate select field in a forminator form from a url param.

*

* ?toe=one

*

* toe

*/



if ( ! function_exists( 'populate_urlparameter_fields' ) ) {



add_action(

'forminator_after_form_render',

function( $id, $form_type, $post_id, $form_fields, $form_settings ) {

// Change the number 1811 with your Form ID.

if ( 143 === $id ) {

add_action( 'wp_footer', 'populate_urlparameter_fields', 999 );

}

},

15,

5

);



function populate_urlparameter_fields() {



$toe   = ( isset( $_GET['toe'] ) ) ? sanitize_text_field( $_GET['toe'] ) : '';



?>

<script>

( function( $ ) {

$( document ).ready( function() {

// Adjust the Select value depending on the urlparameter value.

$( '.myclass .forminator-select').attr( 'data-default-value', '<?php echo $toe; ?>' );

$( '.myclass .forminator-select > option').removeAttr( 'selected' );

$( '.myclass .forminator-select option[value="<?php echo $toe; ?>"]').attr( 'selected', 'selected' );

} );

} ( jQuery ) )

</script>

<?php

}

}

Hope this helps. Please let us know if this works for you. Thanks!

Kind regards,

Nahid

Lemonade
- Design Lord, Child of Thor
- 103 pts: Hero points 93 pts: Rep. points LEVEL 3
Thank you!

That works perfectly :slight_smile:

Forminator select field customization

Learn more

In The WordPress

Resources

Blog

Learn more

How do you rate me?

Thank you for rating your experience!