Forcing an error message under the "Submit" button
-
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”
- The topic ‘Forcing an error message under the "Submit" button’ is closed to new replies.