Solution: Hack to change wording on Contact Form

jwashburn

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

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

Darter02

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

Sir_Eagle

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

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

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

Mark, try this

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

markmicallef

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

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

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

That's where I've mine as well.

rkw624

This works great. Thank you!

Rich
www.fourmilephotography.com

Johnwd

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