Can’t enter anything in fields until clicking Submit?

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!

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…

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?

• This reply was modified 4 years, 7 months ago by Hannah West Design.

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.

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!

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…

• This reply was modified 4 years, 7 months ago by Hannah West Design.

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!

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.

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!!

Hi @vesica,

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