Form fields random ID (few same forms on the page)

  • Hi!

    Thank you for this awesome plugin that everyone is using.
    I’ve got a question about dynamic ID for input fields.

    The thing is I have a form template with <labels> inside for Floating labels effect (Example: https://css-tricks.com/float-labels-css/). So a have such template:

    <div class="form-group">
	<label for="first-name">Your first name</label>[text firstname class:field id:firstname placeholder "First name"]
</div>

    It working nice, BUT if there is only one form on the page. If I add one more – each label leads to first element with ID name which is set in for parameter.

    So all labels from second form lead to the first one. I was trying to find a solution and I couldn’t think of anything better than generate random ID and FOR

    How can I achieve that? Maybe some form template hook? Maybe some shortcode or parameter?

    Thanks.

    • This topic was modified 5 years, 2 months ago by Nikita_Sp.
Viewing 1 replies (of 1 total)
  • Thread Starter Nikita_Sp

    (@nikitasp)

    I can also generate random input ID and label FOR with JS, but it’s not good for robots and validation (or users without JS).

    For example:

    $('.form-group').each(function(){
    var $label = $(this).find('label'),
        $input = $(this).find('input'),
        random = Math.random();
    
    $label.attr('for', $label.attr('for') + random);
    $input.attr('id', $input.attr('id') + random);
  });

    Any ideas will appreciate.

Viewing 1 replies (of 1 total)
  • The topic ‘Form fields random ID (few same forms on the page)’ is closed to new replies.