Add CSS class to form

[cracktojack]

In the customer login template I can see

{% form 'customer_login' %}

How to attach custom css class to this form? I searched through entire wiki but couldn't find the way to do it.

Please help

[Abinav_Thakuri]

You can view source when you're in the login page or it would be easy if you use a tool like Firebug.

You should get something similar to this:

<form id="customer_login" action="https://yourshop.myshopify.com/account/login" method="post">
      

      <div class="clearfix form-row" id="login_email">
        <label class="login" for="customer_email">Email Address</label>
        <input type="email" size="30" class="large" id="customer_email" name="customer[email]" value="">
      </div>

      
        <div class="clearfix form-row" id="login_password">
          <label class="login" for="customer_password">Password</label>
          <input type="password" size="16" class="large password" id="customer_password" name="customer[password]" value="">
          <div id="forgot_password">
            <a onclick="showRecoverPasswordForm()" href="#">Forgot your password?</a>
          </div>
        </div>
      

      <div class="action-bottom">
        <input type="submit" value="Sign In" class="btn">
        <span class="note">or <a href="http://yourshop.myshopify.com"&gt;Return to Store</a></span>
      </div>
    </form>

You can select these ids and classes with css and style the form easily.

Hope this helps.

[cracktojack]

Thanks for your help Abinav.

But i was wondering if we can use some kind of filter like {% form 'customer_login' | style='xxx' %}

I am using boilerplate CSS to style the form elements.

To style each and every shopify form element individually, I will have to change boilerplate. And whenever there will be version upgrade, I'll have to make sure to change these too...

I hope there is an easy way to add style. Else this is the only way I think.

[Spencer_Bean]

Old thread, I know, but it still comes up high in search rankings so I thought I'd put in my two cents.

While I don't think there's a way to do this through the template tag syntax (yet), you could try getting around it with some jQuery:

$( "form" ).addClass( "myFormClass" );

This would add the 'myFormClass' class to any form elements on a page. If you needed to apply a different class to different types of forms, then you could use the ID of the form as the selector instead of the form tag selector shown above.

Still not an ideal solution (might run into some weird visuals before the class is applied to the form and styles settle), but a potential workaround until support for adding classes through the template tag syntax arrives (if ever).

[Connor_Munro]

If anybody stumbles across this in the future, there is a way to add a class to a liquid form element, though it's not documented within the Shopify docs for whatever reason (I suppose this might mean that it is unsupported)... anyhow:

{% form 'customer_login', class: 'custom-class' %}

Wahoo!

Edit: There is a line in the docs for Timber stating that you cannot add a class to most liquid form elements: http://shopify.github.io/Timber/#forms

[Jason]

What will blow your mind is if you do something like this:

{% form 'contact', class:'foo', action:'more-foo', data-type:'super-foo' %}

[Gray1]

@Jason – where do you see it in the docs? I can't find it.

[Jason]

Not in docs, but the comma usage is. I update my post above to include more fun.

[iamkeir]

Thanks @jason, that's super helpful!

[marcnewport]

Has this been removed now? A site I'm working on uses this syntax, but suddenly today it doesn't print out the class anymore