Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 6, 2015 at 7:28 pm #440595
    nontrepreneur

    Hi, I would like to apply the theme’s contact form styles to my own form. I tried to replicate the structure and classes and added it to my own form but when I click the submit button, the button gets animated but the form isn’t sent. I guess there is some kind of JavaScript applied to the classes. However how can I use the styles on my own form?

    May 7, 2015 at 5:32 pm #441113
    Elliott

    Hi nontrepreneur!

    It would be best to just copy the CSS. You can find the CSS starting around line 1327 in /enfold/css/shortcodes.css.

    Cheers!
    Elliott

    May 11, 2015 at 7:14 pm #442645
    nontrepreneur
    This reply has been marked as private.
    May 12, 2015 at 5:03 pm #443158
    Elliott

    Hi!

    Did you edit the HTML classes / IDs? If so then that’s probably why it’s not working. You’ll need to target the existing contact form 7 classes and IDs with CSS and not change any of the markup.

    Best regards,
    Elliott

    • This reply was modified 9 years, 7 months ago by Elliott.
    July 22, 2015 at 6:47 pm #477265
    el_sam

    Hey Elliott,

    i have the same Issue. I have combined the enfold contact and the contact form7 contact field but want both to behave and look the same (no error messages, but these red borders when field is not filled. Is there a way to apply not only the style but also the behaviour?

    Thanks for the help!

    Best regards,
    Sam

    July 23, 2015 at 2:58 pm #477747
    Elliott

    Hi!

    It doesn’t look like you will be able to get the red borders without lots of customization. You can style the existing error elements that it inserts into the forms though.

    Maybe something like this.

    .wpcf7-not-valid-tip {
  width: 100%;
  position: absolute;
  top: -12px;
  left: 0px;
  border: 1px solid red;
}

    Cheers!
    Elliott

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.