Support » Plugin: Contact Form by WPForms - Drag & Drop Form Builder for WordPress » Can’t enter anything in fields until clicking Submit?

  • Both on desktop and on mobile, this very simple contact form (the one at the bottom of the page) does not allow you to click in (either with your mouse or with a tap on mobile) to enter name and email. If you click submit >FIRST< it will allow you to fill them out, but that’s far from ideal. If I place a Recaptcha (V2) in the form, then it will allow you to fill the fields out, but it completely throws off the styling and I can’t figure out how to reduce its size, move it up onto the same line, or make any other adjustments to it.

    I’d love to eliminate the field titles as suggested in your tutorial on making an inline form, but when I follows the instructions I wind up with a Submit button that’s off kilter (about 20px lower than the fields. If I try to add padding to the fields to line them up, it just moves everything up and down together).

    Also, I don’t seem to be able to add space between the right edge of the email field and the left edge of the Submit button and it’s looking awfully crowded. I added 20 px margin left via the theme customizer css but it’s not obeying this.

    Can you help with any of these issues?

    • This topic was modified 2 years, 2 months ago by Hannah West Design. Reason: add more informaiton and an issue with the Submit button not lining up correctly I like to get help with

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Support Ethan Choi

    (@ethanchoi)

    Hi @vesica,

    It looks like the field input issue has to do with the custom CSS you might have added to the submit button container.

    To display a form in a single line, please try removing the custom CSS from your site and add our built-in inline-fields class to the Form CSS Class field in the form builder > Settings > General. In case it helps, you may follow our tutorial on how to display your form in a single line.

    The single line form format does not allow for the Checkbox reCAPTCHA. If you’d like to use reCAPTCHA, you can consider using the Invisible reCAPTCHA option instead. When this is enabled, reCAPTCHA works in the background to prevent spam submissions.

    Once you’ve added the inline-fields class to the form, could you let me know how it goes?

    Thanks!

    Thread Starter Hannah West Design

    (@vesica)

    Thanks Ethan, the tutorial didn’t work for me the first time around, but I’ll try it again and see if I get the same result as last time. I’ll get set up with the invisible ReCaptcha, too, just forgot where to find the settings for it.
    Back with results after a little while…

    Thread Starter Hannah West Design

    (@vesica)

    Hi Ethan, finally got this done. Removed previous css and activated the invisible ReCaptcha no problem. It looks about the way I had it before, but now I can click/tap into the name and email fields. Yay!! The Submit button is even more drastically out of line with the name and email fields, though..it’s moved all the way down to the top of the footer widget below. I did review the How To Customize the Submit Button tutorial (https://wpforms.com/docs/how-to-customize-the-submit-button/), but I don’t see anything about moving it around. What can we do about this?

    Thread Starter Hannah West Design

    (@vesica)

    I should add that it’s a little bit funky on mobile, too. The email field doesn’t line up with the name field. the submit button is fine where it is on mobile, though.

    Plugin Support Ethan Choi

    (@ethanchoi)

    Hi @vesica,

    It looks like you might have the CSS classes wpforms-one-half wpforms-first enabled for the Name field, and the wpforms-one-half class enabled in for the Email field. When using the ‘inline-fields’ method, you can remove those classes from the individual fields.

    You can find these in the form builder when you click on the field to go to its Advanced Options and CSS CLasses field

    Unfortunately it looks like the Invisible reCAPTCHA might be causing the alignment issue with the submit button, and I apologize for my earlier misunderstand.

    To align the Submit button you can disable reCAPTCHA in the form. Alternatively, you could try the following custom CSS:

    #wpforms-form-2335 .wpforms-recaptcha-container {
        clear:none !important;
    }
    
    #wpforms-form-2335 .wpforms-submit {
        margin-top: -10px;
    }
    
    @media only screen and (max-width: 600px) {
        #wpforms-form-2335 .wpforms-submit {
            margin-top: 0;
        }
    }
    

    And in case it helps, here’s a tutorial from WPBeginner on how to add custom CSS like this to your site.

    Hope this helps!

    Thread Starter Hannah West Design

    (@vesica)

    Getting closer. The Submit button didn’t align properly with the fields after disabling ReCaptcha and I really wanted to keep that feature for my client, so I used your alternate css. Submit button is now aligned properly with a -15px top margin, and one can can still click into the fields. When I put a top margin on the form, however, those fields become untappable.

    Still, it’s not looking tight enough for a business site just yet. Could you tell me the css selector for JUST the name/email fields? They need to come down about 20 px or so to align properly with the button — the Submit button’s vertical alignment is good the way it is. If possible, the right edge of the submit button just needs to move to the left about 5px so it won’t be flush with the edge of the page (it looks good on mobile, though). On mobile, the fields need to extend another 5 px to the right to match the button.

    Thanks so much for your help…

    Plugin Support Ethan Choi

    (@ethanchoi)

    Hi @vesica,

    Please try the following CSS snippet:

    #wpforms-2335 .wpforms-form input[type=text] {
        margin-top: 15px !important;
    }
    
    #wpforms-2335 .wpforms-form input[type=email] {
        margin-top: 15px !important;
    }
    
    @media only screen and (max-width: 600px) {
        #wpforms-2335 .wpforms-field {
            padding-right: 0 !important;
        }
    }
    

    Hope this helps!

    Thread Starter Hannah West Design

    (@vesica)

    Thank you Ethan. Adjusting the margin to 17 px lined the fields up with the button beautifully. I’m going to show this to my client and make sure he’s happy with it, and once he approves it I’ll add it to all the other instances where this form should replace the previous one. If he has any worries about the way things line up on mobile devices I’ll be back to ask more questions, and if not I will let you know that, too. So either way, I’ll be back to add at least one more reply.

    Thread Starter Hannah West Design

    (@vesica)

    Hi Ethan, I heard from my client over the weekend and we tested the form. Everything worked fine and he approved the transfer of the new form and settings to the other instances of the previous form. After a little more css adjustment so it looked more like the very refined Elegant Themes Bloom form we had created previously, I’m satisfied too. Thank you so much for your help on this project!!

    Plugin Support Ethan Choi

    (@ethanchoi)

    Hi @vesica,

    Thanks for the update, we’re happy to hear that 🙂

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Can’t enter anything in fields until clicking Submit?’ is closed to new replies.