Style fields (and metadata) to only capitalize the first word

Hi,

I have a newsletter sign-up block on my homepage. I'm collecting first name and email address. I would like to only capitalize the first word, but not the second ("First name," not "First Name;" "Email address," not "Email Address"). Is that possible?

A related question — On my blog, I display the date and author at the top. The author field says "Written By" with the word "By" capitalised. I'd like to change that into small letters to, so that it says, "Written by."

Password: 2eRFn7gQ

Many thanks!

Hi,

What is site url?

45 minutes ago, tuanphan said:

Hi,

What is site url?

https://www.kristinkuehn.com/

1 hour ago, tuanphan said:

Ah got it, understand why it won't work on homepage, you try adding this line to top of Code Injection > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

 

Thanks so much! Would you mind explaining what the issue was if you can?

I have a similar situation on my contact form. Are you able to help me with that as well? I'd like "First name" and "Last name" to appear with only the first word capitalized.

@tuanphan Can you help me with changing the format of the author metadata in the blog posts from "Written By" to "Written by" where "by" is not capitalized?

46 minutes ago, Aurora said:

@tuanphan Can you help me with changing the format of the author metadata in the blog posts from "Written By" to "Written by" where "by" is not capitalized?

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

.blog-item-wrapper {
  .blog-meta-item--author {
    text-transform: lowercase !important;
  }
  .blog-meta-item--author::first-letter {
    text-transform: uppercase !important;
  }
}

1 hour ago, Web_Solutions said:

 

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

.blog-item-wrapper {
  .blog-meta-item--author {
    text-transform: lowercase !important;
  }
  .blog-meta-item--author::first-letter {
    text-transform: uppercase !important;
  }
}

 

Thank you for your help!

Can you help me with a similar issue?

On my contact form, I'd like "First name" and "Last name" to appear with only the first word capitalized, so NOT "First Name" and "Last Name." Is that possible?

2 minutes ago, Aurora said:

Thank you for your help!

Can you help me with a similar issue?

On my contact form, I'd like "First name" and "Last name" to appear with only the first word capitalized, so NOT "First Name" and "Last Name." Is that possible?

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

.fe-block-57a3651e726d0c658f30 {
  .first-name, .last-name {
    .caption-text {
      text-transform: lowercase !important;
    }
    .caption-text::first-letter {
      text-transform: uppercase !important;
    }
  }
}

17 minutes ago, Web_Solutions said:

 

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

.fe-block-57a3651e726d0c658f30 {
  .first-name, .last-name {
    .caption-text {
      text-transform: lowercase !important;
    }
    .caption-text::first-letter {
      text-transform: uppercase !important;
    }
  }
}

 

Thank you! Now both words aren't capitalized. I'd like "First" and "Last" to still be capitalized, just not "name."

9 minutes ago, Aurora said:

Thank you! Now both words aren't capitalized. I'd like "First" and "Last" to still be capitalized, just not "name."

Replace the code with this 

.fe-block-57a3651e726d0c658f30 {
  .first-name, .last-name {
    .caption-text {
      text-transform: lowercase !important;
      display: block !important;
    }
    .caption-text::first-letter {
      text-transform: uppercase !important;
    }
  }
}