Center contact form labels

Ask the Community General Questions
1

Is there a way to center the labels of the contact form?

1 Like
3

Hi there @user13261 :wave:

I’ve checked your widget, and it seems you’ve already found a solution.

Let me know if you have any further questions :wink:

4

Yes, for the other users here I used this:

.TextControlBase__TextControlBaseLabelWrapper-sc-1s66zih-6 {
display: block;
width: 100%; /* Match button width /
text-align: center; / Center the text /
box-sizing: border-box; / Ensure padding/border are included in the width/height /
margin: 0 auto; / Center the label */
}

.TextControlBase__TextControlBaseInput-sc-1s66zih-4 {
display: block;
width: 100%; /* Match button width /
text-align: center; / Center the text /
box-sizing: border-box; / Ensure padding/border are included in the width/height /
margin: 0 auto; / Center the label */
}

But I still have the problem that the label is not centered anymore when text is entered since the transformation is scaling the whole label box to 0.7. Do you have any solution for that?

1 Like
5

Hi @user13261 :wave:

Thanks for sharing your solution!

This code should help you keep the labels centered when entering the text:

[class*="TextControlBase__TextControlBaseLabelWrapper-sc"] {
  transform-origin: center;
}

Check it out and let me know if you like the result :slightly_smiling_face:

6

LEGEND! Thanks buddy, you are the MVP.

Best,
Johannes

2 Likes
7

Great! Thank you for the feedback :heart:

If anything comes up, we are always here to help :slightly_smiling_face: