Contact form 7 adjustment

[friedrichfotografie]

Hi! I added contact form 7 plugin because I needed more fields.
Now after adding it to my website I noticed it looks different than the original Arnold contact form. How can I make it look like the Arnold form?

http://friedrichfilme.de/kontakt/

[SeaTheme]

Hi,

Please check how set the default style by Contact Form 7

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[friedrichfotografie]

This reply has been marked as private.

[SeaTheme]

Hi, may I check your website? Could you please leave your wp-admin access (URL / username/password) by picking up “Set as private reply”?

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[friedrichfotografie]

This reply has been marked as private.

[SeaTheme]

HI,

I added the custom CSS to fix it:

.contactform7 {
	display: flex;
  flex-wrap: wrap;
}
.contactform7 label {
	width:50%;
}
.wpcf7-form input {
	width:100%;
	height:40px;
}
.wpcf7-form input[name="your-name"],
.wpcf7-form input[type="tel"]{
	width: calc(100% - 20px)
}
.wpcf7-form input[type="submit"]{
	width:auto;
	height:50px;
	border-width:1px;
}
.wpcf7-form-control-wrap { 
    display: block;
    width: 100%;
}
@media(max-width:767px) {
	.contactform7 label {
		width:100%;
	}
	.wpcf7-form input[name="your-name"],.wpcf7-form input[type="tel"]{
	width: 100%
	}
}

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[friedrichfotografie]

Thanks! It looks much better now but there are still some things which looks a bit weird.

01 The red “required” text (in german: “Füll bitte dieses Feld aus”) is above the field. In the original its in the same place like the field text. Also its red and a wrong font.
02 Can I deactivate that yellow field at the footer?
https://i.ibb.co/dB6BV94/Bildschirmfoto-2022-07-31-um-16-50-09.png

03 The loading circle after clicking “Abschicken” button. This is not in the original form.
https://i.ibb.co/ZM3Dmy7/loading-circle.jpg

[SeaTheme]

Hi,

1. The tip-text cannot be the same as original module. It is possible to adjust the text size by CSS:

 .wpcf7-not-valid-tip { 
    font-size: 10px;
}

2. It is possible to hide spinner by CSS:

.wpcf7-spinner { 
    display: none!important;
} 

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[friedrichfotografie]

Hm font size adjustment does not work.

And what is the spinner?

[SeaTheme]

HI,

Please check if it works. I fixed it.

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[friedrichfotografie]

Atm the spinner text is above the form text. Is it possible to make it same place where the form text is placed like it is original form?

[SeaTheme]

What’s the “spinner tex”? Is it an only icon? Can you mark it on a screenshot? Thanks

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[friedrichfotografie]

Sry let me try to explain from the beginning.

Atm for testing purpose on my website there are two contact forms. The original one and then a modified version because the original is limited with no extra fields.

The problem with the modified version that some things look different and not so nice anymore! For example if the user forgets to fill out some field – the warning shows up above the field. In the original form it replaces the text inside which looks much smarter in my opinion. So how can I adjust that?

[SeaTheme]

Hi,

Thanks for the detailed explanation, it’s not possible, sorry about that.

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[Author]

Posts