Tuesday’s Tip: Convert an Infusionsoft web form field to a text area

Sometimes a standard input field just isn’t big enough. We’ve written a snippet of JavaScript to let you change any field on your web form into a text area. To see this tip in action, check out our demo web form.

First you’ll need to know the field’s name. If you aren’t sure what the field’s name is, you can find out using your browser’s built-in tools. In Chrome or Firefox, right click on the field and choose Inspect Element. You’ll see a bunch of code, with one line highlighted. Look for something that looks like this: name=”inf_field_SomeField”. The field name is the part in quotes.

Next, change FIELD_NAME in the snippet below with the name of the field you want to change to a text area. Paste the snippet into an HTML Snippet on your web form and you are done!

<script type="text/javascript">// <![CDATA[
    var fieldName = 'FIELD_NAME';
    var textArea = document.createElement('textarea');
    $textArea = jQuery(textArea);
    $textArea.attr('name', fieldName);
    jQuery(document).ready(function(){
        var $originalField = jQuery('input[name=' + fieldName + ']');
        $textArea.val($originalField.val());
        $originalField.replaceWith($textArea);
    });
// ]]></script>

Have an idea for a tip? We love helping the community. If you have a problem let us know and we’ll try to solve it!

4 Comments

  1. I just used this tip for the first time and it worked great. Thanks!

    Reply
  2. How do I do two on the same form?

    Reply
    • Never mind. I figured out to rename the variables in the second instance of the script.

      Reply
  3. Thanks for this! When I add the script, my textbox defaults to two lines. How can I make it a 5-line box?

    Reply

Leave a Reply