- This topic has 14 replies, 3 voices, and was last updated 5 years, 12 months ago by Mary Pearson.
July 28, 2015 at 11:38 am #124377Mary Pearson
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!July 28, 2015 at 11:40 pm #124477TomLead DeveloperLead Developer
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.July 29, 2015 at 7:43 am #124568Mary 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.July 29, 2015 at 9:26 am #124605TomLead DeveloperLead Developer
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 🙂July 29, 2015 at 8:54 pm #124737Mary 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?
Many thanks!July 29, 2015 at 11:55 pm #124764TomLead DeveloperLead Developer
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.July 30, 2015 at 9:37 am #124920Mary 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.July 30, 2015 at 10:51 am #124944TomLead DeveloperLead DeveloperJuly 30, 2015 at 12:23 pm #124970bdbrown
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.July 30, 2015 at 12:36 pm #124971Mary Pearson
Thanks bd. Yes I’ve done that. Contact Us form is good. It’s just the captcha that I’m having trouble with.July 30, 2015 at 1:01 pm #124980bdbrown
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"> <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:July 30, 2015 at 1:13 pm #124981Mary 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.July 30, 2015 at 1:15 pm #124982Mary 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.July 30, 2015 at 1:42 pm #124996TomLead DeveloperLead DeveloperJuly 30, 2015 at 2:12 pm #125005Mary Pearson
Yes, I’m just a little bit stubborn. I always figure there’s a way and I need to find it. 😉
- You must be logged in to reply to this topic.