Solution: Hack to change wording on Contact Form

jwashburn · September 4, 2013

There was a post asking how to change the wording "The Question" on the built in Contact Form.

I put together a "hack" to make it work. The problem is with dynamic IDs and classes its tough to target things as we would like, but I made this work by making the text "The Question: the same color as the background and moving it to the right to make room for your own text. So if have customized the color of your contact form you will need to tweak this code a bit. This should get you started in the right direction. This is far from a clean solution, but it gets the job done for now

.sm-contact-pro-form:before {
content: "[B][COLOR="Red"]This is the text you want above the text box[/COLOR][/B]";
position: absolute;
top: 215px;
left: 200px;
}

I have tested with a few browsers and the top and left numbers seem to work pretty well, but adjust as needed.

.sm-form-contents .sm-form-field-overhead:nth-child(4) label {
    color: #242528;
    padding-left: 182px;
}

This changes the color of the text "The Question" to the same color as the background and shoves it to the right. Depending on the length of the text you put in you can adjust the padding-left value

It would be easy to target any of the fields if needed

Here is a screen shot

JakeEbersole · September 4, 2013

This is awesome. I tried it and it works perfectly. Thanks!

Darter02 · September 4, 2013

. I was waiting to hear about this on the other thread. You should link this to that...

Sir_Eagle · September 4, 2013

Nice little tweak.

I changed the padding-left to 300px. If you change the text collor you'll see that at 182px it wasn't all the way to the right, just like you pointed out.

jwashburn · September 4, 2013

Sir_Eagle wrote: »

Nice little tweak.

I changed the padding-left to 300px. If you change the text collor you'll see that at 182px it wasn't all the way to the right, just like you pointed out.

Yeah because you have more text.

markmicallef · September 4, 2013

Very Cool, I added this.........................
I added this to keep the font consistent to my sight

.sm-contact-pro-form:before {
content: "Your message";
position: absolute;
top: 215px;
left: 200px;
[COLOR="red"]font-size:16px;font-weight:400;  
font-family: Happy Monkey,Roboto, Helvetica, Arial, sans-serif;[/COLOR]
}

.sm-form-contents .sm-form-field-overhead:nth-child(4) label {
    color: #242528;
    padding-left: 260px;
}

[COLOR="Red"].sm-label, .sm-widget-hd {
  font-family: Happy Monkey,Roboto, Helvetica, Arial, sans-serif;
}[/COLOR]

Although I could not find the ID for the title "Contact Mark"

jwashburn · September 4, 2013

Mark, try this

.sm-user-ui h1 {
    font-family: Happy Monkey,Roboto,Helvetica,Arial,sans-serif;
}

markmicallef · September 5, 2013

jwashburn wrote: »

Mark, try this

.sm-user-ui h1 {
    font-family: Happy Monkey,Roboto,Helvetica,Arial,sans-serif;
}

Perfect Joey, added color to match my site Thanks

.sm-user-ui h1 {
    font-family: Happy Monkey,Roboto,Helvetica,Arial,sans-serif;
[COLOR="Red"]  color: #8d8f93;[/COLOR]
}

Darter02 · September 5, 2013

Nice work guys! That looks great.

I tried using this code.

/*contact form message*/
.sm-contact-pro-form:before {
content: "Your Message";
position: absolute;
top: 215px;
left: 200px;
font-size:16px;font-weight:400;  
font-family: Lancelot, Helvetica, Arial, sans-serif;
  color: #f3f3b2;
}

.sm-form-contents .sm-form-field-overhead:nth-child(4) label {
    color: #242528;
    padding-left: 182px;
}

.sm-label, .sm-widget-hd {
font-size:16px;font-weight:400;  
    font-family: Lancelot, Helvetica, Arial, sans-serif;
  color: #f3f3b2;
}
.sm-user-ui h1 {
    font-family: Lancelot,Helvetica,Arial,sans-serif;
  color: #898752;
}

My h1 font didn't change either font, or color. I can't figure out why.

The first two fields did change font, but not color. After trying all sorts of stuff I can't seem to fix it. Do I need CSS to move the original fonts over, make them the same background color, and such like the Message box?

jwashburn · September 5, 2013

Darter02 wrote: »
Nice work guys! That looks great.

I tried using this code.
/*contact form message*/
.sm-contact-pro-form:before {
content: "Your Message";
position: absolute;
top: 215px;
left: 200px;
font-size:16px;font-weight:400;  
font-family: Lancelot, Helvetica, Arial, sans-serif;
  color: #f3f3b2;
}

.sm-form-contents .sm-form-field-overhead:nth-child(4) label {
    color: #242528;
    padding-left: 182px;
}

.sm-label, .sm-widget-hd {
font-size:16px;font-weight:400;  
    font-family: Lancelot, Helvetica, Arial, sans-serif;
  color: #f3f3b2;
}
.sm-user-ui h1 {
    font-family: Lancelot,Helvetica,Arial,sans-serif;
  color: #898752;
}
My h1 font didn't change either font, or color. I can't figure out why.

The first two fields did change font, but not color. After trying all sorts of stuff I can't seem to fix it. Do I need CSS to move the original fonts over, make them the same background color, and such like the Message box?

Where are you putting the CSS? It seems like I have noticed that putting it in different places causes some different results. I have mine in the Sitewide Theme. I see your code being blocked and using the default font.

Darter02 · September 5, 2013

That's where I've mine as well.

rkw624 · September 6, 2013

This works great. Thank you!

Rich
www.fourmilephotography.com

Johnwd · September 7, 2013

Hack to change wording on Contact Form

jwashburn wrote: »
There was a post asking how to change the wording "The Question" on the built in Contact Form.

I put together a "hack" to make it work. The problem is with dynamic IDs and classes its tough to target things as we would like, but I made this work by making the text "The Question: the same color as the background and moving it to the right to make room for your own text. So if have customized the color of your contact form you will need to tweak this code a bit. This should get you started in the right direction. This is far from a clean solution, but it gets the job done for now
.sm-contact-pro-form:before {
content: "[B][COLOR=Red]This is the text you want above the text box[/COLOR][/B]";
position: absolute;
top: 215px;
left: 200px;
}
I have tested with a few browsers and the top and left numbers seem to work pretty well, but adjust as needed.
.sm-form-contents .sm-form-field-overhead:nth-child(4) label {
    color: #242528;
    padding-left: 182px;
}
This changes the color of the text "The Question" to the same color as the background and shoves it to the right. Depending on the length of the text you put in you can adjust the padding-left value

It would be easy to target any of the fields if needed

Here is a screen shot

Thank you so much for this code

John

Solution: Hack to change wording on Contact Form

Comments