Add CSS class to form

cracktojack
Shopify Partner
12 0 1

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

0 Likes
Abinav_Thakuri
Shopify Partner
30 0 1

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.

Graphic/Web Designer, Shopify Expert and WordPress Developer. http://athakuri.com
0 Likes
cracktojack
Shopify Partner
12 0 1

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
Shopify Partner
5 0 6

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
Shopify Partner
13 0 11

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

Connor Munro / agoodmachine.co
Jason
Shopify Expert
10037 119 1873

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

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

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Gray1
Shopify Expert
156 0 27

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

Developer for Pixel Union
0 Likes
Jason
Shopify Expert
10037 119 1873

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

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
iamkeir
Shopify Partner
194 0 29

Thanks @jason, that's super helpful!

http://iamkeir.com
0 Likes
marcnewport
Shopify Partner
6 0 2

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