Contact form styling

[applemint]

Hi,
I have Air WordPress theme and installed Contact Form 7 plugin as recommended.
How can I make the contact form look like the example in the documentation of my theme?
https://doc.seatheme.net/static/air/#page_builder
I managed to get some of it, but not all.
Thanks.

[SeaTheme]

Hi,

Because the default format is with the label(input name), to move the name into the box:

1. Please remove the label, add a placeholder for each input box in the contact form 7 editing window:

<label>[text* your-name placeholder "Name"]</label>

<label>[email* your-email placeholder "Mail"]</label>

<label>[text* your-subject placeholder "Subject"]</label>

<label>[textarea your-message placeholder "Message"]</label>

[submit "Submit"]

screenshot: https://www.dropbox.com/s/zvpm4ib6y0bergy/qq20210206-140403.jpg?dl=0

2. Please paste the custom CSS code to “Appearance > Customize: Additional CSS” to adjust the input spacing:

.moudle input {
    margin-bottom: 20px;
}

Regards!

SeaTheme – SeaTheme.net – Twitter – Facebook

[applemint]

Thank you.

2. Spacing isn’t working (even when correcting the little typo above ‘module’ instead of ‘moudle’)

3. Is the following code okay for styling the field boxes (like the example in your documentation)? It first worked, and then all of a sudden it didn’t work anymore.

input[type="text""],
input[type="email"],
textarea
{
    background-color: #efefef;
    color: #000;
    width: 50%;
		border: none;
}

input[type="submit"]
{
		background-color: #000;
		color: #fff;
		border: none;
}

[SeaTheme]

Hi,

Please try to update the CSS:

.moudle input {
    margin-bottom: 20px;
}
 .moudle input[type="text"],
 .moudle input[type="email"],
 .moudle textarea
{
    background-color: #efefef;
    color: #000; 
		border: 1px solid #dcdcdc;
}

 .moudle input[type="submit"]
{
		background-color: #000;
		color: #fff;
		border: none;
	border-radius:2px;
}

I need to check your webpage if it doesn’t work.

Regards

[applemint]

1. Thank you. Everything works, except the spacing between input boxes. I cannot show webpage yet, since I am working on local server. Will give you link when it’s online.

2. Could you also give code to style buttons from pagebuilder in same color (black background, white text) as submit button from contact form? What class is it in? Thanks.

[SeaTheme]

Hi,

1, ok
2, I have pasted the CSS in fact, submit button part is:

 .moudle input[type="submit"]
{
		background-color: #000;
		color: #fff;
		border: none;
	border-radius:2px;
}

Regards

[applemint]

Hi,
I’m afraid my question wasn’t clear. I would like to apply the same styling of this submit button to other buttons on the site not part of contact form (buttons that are inserted with the Page Builder). What is the class for those buttons so that the same colors can be applied?
Thanks

[SeaTheme]

Hi,

.moudle .wpcf7 input[type="submit"]

Regards

[applemint]

Hi,
I understand .moudle .wpcf7 input[type="submit"] is the class for the button in the contact page. I am looking for the class or ID to style other buttons on the website too. Page Builder has a module to insert buttons, but the styling is limited.
Thank you

[SeaTheme]

The class will affect other buttons in the builder:
.moudle input[type="submit"]
.btn-mod-wrap .ux-btn
.moudle .ux-btn
Please let me know what module you use if it doesn’t work.

[applemint]

I have a button made with the button module. The module is in a General Wrap (1/3 size).
When I use second and third class as you suggest, the text and border colors show up, but background color (other than white) does not.
Strangely enough, when I set a styling for :hover, background color does show.

[SeaTheme]

Hi,

The CSS should work for normal and hover:

 .moudle .btn-mod-wrap .ux-btn { 
    border-color: #ccc;
    color: #ccc;
    background-color: #eee;
}
 .moudle .btn-mod-wrap .ux-btn:hover { 
    border-color: #eee;
    color: #333;
    background-color: #ccc;
}

[applemint]

Thank you, the above code is working now. I found the error.
Except for font-size that I added to the code is not working. The font size of button stays at the default font-size chosen for posts and pages. Any suggestions?

.moudle .btn-mod-wrap .ux-btn { 
	background-color: #000;
	color: #fff;
	border: 1px solid #000;
	border-radius:2px;
	font-size: 16px;
}
.moudle .btn-mod-wrap .ux-btn:hover { 
  background-color: #fff;
  color: #000;
	border: 1px solid #000;
	border-radius:2px;
	font-size: 16px;
}

Regards

[SeaTheme]

Hi,

I need to check the lived webpage.

Regards

[applemint]

This reply has been marked as private.

[SeaTheme]

Hi, thanks

Please define the font size by:

.moudle .btn-mod-wrap .ux-btn .ux-btn-text {
 font-size: 16px;
}

Regards

[applemint]

okay, working now. Thank you!

[applemint]

One more question regarding contact form. How to style the messages that appear below the contact form, after submitting? (Like the ones that indicate the message was sent successfully or not, etcetera …)
I would like to style the border box and font-size.

Thank you

[SeaTheme]

Please refer to https://contactform7.com/styling-contact-form/#styling-validation-error-messages

[applemint]

Hi,

I added Friendly Captcha (which is supported by Contact Form 7) to my contact form.
Now I notice there is an added paragraph line before and after the Friendly Captcha, which was not the case at first. I subsequently removed margins I had set to make sure it still looks okay, but would rather not be limited by these paragraph lines so that I can set distance between elements with margin CSS. Any suggestions?

Thank you.

[applemint]

This reply has been marked as private.

[SeaTheme]

Hi,

Because there are nothing in the 2 lines, please use the custom CSS to define the empty line height:

.wpcf7-form>p:empty{
  height:10px;
}

Regards

[applemint]

Okay, thank you.

I contacted Friendly Captcha support and seems like it is part of their code, to add space around it. The paragraph lines cannot be removed, so their suggestion to work around it is to add a negative margin-top and margin-bottom so that it behaves as if it had no empty paragraph lines.

.frc-captcha {
margin-top: -15px;
margin-bottom: -15px;
}

[SeaTheme]

Hi,

It should work also 🙂
Thanks for sharing!

Regards

[Author]

Posts