WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] Form does not inherit theme's style (5 posts)

  1. lucamjr
    Member
    Posted 1 year ago #

    Hi, I am using CF7 in a wordpress site, and it works perfectly in sending messages, but it did not inherit the theme's styles, so it does not look attractive. In another site of mine, it inherited the style automatically.

    http://drasimonecosta.com.br/?page_id=239 (not functional but looks nice)
    http://drasimonecosta.com.br/?page_id=380 (works, but does not look nice)

    Would you be able to help me? I am not a professional, just having fun building sites for the family, so I would be very glad on any advices.

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

  2. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 1 year ago #

    In the page_id=239 page's form, each input field has a class attribute value "form-input" and your theme's stylesheet applies nice looking style to the "form-input" class. While the page_id=380 page doesn't have such class values.

    To fix this, set "form-input" class option to the Contact Form 7's field tags like this:

    [text* your-name class:form-input]

  3. lucamjr
    Member
    Posted 1 year ago #

    Thank you very much for your fast reply! Although it makes total sense, it did not change the class of page_id=380. The code I get, even after making the suggested changes, is:

    <div class="wpcf7" id="wpcf7-f381-p380-o1">
    <form action="/?page_id=380#wpcf7-f381-p380-o1" method="post" class="wpcf7-form">
    <div style="display: none;">
    <input type="hidden" name="_wpcf7" value="381" />
    <input type="hidden" name="_wpcf7_version" value="3.3.3" />
    <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f381-p380-o1" />
    <input type="hidden" name="_wpnonce" value="107e5c366e" />
    </div>
    <p><strong> Nome </strong>(obrigatório)
        <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" /></span> </p>
    <p><strong>Email </strong>(obrigatório)
        <span class="wpcf7-form-control-wrap your-email"><input type="text" name="your-email" value="" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" size="40" /></span> </p>
    <p><strong>Assunto </strong>(opcional)
        <span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" class="wpcf7-form-control wpcf7-text" size="40" /></span> </p>
    <p><strong>Mensagem </strong>(obrigatório)
        <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" class="wpcf7-form-control  wpcf7-textarea" cols="40" rows="10"></textarea></span> </p>
    <p><input type="submit" value="Enviar" class="wpcf7-form-control  wpcf7-submit" /></p>
    <div class="wpcf7-response-output wpcf7-display-none"></div>
    </form>
    </div>

    [Please post code or markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum's parser.]

    Could I change this class calues directly in the plugin code? Would it be advisable and allowed? If so, which file should I look for?

    Once again, thank you.

  4. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 1 year ago #

    What tag exactly do you use? It shouldn't be such output.

    Could I change this class calues directly in the plugin code? Would it be advisable and allowed? If so, which file should I look for?

    No. Do not edit plugin's code. It is always bad idea.

  5. lucamjr
    Member
    Posted 1 year ago #

    Thank you.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic