PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Form Types? [type=email]

  1. Tim

    Hey I have another question...

    I figgured out that if i target some of the advanced fields like email etc.. with

    [type=email] it i can change the size etc...

    is there an overview over what th other types are? website, phone etc?? how do i target those?



    Posted 12 years ago on Tuesday July 5, 2011 | Permalink
  2. It depends on if you have HTML5 turned on in the Gravity Forms Settings page. These input types are only used in HTML5. You would target them the same way you target the email in your example above.

    Here are the HTML5 input types that Gravity Forms implements:

    Email Field

    Number Field

    Website Field

    Phone Field

    The majority of the fields simply use type=text because advanced HTML5 input types and form options are not supported by all major browsers.

    Posted 12 years ago on Tuesday July 5, 2011 | Permalink
  3. The different input types currently used in Gravity Forms are below.. You'll see these if you have the HTML5 output option enabled.


    body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=text] {border:1px solid red}


    body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=email] {border:1px solid red}


    body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=tel] {border:1px solid red}

    Website URL

    body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=url] {border:1px solid red}


    body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=number] {border:1px solid red}


    body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=password] {border:1px solid red}

    You may still want to target them specifically via inheritance from their parent item ID rather than applying the properties globally based on the shared class name. You can refer back to the samples in the documentation for more information.

    Posted 12 years ago on Tuesday July 5, 2011 | Permalink