Contact Form 7 is known to be a very powerful and flexible WordPress plugin. Unfortunately, sometimes it may cause some serious headaches. Even if it functions properly, the entire contact form or specific fields do not fit your website in terms of style, so you need to modify the look of your contact form. If that is the case, check out the following tips that can help you configure this great plugin.
Excessively wide fields in the mobile version
In some WordPress themes, the fields of your contact form on mobile devices appear wider than the screen width. This causes an ugly horizontal scroll and definitely has to be fixed.
Limit filed width with custom CSS
STEP 1: Head to Appearance > Customize > Additional CSS and add the following code:
.form-field-1
{
width: 100% !important;
}
You can try 90% instead of 100% or any other value depending on the way you wish your contact form to appear. You may also call this style whatever else you want, but make sure to come up with a unique name that does not copy any existing styles on your website, which may mess up your code. Do not forget to publish the changes.
STEP 2: Open your contact form and add your new style form-field-1 to each of the fields in your contact form. (By the way, this type of styling only works with regular fields and does not work with dropdown menus, etc.) After you add the style, the “name” field in your contact form should now look like this:
<label> Your Name [text* your-name class:form-field-1] </label>
Do not forget to save and test your form on various devices.
Contact Form 7 Mail Goes to Spam
Sometimes messages sent via Contact Form 7 go to spam or arrive in your inbox with a [SPAM] prefix. There are several ways to fix this.
OPTION 1: Create a filter in your email client (e.g. Gmail). Creating a filter is easy and you should figure it out. Just make sure you check the options “Never send it to Spam” and “Always mark it as important”.
OPTION 2: Add the sender email (for example wordpress@yourdomain.com) to the list of contacts in your email client. BTW, make sure your sender email in Contact Form 7 contact form is not a Gmail account. Technically it must be wordpress@yourdomain.com.
OPTION 3: (Not tested) You can try replacing sender email wordpress@yourdomain.com with contact@yourdomain.com. At the same time, you should create a physical email box contact@yourdomain.com. There is an opinion that Google tends to perceive sender emails that contain the term “wordpress” as spam.