WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] Make fields shorter (13 posts)

  1. tribeka
    Member
    Posted 2 years ago #

    Hi there

    I'd like to make the name, email address, etc field shorter as they currently run off the page:

    http://www.publicspeakinginlondon.com/

    Can you please tell me what file the code is on to change this.

    Many thanks

    James

    http://wordpress.org/extend/plugins/contact-form-7/

  2. Maruti Mohanty
    Member
    Posted 2 years ago #

    Can you please try the below in the respective contact form from the wp-admin and let me know if this works?

    <p> Your Email:<br/>[email* your-email] *</p>
    <p>Your Question?<br/>[textarea textarea-1]</p>
    <p>[submit "Submit"]</p>
  3. tribeka
    Member
    Posted 2 years ago #

    Thanks for your reply. There are loads of files associated with this plugin. Do you which of the files below I should be editing?

    contact-form-7/wp-contact-form-7.php
    contact-form-7/readme.txt
    contact-form-7/styles-rtl.css
    contact-form-7/uninstall.php
    contact-form-7/admin/taggenerator.js
    contact-form-7/admin/admin.php
    contact-form-7/admin/styles-rtl.css
    contact-form-7/admin/scripts.js
    contact-form-7/admin/edit.php
    contact-form-7/admin/styles.css
    contact-form-7/includes/shortcodes.php
    contact-form-7/includes/functions.php
    contact-form-7/includes/taggenerator.php
    contact-form-7/includes/pipe.php
    contact-form-7/includes/formatting.php
    contact-form-7/includes/controller.php
    contact-form-7/includes/classes.php
    contact-form-7/languages/readme.txt
    contact-form-7/settings.php
    contact-form-7/license.txt
    contact-form-7/scripts.js
    contact-form-7/jquery.form.js
    contact-form-7/styles.css
    contact-form-7/modules/captcha.php
    contact-form-7/modules/submit.php
    contact-form-7/modules/select.php
    contact-form-7/modules/text.php
    contact-form-7/modules/acceptance.php
    contact-form-7/modules/checkbox.php
    contact-form-7/modules/file.php
    contact-form-7/modules/response.php
    contact-form-7/modules/special-mail-tags.php
    contact-form-7/modules/akismet.php
    contact-form-7/modules/quiz.php
    contact-form-7/modules/textarea.php

    Thanks

    James

  4. esmi
    Forum Moderator
    Posted 2 years ago #

    Try editing your theme's stylesheet.

  5. tribeka
    Member
    Posted 2 years ago #

    Thanks, Esmi. Since this is a plug-in, it is not using styles from my themes .css.

    The php generated mark-up looks like this:

    <span class="wpcf7-form-control-wrap your-email">
    <input class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" type="text" size="40" value="" name="your-email">
    </span>

    and it's the "size" attribute I need to change but I don't know where as I can't read PHP.

    Thanks

    James

  6. esmi
    Forum Moderator
    Posted 2 years ago #

    Since this is a plug-in, it is not using styles from my themes .css.

    Oh yes it is. If necessary, you need to add CF7 specific CSS to your theme's stylesheet. Try using Firefox with the Firebug add-on for this kind of CSS work.
    http://getfirebug.com/

  7. tribeka
    Member
    Posted 2 years ago #

    Hi Esmi

    That was the first thing I tried. It seems that the width attribute is hardcoded into the code using the 'size' attribute I mentioned above. I have been unable to override this using CSS.

    Thanks

    James

  8. esmi
    Forum Moderator
    Posted 2 years ago #

    Now try adding:

    #sidebar textarea {
        width: 260px;
    }

    ;-)

  9. tribeka
    Member
    Posted 2 years ago #

    Hi Esmi

    That didn't work but when I tweaked it to:

    #wpcf7-f886-w1-o1 textarea {
    width: 260px;
    }

    it did :-)

    So thank you. Do you know how I would target the email field to make it shorter also?

    Thanks

    James

  10. esmi
    Forum Moderator
    Posted 2 years ago #

    Try #wpcf7-f886-w1-o1 input[type="text"]

  11. tribeka
    Member
    Posted 2 years ago #

    Wow. That did it. Thanks so much.

    James

  12. esmi
    Forum Moderator
    Posted 2 years ago #

    You're welcome :-)

  13. massullomusic
    Member
    Posted 2 years ago #

    I am having a similar problem with the form on my wordpress site as well. I would like to restrict all of the fields to 190px but I don't really know how to adapt the code snippets here to apply to my particular situation. I am a more of a beginner so I might need some more specific instructions on how to make the changes. The site is here if you need to look:

    http://massullomusic.com/

    Thanks.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic