[Resolved] Formatting Contact Forms

Home Forums Support Formatting Contact Forms

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #124377
    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!

    #124477
    Tom
    Lead Developer
    Lead 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.

    #124568
    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.

    #124605
    Tom
    Lead Developer
    Lead 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 🙂

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

    #124764
    Tom
    Lead Developer
    Lead 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.

    #124920
    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.

    #124944
    Tom
    Lead Developer
    Lead Developer

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

    Might be your best bet.

    #124970
    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.

    #124971
    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.

    #124980
    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)

    #124981
    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.

    #124982
    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.

    #124996
    Tom
    Lead Developer
    Lead Developer

    Sometimes simple is better 🙂

    Thanks for the help bdbrown!

    #125005
    Mary Pearson

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

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.