Several questions about WP Forms

Item 1 is now resolved. I had to change the email associated with my main WordPress site.

Item 5 I see in the settings that I can upgrade and get it to ask additional questions or a math question. But what about the popup grid of pictures? I like that the most.

• This reply was modified 6 years, 7 months ago by Chuckie.

Hi Andrew,

I’ve responded to your questions below (including #1, which I may be able to still assist with a bit):

1. When the user hits submit I do not get an email come through.

It sounds like you found the admin email being used (Email Address found under Settings > General in left WordPress menu).

However if you still see any email delivery issues, or would simply like to take a good proactive measure to prevent future issues, I’d recommend installing an SMTP plugin. We have lots more details on why this is useful and suggested options in our tutorial on fixing email delivery issues.

2. With the notifications it seems to only offer “Success”.

I apologize, but I don’t understand what you’re looking for. Could you please share more details on what you’d like to see here?

3. Is it possible to make all the form fields the same width?

Absolutely. To change a field’s size, you can open the form builder and click the field within the preview area. This will open its Field Option panel, and from there you’ll need to open Advanced Options. In this section, you’ll find a Field Size dropdown.

For almost all fields, this controls the width (ie “Large” is 100% width). The only exception is the Paragraph Text field — for this field, the Field Size option controls its height (it will always be 100% width).

4. If I input an invalid email address there is a message that shows up in red. I am colour blind and this combination is burning my eyes. Is there any suitable CSS styling we can apply here to display it with an alternative style?

Sure! To change these styles, you’ll just need a little custom CSS. In case it helps, you can find all of the CSS styles we apply to validation messages in this tutorial.

Here’s the CSS you’d need to change the color of the validation text:

div.wpforms-container-full .wpforms-form label.wpforms-error {
    color: #990000;
}

The current hex value, #990000 represents our default red color. However, you can chance this to any color you’d like. In case it helps, here’s a site I like to quickly find the hex values for different colors.

Also, here’s a guide from WPBeginner on how to add custom CSS snippets like this to your site.

5. Is it possible to extend the “robot” recatchpa to be more than just a check box? On other computers I find that it then displays a popup window of images where you have to pick three that match a criteria.

The checkbox you see and the image questions you’re describing are actually all the same thing. Google’s reCAPTCHA is super smart, and will use a specific set of criteria to determine whether each user has to answer those image questions (or if they can simply check the box). If you test this out on a couple of different browsers/devices, you’ll likely get prompted with the images you’re expecting.

As an example, here’s a screenshot of the reCAPTCHA in my test site form when I view it in Chrome’s incognito mode.

I hope this helps! ??

Thanks for your replies. ??

2. With the notifications it seems to only offer “Success”.

I apologize, but I don’t understand what you’re looking for. Could you please share more details on what you’d like to see here?

When you press submit it then calls your email processor. If the email is sent then you are redirected the the success landing page.

But if for any reason the sending fails, there is no option to set a error landing page.

3. Is it possible to make all the form fields the same width?

Absolutely. To change a field’s size, you can open the form builder and click the field within the preview area. This will open its Field Option panel, and from there you’ll need to open Advanced Options. In this section, you’ll find a Field Size dropdown.

I have that bit fixed now.

I will investigate your SMTP suggestion and the CSS styling tomorrow.

Thanks.

1. When the user hits submit I do not get an email come through.

It sounds like you found the admin email being used (Email Address found under Settings > General in left WordPress menu).

However if you still see any email delivery issues, or would simply like to take a good proactive measure to prevent future issues, I’d recommend installing an SMTP plugin. We have lots more details on why this is useful and suggested options in our tutorial on fixing email delivery issues.

OK, I have added one of the SMTP plugins and got that setup all OK. Thanks.

5. Is it possible to extend the “robot” recatchpa to be more than just a check box? On other computers I find that it then displays a popup window of images where you have to pick three that match a criteria.

The checkbox you see and the image questions you’re describing are actually all the same thing. Google’s reCAPTCHA is super smart, and will use a specific set of criteria to determine whether each user has to answer those image questions (or if they can simply check the box). If you test this out on a couple of different browsers/devices, you’ll likely get prompted with the images you’re expecting.

As an example, here’s a screenshot of the reCAPTCHA in my test site form when I view it in Chrome’s incognito mode.

Fantastic! I did not realise this. I confirmed it. Great!

4. If I input an invalid email address there is a message that shows up in red. I am colour blind and this combination is burning my eyes. Is there any suitable CSS styling we can apply here to display it with an alternative style?

Sure! To change these styles, you’ll just need a little custom CSS. In case it helps, you can find all of the CSS styles we apply to validation messages in this tutorial.

Here’s the CSS you’d need to change the color of the validation text:

div.wpforms-container-full .wpforms-form label.wpforms-error {
    color: #990000;
}

This is not working. I have tried adding this to my additional CSS:

.wpforms-form label.wpforms-error {
    display: block;
    color: #fff;
    font-size: 14px;
    float: none;
}

But I still see red text?

UPDATE: This question is now resolved:

div.wpforms-container-full .wpforms-form label.wpforms-error {
    display: block;
    color: #fff;
    font-size: 14px;
    float: none;
}

• This reply was modified 6 years, 7 months ago by Chuckie.

Hi ajtruckle,

Glad to hear these solutions worked well for you!

For the success message question, you’re correct — it’s true that we only display a success message. The most common errors, user errors such as leaving a required field empty, are caught by our validation processing. We have two layers of validation (JavaScript and PHP) to ensure that these most common errors are processed properly, and if either encounters an issue our forms will display user-friendly validation errors (you can find more details on these here: https://wpforms.com/docs/customize-wpforms-validation-messages/).

Any other errors during submission are fairly unusual, but will most often will display an on-page error (depends on the specific issue).

However, most email-related issues, such as what you encountered, must be caught by testing your form. The reason we can’t display an error in this case it that the email will be recorded as sent (if you happen to have an email logging tool on your site, you’ll see the sent email get logged by the server even if it doesn’t arrive in your inbox). The issue will crop up after the email has been logged, which is why we will always recommend testing your forms before making them live.

That way, you can be sure that everything is working just as you’d like before your visitors/customers start interacting with the form.

I hope this helps! ??