[Resolved] Formatting Contact Forms

[Mary Pearson]

Hi Tom,

I’m writing about the Contact Form page at http://tooleyspainting.com/contact-us/ The formatting of the Captcha is not right. This contact form is contained within TablePress.

I have tried the Contact Form out of Tablepress and have the same issues so I deleted that from the equation.

Prior to trying this Contact Form (Fast Secure Contact Form) I tried Contact 7 Form, Ninja Contact Form, and BestWebSoft Contact Form. All had formatting problems that varied, but bottom line, I gave up on each one, but only after exhaustively trying, unsuccessfully, to format them using Custom CSS. Fast Secure Contact Form uses either Custom CSS or you can change within their plugin. I have tried both.

I decided to stick with this one and get to the root of the problem. I disabled all plugins and still had the same problem.

Finally I tried theme Twenty-Ten and it works there. I can only assume that there is something preventing the proper formatting of these Contact Form plugins within the GeneratePress theme.

Can you help?
Many thanks!

[Tom]

The HTML structure of it is super messy – do they let you alter it at all?

In my experience Contact Form 7 is best for altering the HTML, and Ninja Forms is the best for easy usage.

[Mary Pearson]

Yes, you can alter within their app or you can do Custom CSS but you can’t have both at the same time.

I tried Contact 7 before and had problems with it too. Perhaps I’ll try it again.

Thanks Tom.

[Tom]

The reason I like CF7 is you can set up the HTML structure however you like – so you can use the grid system.

Let me know if you need more info 🙂

[Mary Pearson]

I remember now why I don’t use Contact 7 form. I can never get the CAPTCHA image and input box to line up vertically. One is always higher than the other. I’ve added vertical-align: bottom; to both but I still have a problem.

Can you tell me what I’m doing wrong?

Page is http://tooleyspainting.com/contact-us/

Many thanks!

[Tom]

Hmm, that captcha image wasn’t even showing up for me.

Google has an awesome captcha alternative that is gaining popularity – these guys released a plugin for it: https://wordpress.org/plugins/contact-form-7-simple-recaptcha/

Much easier on the user than having to solve an image – might be worth checking out.

[Mary Pearson]

Thanks Tom. I checked it out and am so confused by the instructions re client side integration and server side integration that I think I’ll look for another option.

[Tom]

Looking into it, Ninja Forms has Google reCAPTCHA built in, you just have to add it to the form.

Might be your best bet.

[bdbrown]

Hi Mary. One approach you might consider is to first get your contact page formatted without using TablePress. I see what your’re trying to accomplish with dividing the page using a table. But it might be easier to work with only the contact form layout first, and then incorporate the image on the page. And, you may not even need TablePress. The form fields and image can probably be positioned using css. Just a thought.

[Mary Pearson]

Thanks bd. Yes I’ve done that. Contact Us form is good. It’s just the captcha that I’m having trouble with.

[bdbrown]

I just added CF7 and Really Simple CAPTCHA to my test site. Used the default form layout and added the CAPTCHA above the Send button. It stacks the image and input boxes as expected. One thing I noticed is that your configuration has non-breaking space tags between the image and the input box:

<p>
<input type="hidden" name="_wpcf7_captcha_challenge_captcha-118" value="2323903536"><img class="wpcf7-form-control wpcf7-captchac wpcf7-captcha-captcha-118" width="84" height="28" alt="captcha" src="http://tooleyspainting.com/tooleys-content/uploads/wpcf7_captcha/2323903536.png">
&nbsp;&nbsp;
<span class="wpcf7-form-control-wrap captcha-118"><input type="text" name="captcha-118" value="" size="4" maxlength="4" class="wpcf7-form-control wpcf7-captchar" aria-invalid="false" data-cip-id="cIPJQ342845642"></span>
</p>

The default form doesn’t include these, but has a <br> tag at that point instead. When I replaced the nbsp tags with the <br> tag on your site, the controls stacked vertically.

I’m also seeing this error:

http://tooleyspainting.com/tooleys-content/uploads/wpcf7_captcha/2323903536.png 404 (Not Found)

[Mary Pearson]

Yes, you are exactly right. It looks fine if I want to stack the boxes vertically. It’s just that I really would prefer them horizontal but what the heck, I think I’m just going to have to let it go. I’m wasting too much time on it.

I get my mind made up to make things look a certain way and it takes a lot for me to give in. LOL

Thanks also re the error. I’ll look into it.

[Mary Pearson]

Thanks Tom for the suggestion of Ninja. I had tried it too.

I think I’ll just do as bd has reminded me, and just let the boxes be vertical instead of horizontal.

[Tom]

Sometimes simple is better 🙂

Thanks for the help bdbrown!

[Mary Pearson]

Yes, I’m just a little bit stubborn. I always figure there’s a way and I need to find it. 😉

[Author]

Posts