• On my Contact Form, the CAPTCHA simply reloads if a user does not enter a valid email address. You have to scroll up to actually see the error message under the email field. The analytics for users who access my form versus the number of completed forms is vastly different.

    I think people assume their form was sent even though they never received a confirmation message, because it is not obvious that they still have to complete a required field. While I was testing the form, I sat there hitting “submit” multiple times waiting for an email to come, and then I scrolled up and happened to notice the required field error.

    This is the code:

    <div class="form__section">
            <h2 class="form__section-heading">01. Contact Info</h2>
            <div class="form__group">
                <div class="col-1-2">
                    [text first_name placeholder "First Name"]
                </div>
                <div class="col-1-2">
                    [text last_name placeholder "Last Name"]
                </div>
            </div>
            <div class="form__group">
                <div class="col-1-1">
                    [text address_1 placeholder "Street Address Line 1"]
                </div>
            </div>
            <div class="form__group">
                <div class="col-1-1">
                    [text address_2 placeholder "Street Address Line 2"]
                </div>
            </div>
            <div class="form__group">
                <div class="col-1-3">
                    [text city placeholder "City"]
                </div>
                <div class="col-1-3">
                    [select* state include_blank "Alabama" "Alaska" "Arizona" "Arkansas" "California" "Colorado" "Connecticut" "Delaware" "District Of Columbia" "Florida" "Georgia" "Hawaii" "Idaho" "Illinois" "Indiana" "Iowa" "Kansas" "Kentucky" "Louisiana" "Maine" "Maryland" "Massachusetts" "Michigan" "Minnesota" "Mississippi" "Missouri" "Montana" "Nebraska" "Nevada" "New Hampshire" "New Jersey" "New Mexico" "New York" "North Carolina" "North Dakota" "Ohio" "Oklahoma" "Oregon" "Pennsylvania" "Rhode Island" "South Carolina" "South Dakota" "Tennessee" "Texas" "Utah" "Vermont" "Virginia" "Washington" "West Virginia" "Wisconsin" "Wyoming"]
                </div>
                <div class="col-1-3">
                    [text zip placeholder "Zip Code"]
                </div>
            </div>
            <div class="form__group">
                <div class="col-1-1">
                    [text country placeholder "Country"]
                </div>
            </div>
            <div class="form__group">
                <div class="col-1-2">
                    [text phone placeholder "Telephone Number"]
                </div>
                <div class="col-1-2">
                    [email* email placeholder "Email Address"]
                </div>
            </div>
        </div>
    
        <div class="form__section">
            <h2 class="form__section-heading">02. Tell us about yourself!</h2>
            <p class="form__section-subheading">We care first about the person, and second about getting to our mutual goals. Please list out any relevant experience or information about yourself that you feel will help us get to know you better. Some helpful questions to think about: Are you a technical person? People person? Sales? Marketing? What are you passionate about? How could owning your own successful repair business change your life?</p>
            <div class="form__group">
                <div class="col-1-1">
                    [textarea about placeholder "Don't be humble. Lay it all out here."]
                </div>
            </div>
        </div>
    
        <div class="form__section">
            <h2 class="form__section-heading">03. How'd you hear about us?</h2>
            <div class="form__group">
                [radio source "CNBC – West Texas Investors Club" "Google Search" "Bing Search" "Yahoo Search" "Trade Show" "Facebook" "Twitter" "Repair Videos/Youtube" "In Store Advertisement" "Friend/Referral" "Other"]
            </div>
            <div class="form__group">[captchac captcha-543] [captchar captcha-543]</div>
            <div class="form__group">
                [submit "Submit"]
            </div>
    
        </div>
    
    </div>

    The URL is: http://www.iquerepair.com/iquetech/apply/

    How can I have an error message show up under the Submit button that says something like “Please scroll up to fill out the required fields”

    https://wordpress.org/plugins/contact-form-7/

Viewing 4 replies - 1 through 4 (of 4 total)
  • I have tested your form at http://www.iquerepair.com/iquetech/apply/ – I intentionally left the email field blank and realized the exact error you have detailed in your question.

    This is could be due to a JavaScript conflict with either your current WordPress theme or one of the other plugins you are using – see Contact Form 7 Email Issues – there is a link there that covers JavaScript Conflicts.

    You may go through ​the step by step approach to finding JavaScript Conflicts

    1. Switch temporarily to a WordPress default theme (Twenty Eleven etc.) and see if the problem goes away.

    If it does, you’ve most likely got a JavaScript conflict with your current WordPress theme.

    If switching to default theme doesn’t help it could be one of the plugins you are using that is causing the problem.

    2. Disable all plugins other than Contact Form 7

    If doing that solves the problem, you can then add back each item – one by one, until you find the real cause of the problem.

    ​​

    Thread Starter lizbutler

    (@lizbutler)

    Thank you for the response!

    I activated Twenty Eleven and Twenty Fifteen, and with the way the site was built, the contact forms are not visible on the page with any other theme. Can you recommend a different way to test this? I did not build the site, I am simply updating it now.

    Thank you!

    RE:I activated Twenty Eleven and Twenty Fifteen, and with the way the site was
    built, the contact forms are not visible on the page with any other theme.

    Contact form 7 works well with both themes – I can confirm :). Also, Contact Form 7 displays according to the style used in the form elements of each theme. Hence, the look may be entire different depending on the theme.

    ​​You may also trace JavaScript conflict using Firebug​ – but you need to be rather skilled at JavaScript programing and the use of Firebug.

    Thread Starter lizbutler

    (@lizbutler)

    I understand. I know that Contact Form 7 works well with both themes, however the developer that built this site has the page templates set up to where only the page title shows up when I activate a different theme, so all of the pages are blank.Therefore, I am unable to test the forms.

    I appreciate your help nonetheless. Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Forcing an error message under the "Submit" button’ is closed to new replies.