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

[troyw]

Hey,

OK, that did not work either, it lost the shadow and the big box appeared on hover. Here is what I previously had in CSS;

.submit-button {padding: 29px 10px; 
}

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;
}

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

Here is what the above CSS looks like when change it to your suggestion.

.wpcf7-form .submit-button

 {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;
}
    		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;
}

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

As you can see, I have lost the shadow and when I hover over it, the big box appears again?

[troyw]

If I remove either of these, it completely kills the styling.

  box-shadow: 0px 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]

input.submit-button is the selector for the button itself whereas .submit-button is the selector for the div holding the button.

Meaning, if you do styling on just .submit-button, this will take effect on the “big box”.

This is what I mean: https://share.getcloudapp.com/8LupKlB5

If you wish to add CSS code to the button itself and not the “big box”, you would need to remove all current CSS for these two and put your CSS in selectors like this:

static state:

form[action="/#wpcf7-f4880-p4577-o1"] input.submit-button {

}

for hover state:

form[action="/#wpcf7-f4880-p4577-o1"] input.submit-button:hover {

}

Hope this helps! 🙂

[troyw]

OK,
So I did that and as you can see, it completely loses all styling and positioning for both normal and hover?

This is the new CSS I tried;

.wpcf7-form .submit-button

 {form[action="/#wpcf7-f4880-p4577-o1"] input.submit-button {
    box-shadow: 0px 7px 16px -7px rgba(0, 0, 0, 0.4);
    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;
	 }
	 
.wpcf7-form .submit-button:hover {form[action="/#wpcf7-f4880-p4577-o1"] input.submit-button:hover 
{	box-shadow: 0px 7px 16px -7px rgba(0, 0, 0, 0.4);
    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;

}
    cursor: pointer;
    box-shadow: 0px 7px 16px -7px rgba(0, 0, 0, 0.4);
    border: 0;
}

[Fernando]

Hi troyw,

The code you’re adding isn’t working because of a syntax error.

Specifically, you’re placing the highlighted CSS code inside another CSS selector. This coding only works for SASS and not plain CSS.

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

To clarify, do you wish to add the CSS rules to the button itself or the container?

If you wish to add CSS to the button itself, remove all the current CSS and replace it with this:

form[action="/#wpcf7-f4880-p4577-o1"] input.submit-button {
    box-shadow: 0px 7px 16px -7px rgba(0, 0, 0, 0.4);
    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;
}
	 
form[action="/#wpcf7-f4880-p4577-o1"] input.submit-button:hover {	
    box-shadow: 0px 7px 40px -7px rgba(0, 0, 0, 0.4);
    border: 0;
    cursor: pointer;
}

Kindly modify the values to your preference.

[troyw]

Hey Fernando, I have done what you suggest and still there is no styling at all and the button is out of line? And now it doesn’t work responsively either?

[Fernando]

Hi Troy,

I tested the code I provided and here it appears from my end: https://share.getcloudapp.com/BludAmjz

Can you kindly check if the syntax is correct.

As for the responsiveness of this form, you would need a media query for that. Something like this:

@media (max-width:768px){
    form[action="/#wpcf7-f4880-p4577-o1"] .whole-form {
        flex-wrap:wrap;
    }
}

Kindly add more CSS rule as you prefer.

Hope this helps! 🙂

[troyw]

Hi,
The responsiveness is working again with that code, thanks. Not sure what stopped it working with the the other CSS.
The button still has no styling though and I have placed your CSS in. I am not getting this, what am I doing wrong, it shouldn’t be this hard. Where am I supposed to be placing this CSS if not where I am placing it. It doesn’t make any sense?

Cheers

[troyw]

This is the entire CSS for this CF7 Subscribe form. Please can you tell me where I need to put your CSS in this?

/* Inline CF7 Subscribe */

.whole-form {
	display: flex;
}
.whole-form {
	display: center; 
}

.field-space {padding-right: 10px; 
}

wpcf7-form .submit-button

 form[action="/#wpcf7-f4880-p4577-o1"] input.submit-button {
    box-shadow: 0px 7px 16px -7px rgba(0, 0, 0, 0.4);
    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;
}
	 
form[action="/#wpcf7-f4880-p4577-o1"] input.submit-button:hover {	
    box-shadow: 0px 7px 40px -7px rgba(0, 0, 0, 0.4);
    border: 0;
    cursor: pointer;
}
    cursor: pointer;
    box-shadow: 0px 7px 16px -7px rgba(0, 0, 0, 0.4);
    border: 0;
}
@media (max-width:768px){
    form[action="/#wpcf7-f4880-p4577-o1"] .whole-form {
        flex-wrap:wrap;
    }
}
@media only screen and (max-width: 600px) {
	#nf-field-13,
	#nf-field-14,
	#nf-field-15,
	#nf-field-16,
	#nf-field-17 {width: 100%
	}
	
.whole-form {flex-direction: column;
}
	
	.submit-button {
		padding: 15px 0px
	}	
	.field-space {
		margin: 10px 0px;
	}
	.whole-form {
    justify-content:center;
}

[Leo]

Fernando’s code here:
https://generatepress.com/forums/topic/contact-form-7-wont-align-centre/page/2/#post-2120708

Can be added to the top or bottom of your code here:
https://generatepress.com/forums/topic/contact-form-7-wont-align-centre/page/2/#post-2121956

Please note that we will not be able to provide additional support for this topic as I believe it’s 100% related to the plugin and not related to GP at all.

If you need additional help with styling, please consult the plugin’s support team.

Refer to this article here for more info:
https://generatepress.com/what-support-includes/

Thanks for your understanding 🙂

[Author]

Posts