WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] designing the form (15 posts)

  1. kapara
    Member
    Posted 2 years ago #

    hi

    i'd like to change the html of the form, for example put all fields of the form on one long line.
    which file holds the html for the form? how do i do that ?

    thank you very much

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

  2. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 2 years ago #

    You don't need to edit any files of the plugin. Instead, simply put tags on a line without line breaks. Like this:

    [text text-1] [text text-2] [text text-3] ...

  3. kapara
    Member
    Posted 2 years ago #

    great, thanks

  4. kapara
    Member
    Posted 2 years ago #

    one more point,
    how can i add label above each field? (name, email etc.)

    thanks

  5. kapara
    Member
    Posted 2 years ago #

    i see i can add <table> ..... </table>.
    it solves everything. i can play with the table.
    is it ok?

  6. renessac
    Member
    Posted 1 year ago #

    HI thereā€”I was hoping to find info on what file to use to change the visual design of the form (move the Message text field next to the other fields so it's not one long vertical form; change background colors). Can you let me know? Thank you!!

    http://vibrancycom.com/wordpress/contact/
    (password protected: vibrancy0104)

    P.S. I assume I should use a child theme?

  7. @renessac Instead of bringing back this 8 month old thread, please start your own.

    http://wordpress.org/support/plugin/contact-form-7#postform

  8. kapara
    Member
    Posted 1 year ago #

    hi

    you can easily design the form using html.

    see this code:

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]

    <table>
    
    <tr>
    <td>name</td>
    <td>email</td>
    <td>comment</td>
    </tr>
    
    <tr>
    <td>[text your-name 12/]</td>
    <td>[email your-email 12/]</td>
    <td>[textarea your-message 12x3]</td>
    </tr>
    
    </table>

    and have a look at the result: http://www.u-tees.me/contact-demo/.

    the site is not ready and the form is not complete.
    just to demonstrate.

    by the way, the 12/ means the input field will be 12 characters wide.
    the 12x3 means it will be 12 charcters wide and 3 lines high.

    hth. it's really an amazing plugin.

    thanks

    lenny

  9. renessac
    Member
    Posted 1 year ago #

    Thanks Lenny, where do I put this code, which file in the editor?

    Thank you!

    renessa

  10. kapara
    Member
    Posted 1 year ago #

    hi

    it's not in the editor.
    this is the way you build the form in the "setting" of the plugin.

    when in general admin of your site, you click on "plugins" and see list of plugins.

    Under "contact form 7" you have acivate | deactivate | settings.
    click on settings.

    here you build the form using what i showed you.

    When you finish, (click save), at the top of the page you'll see the shortcode of this form, it looks something like this: [contact-form-7 id="136" title="Contact form 1"].

    copy it and then paste it where you want it to appear on your page.
    you can also add it as a widget to the sidebar.

    if it is a little bit too much for you, you might spend hours to understand how it works. don't do it.

    if you really want to learn it - search the support, this plugin has amazing support, or look at youtube, or hire a wordpress programmer. for him it will be a joke, he will do it in half a minute.

    any how have fun

    lenny

  11. kapara
    Member
    Posted 1 year ago #

    by the way, i now notice that 8 months ago i started this thread and asked how to do it.

    8 months later i explain how to do it ...

    circle of life, i learned, now i help others
    (:

    thanks

    lenny

  12. magpiwo
    Member
    Posted 1 year ago #

    Hello,

    I have an issue with titles not aligning to the input area. I have created a table with title on the left and input area on the right. It all looks good, except where text area or multiple drop-down selections menu are, the title is on the bottom of a cell and not on the center like I intend. How do I go about fixing it? I tried inserting div tage with align center, but nothing seem to be working. I would absolutely appreciate your help!

  13. kapara
    Member
    Posted 1 year ago #

    i can't be sure but it seems as if your theme has css settings that conflicts with your settings, and it wins ...

    for exsample, if the css is align to right and you try to do align to left, it won't work, you have to find the way to override the css settings

    thanks

    lenny

  14. renessac
    Member
    Posted 1 year ago #

    Thanks for your help Lenny!

  15. kapara
    Member
    Posted 1 year ago #

    you're welcome
    (:

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic