Adjusting Default/Standard Button Element (for use in Contact 7 forms)

[kbistudio]

I went to the “Theme Options” page and found the default settings for the button option, but it doesn’t give as much control over it as there is in other areas.

Looks like the Contact 7 forms pulls it directly from the default without a clear way to adjust it. There’s a black outline and a drop shadow on the text I can’t remove.

---

I’d like to have the default button be like this, which I can do everywhere else:

• 1px outline
• white background
• blue text
• 1 em size
• the final countdown: sans serif
• 0.1 em spacing
• default drop shadow settings on button

---

And behave this way with interaction:

• blue background
• white text
• flip X
• remove drop shadow

Can you help me? Thank you.

[ruenel]

Hello @kbistudio,

Thanks for writing in!

The global settings what is used by the buttons in the Contact Form 7.

If you want to style it like the Button element you add in the builder, you will have to use custom CSS code already. Be advised that custom CSS coding is beyond the scope of our support already. You may need to contact 3rd party developer or use our ONE service.

Best Regards.

[kbistudio]

Where would I find the CSS coding terms of each of those listed items?

[ruenel]

Hello @kbistudio,

You won’t find it anywhere because the resulting CSS code is dynamically taken from the Theme Options settings.

Cheers.

[kbistudio]

Ok. Thank you. Changing directions a little, but staying on topic with the form.

In the Contact 7 Form block, I’m trying to set it a specific max width limit, but I want it to hug the right edge of the column rather than the default left, so it stays where I want it and works better on mobile. I still want the text elements (labels, button, etc.) to be aligned to the right.

Is there a way to do this?

[ruenel]

Hello @kbistudio,

Can you please provide the URL of the page were we can see the contact form? In the meantime, please check out this video tutorials:

Best Regards.