Tagged: ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • January 28, 2014 at 1:06 pm #215749
    yogananda

    Hey

    I’m working on implementing the Contact form 7 plugin and have come across a couple of issues.

    First if anyone else is wondering how to be able to use the column shortcodes (or any other shortcode) in CF7 then just add this line of code to your child theme’s functions.php:
    add_filter( 'wpcf7_form_elements', 'do_shortcode' );

    Now my problem is trying to get the inputfield boxes to span the whole width of the column. Here’s a screenshot.
    Screenshot
    As you can see the “Fornavn” and “Efternavn” boxes do not span the whole column (which is 2x one/half width), more clearly at the bottom “Andet” which is placed in a fullwidth column. The boxes can scale down in width, but not up.
    I’d also like to round the corners of the boxes, so they resemble the Enfold theme’s contactform, but come across another problem.

    Here’s the code added to the “Quick CSS”:

    .wpcf7-form #cf7
{
    height: 40px;
    width: 100%;
    border-radius: 2;
}

    #cf7 is a specific ID set in Contact form 7 so I can target specific inputboxes
    It appears to me that the “width” and “border-radius” are overrided by some other codesnippet, because the only code that is applied is the height.

    How do I addresse the width and border-radius issues ?

    Any suggestions are much welcomed, thanks

    January 28, 2014 at 4:24 pm #215857
    Ismael

    Hey yogananda!

    Can you please give us a link to the actual contact page? You can add this on Quick CSS or custom.css:

    #top input[type="text"] {
max-width: 100%;
min-width: 300px;
}

    Adjust the minimum width value if necessary. Use this one to adjust the border radius:

    #top .avia_ajax_form .text_input, #top .avia_ajax_form .select, #top .avia_ajax_form .text_area {
border-radius: 5px;
}

    Cheers!
    Ismael

    January 28, 2014 at 5:15 pm #215887
    yogananda

    Hey Ismael

    Bravo !!!
    I played around with the code you gave me, which made me realize that I could just add “#top” to the code I had tried to use.
    Here’s what worked:

    #top .wpcf7-form #cf7
{
    height: 40px;
    width: 100%;
    border-radius: 2px;
}

    Here’s a link to the page:
    http://padmayoga.dk/wp/tilmelding/

    Thanks a lot!

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Contact form 7 styling’ is closed to new replies.