Formatting Contact Forms

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.

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.

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 :)

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!

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.

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.

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

Might be your best bet.

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.

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

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)

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.

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.

Sometimes simple is better :)

Thanks for the help bdbrown!

Yes, I'm just a little bit stubborn. I always figure there's a way and I need to find it. ;-)