[Support request] Contact form 7 won’t align centre

[troyw]

Hi guys,

I cannot seem to get CF7 to align in the centre of the page. Whether I use the shortcode or the Contact form 7 widget, it always throws the form off to the left. I have tried sizing the container, but this doesn’t work, i’ve tried lots of code from various forums, but none align the CF7 form in the centre of the page?
How can i align it central?
Thanks

[Fernando]

Hi troyw,

Are there settings to align this form in the plugin you used? The alignment of this form can’t be controlled through GB as the Form has a container which is coming from the plugin you used.

If this plugin doesn’t have a setting to center the form items, here is a CSS you may try adding:

.whole-form {
    justify-content:center;
}

Here is a link you may refer to in terms of adding CSS: https://docs.generatepress.com/article/adding-css/

Hope this helps! 🙂

[troyw]

Hey Fernando,
That did not work, so i have had to just adjust the container size to float in the middle of the page. Not ideal, but it seems to be working. Thanks.

I do seem to be having a lot of trouble getting the CF7 for to respond to any CSS I am adding though, which I have never experienced before. For example, I am trying to get round the button edges and adding this CSS, but nothing happens.

	.submit-button {
    border-radius: 30px;
}

I have even taken this bigger code with button shadows and round edges and added it to the customiser, but it does nothing;

.wpcf7-form .submit-button {
    background-color: none;
    border: 0;
    color: #fff;
    border-radius: 5px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 15px;
    width: auto;
    padding: 20px 42px;
    letter-spacing: 2px;
    font-size: 14px;
}

.wpcf7-form .submit-button:hover {
    cursor: pointer;
    box-shadow: 0px 7px 16px -7px rgba(0, 0, 0, 0.4);
    border: 0;
}

Its almost like something is overriding the css and nothing takes affect?
Any ideas?

[troyw]

I have just noticed, that it is kind of working, but only in Mobile responsive view?

[Fernando]

I can see the code added from my end but it seems that the code added is inside a media query(max-width: 600px). This is the reason why the code only works on smaller screens.

See this for reference: https://share.getcloudapp.com/rRuNKKJl

Also see: https://share.getcloudapp.com/JruGYYlo

With that said, can you confirm if these codes are inside a media query?

Hope to hear from you soon! 🙂

[troyw]

Ah yes, moving the css has fixed that.
The only other issue I have, is that there is a big gap around the button, before the shadow appears. I have tried adjusting the css, but always end up losing the shadow?

Thanks

[Elvin]

Hi troyw,

As it is, the shadow is applied to the container as shown here – https://share.getcloudapp.com/7KuqlrxK

You’ll have to move the box-shadow property to the button itself instead of its container.

Something like this –

form[action="/#wpcf7-f4880-p4577-o1"] input.submit-button {
    box-shadow: 8px 7px 16px -7px rgb(178 178 190);
}

The selector I’ve provided is for the form’s send button itself. 🙂 You can modify its values to your preference.

[troyw]

Hey Elvin,
Not sure where to add this. I have added your code, but it makes no differnce. If I then remove the old code;

`.wpcf7-form .submit-button {
box-shadow: 8px 7px 16px -7px rgba(178, 178, 190, 1);
border: 0;
color: #fff;
border-radius: 5px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
margin-bottom: 20px;
width: auto;
padding: 20px 42px;
letter-spacing: 2px;
font-size: 14px;
}`

… the button loses all its styling.

No matter what I try, it loses the styling?

[Elvin]

For that old styling, you just need to remove the box-shadow property. 🙂

You then add the CSS I’ve provided. 😀

[troyw]

That removes the box, but loses the shadow?

[Elvin]

That removes the box, but loses the shadow?

Yes because we’re moving it to the button itself with the CSS I’ve previously provided which is this one:

form[action="/#wpcf7-f4880-p4577-o1"] input.submit-button {
    box-shadow: 8px 7px 16px -7px rgb(178 178 190);
}

It’s not obvious as it is so you may have to adjust the shadow values.

[troyw]

Hey, I have tried every combination I can come up with and if I remove either of the box-shadow lines, I lose all the styling?

[troyw]

This is what I tried and it removes all the styling;

form[action="/#wpcf7-f4880-p4577-o1"] input.submit-button {    box-shadow: 8px 7px 16px 1px rgb(178 178 190,1);
    border: 0;
    color: #fff;
    border-radius: 5px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 20px;
    width: auto;
    padding: 20px 42px;
    letter-spacing: 2px;
    font-size: 14px;
}

[troyw]

This is what I have now and the button is styled fine. Its just this big border i can’t get rid of?

form[action="/#wpcf7-f4880-p4577-o1"] input.submit-button {
    box-shadow: 8px 7px 16px -7px rgb(0,0,0,0,4);
}

.wpcf7-form .submit-button
 {
    		box-shadow: 8px 7px 16px -7px rgba(0,0,0,04);
    border: 0;
    color: #fff;
    border-radius: 5px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 20px;
    width: auto;
    padding: 20px 42px;
    letter-spacing: 4px;
    font-size: 14px;
}

[Fernando]

Hi troyw,

Can you try replacing your current CSS with this one?:

form[action="/#wpcf7-f4880-p4577-o1"] input.submit-button {
    box-shadow: 8px 7px 16px -7px rgba(0,0,0,04);
    border: 0;
    color: #fff;
    border-radius: 5px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 20px;
    width: auto;
    padding: 20px 42px;
    letter-spacing: 4px;
    font-size: 14px;
}

Your current CSS here(https://generatepress.com/forums/topic/contact-form-7-wont-align-centre/#post-2120345) isn’t working because the rgb values are inputted incorrectly. There are missing commas, and it should also be rgba if you’re including an alpha/opacity parameter.

Kindly let us know how it goes. 🙂

[Author]

Posts