Forums

Contact Form 7
Redirect & Change Button Color (8 posts)

  1. michaelborger
    Member
    Posted 5 months ago #

    Hello. I just want to do two things with my form:

    1) Send to a 'thank you' page or the homepage after form submission

    2) Change the blue background of the "Send" button to another color. I don't know which plugin file has the color code for the button.

    Can someone please show me where/how to do these? Many thanks.

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

  2. kremisoski
    Member
    Posted 5 months ago #

    For redirecting to another page follow the advice on this page and make sure you have the following in your page template:

    <?php wp_footer(); ?>

    http://contactform7.com/blog/2010/03/27/redirecting-to-another-url-after-submissions/

    For styling the send button:

    [submit class:button id:form-submit "Send Mail"]

    You can choose whether you want it to be an id or class to style. Hope this helps.

  3. michaelborger
    Member
    Posted 5 months ago #

    Thanks for the link.

    Regarding the Send button, I'm not too up to speed on id's and classes just yet. I don't know how to establish a class or id elsewhere in the CSS to call to it from the [send]. Or at least I don't know -- yet. Isn't there just a line in one of the plugin files that has the appropriate color hex code that I can change? That would be easiest for me right now.

  4. kremisoski
    Member
    Posted 5 months ago #

    go to the contact settings in the left sidebar. edit your contact form's submit button as indicated above and just put class:button

    open up styles.css and add the following somewhere:


    .button {background-color:red;}

    You can substitute red for a hexidecimal color such as #FF0000 (which is also red but just an example).

  5. kremisoski
    Member
    Posted 5 months ago #

    don't forget the dot before button. :)

  6. michaelborger
    Member
    Posted 5 months ago #

    Ok thanks, but I must be doing something wrong. Here's the very end of my style.css:

    /*Changing Background Color of Send Button for Contact7 Plugin*/
    .button {background-color:red;}

    My form has this for the Send button line:

    <p>[submit class:button "Send"]

    .... ?

  7. karllkk
    Member
    Posted 5 months ago #

    Hey kremisoki, do you happen to know where to change the html structure of the wpcf7 form? For example, currently it is using <span> for each individual fields and i would like to use

  8. . The reason behind is that I already have a css theme with full css, all i need is to customize wpcf7 into the theme.
  • michaelborger
    Member
    Posted 5 months ago #

    Still having trouble.

    In the contact form itself, I have:

    <p>[submit class:buttonct "Send"]

    In the style.css, I have:

    /*Changing Background Color of Send Button for Contact7 Plugin*/
    .buttonct {
    background-color:#d60000;
    }

    URL is:
    http://bigrockinvestments.com/sell-your-house-in-hawaii/

    What am I doing wrong?

  • Reply

    You must log in to post.

    About this Plugin

    About this Topic

    Tags