Forums

[Plugin: Contact Form 7] Newbie Alert -> Form Width + Captcha (6 posts)

  1. artists4freedom
    Member
    Posted 4 months ago #

    Hello all,
    These might be very simple questions but I was trying it on my own and I could not find the solutions:

    1. At http://www.artists4freedom.net we got the Contact Form installed but as you can see the width of the form is too large for the template we are using. Is there any way to change the width and the height of the contact form?

    2. We would really like to use a Captcha system but we just don't know how to implement it. Is there any step by step available so we can do this?

    Many thanks in advance,
    Fernando 4 Artists 4 Freedom

  2. andylemann
    Member
    Posted 4 months ago #

  3. transmutation
    Member
    Posted 4 months ago #

    I am having the form width issue also. http://www.shocfoundation.org In the blog portion, our sidebar is very narrow. Will it be possible to vary the width of the form fields on a form-by-form basis?

    artistsforfreedom, CAPTCHA with contact Form 7 is pretty easy once you see it in action. First, be certain you have the latest version and you have also installed the "Really Simple CAPTCHA" plugin and activiated it.

    1. Open up your form in the dashboard
    2. On the left panel you see the form code.
    3. On the right, you'll see the drop down selector "Generate Tag"
    4. Click it and select CAPTCHA
    5. Leave the name alone
    6. Select the size you want ... this is font size not number of characters. I usually select medium. The smaller your selection the more high-contrast should your following selections be.
    7. Foreground color is the color of the CAPTCHA font. For simplicity, choose FFFFFF (white).
    8. Background color is the color of the rectangle the digits will be in. For simplicity, choose 000000 (black).
    9. I have never used "ID" or "Class", has no functional implications.
    10. I usually add "8" in the "Input Field Settings Size" but you can choose to do nothing al all in this section!
    11. You'll see below the two code snippets. You'll need them in a second, but you need to prepare your form.
    12. Assuming you have your form ready and just need to add CAPTCHA, here's what I add just before the "Submit" function.

    <p>Anti_SPAM Code:<br />
         [captchac captcha-102 size:m fg:#ffffff bg:#000000]<br />
         Input the code displayed.<br />
         [captchar captcha-102 10/12]</p>

    The "captchac" is your first code snippet you've copied from the right side. This is the code for the CAPTCHA image.

    The "captchar" is your second code snippet from the right and is the form field for input.

    13. Save the form and you're done!

    I hope I have helped.

  4. transmutation
    Member
    Posted 4 months ago #

    AHA!

    If you want to modify the width of the form fields its soooo easy ... I don't know why I didn't see it before!

    <p>Your Name (required)<br />
        [text* your-name 25/] </p>

    Notice that I added 25/ after the form field [text* your-name] THAT's how many characters wide I want the field to be!

    So ... if you need the field to be 12 characters wide, add 12/. ... or whatever number you need.

  5. andylemann
    Member
    Posted 4 months ago #

    Transmutation, thanks so much for your attempt to help.

    Unfortunately I am a complete moron when it comes to this stuff. Your second posting seems to be a very simple fix but I don't know where to find the bit of code that you are referring to. I looked in contact-form-7/wp-contact-form-7.php and in contact-form-7/stylesheet.css and a number of the other plugin files that appear on the RHS when you click on edit under Contact Form 7 in the "Manage Plugins" part of the dashboard but I couldn't find the relevant code.

    Sorry to be so stupid but could you please tell me where to find the code
    <p>Your Name (required)
    [text* your-name 25/] </p>
    that I need to add the number of characters to.

    Thanks again

  6. artists4freedom
    Member
    Posted 4 months ago #

    @andylemman: Please go to your Contact Form 7 settings, scroll down and you will see the code.

    We have came up with another solution which is to put the contact form on a page of its own.

    @Transmutation: Thank you so much for your help! You rock!

    Cheers,
    Artists 4 Freedom

Reply

You must log in to post.

About this Topic