[Plugin: Contact Form 7] Newbie Alert -> Form Width Captcha

Hello from another Newbie,

I am having a similar issue with our site

I am looking for a way to change the width and height of just the “Your Message” portion of the Contact Form as it is pushing out past the right hand border of my page.

Thanks also,
Andy

I am having the form width issue also. https://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.

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.

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

@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

unfortuantely changing the width does not work so easily

i have tried both:

[captchar captcha-691 /25]

and

[captchar captcha-691 25/]

and neither one has any effect on the width of the input field

any suggestion?

mikedark is right
I also tried to set the width/size without any effect on the width of the input field. I am running sator-ii theme (see https://www.qualityscopes.de/wordpress/?page_id=17)

The created html looks ok:

<td valign="top" align="right">
<div class="wpcf7" id="wpcf7-f1-p17-o1"><form action="/wordpress/?page_id=17#wpcf7-f1-p17-o1" method="post" class="wpcf7-form">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="1" />
<input type="hidden" name="_wpcf7_version" value="2.0.7" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1-p17-o1" />
</div>
<p>Ihre Name (Pflichtfeld)<br />
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" class="wpcf7-validates-as-required" size="40" maxlength="120" /></span> </p>
<p>Ihre Email (Pflichtfeld)<br />

    <span class="wpcf7-form-control-wrap your-email"><input type="text" name="your-email" value="" class="wpcf7-validates-as-email wpcf7-validates-as-required" size="40" maxlength="120" /></span> </p>
<p>Betreff<br />
    <span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" maxlength="120" /></span> </p>
<p>Ihre Nachricht<br />
    <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="60" rows="10"></textarea></span> </p>
<p><input type="submit" value="Senden" /> <img class="ajax-loader" style="visibility: hidden;" alt="ajax loader" src="https://www.qualityscopes.de/wordpress/wp-content/plugins/contact-form-7/images/ajax-loader.gif" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div>

</td>
</tr>
</table>

But the textfields and textarea are all just about 22 chars wide.

Puzzled,
karsten

As suggested I have used codes for widths similar to the above; eg. [text* your-name 25/]

But I note that these are rendered differently in FF & IE.

Am I alone in noting this?

Is there a fix?

@transmutation:

Thanks for your explanation, couldn’t figure it out until I read your post.

Nice one!