Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #754644

    I’m trying to style Contact Form 7 like Enfold contact forms – using Enfold styles.
    I saw a thread here:
    https://kriesi.at/support/topic/styling-contact-form-7-as-enfold-contact-form/

    Looks great when I do it but adding <div class=”avia_ajax_form”> as a wrapper around the form breaks the submit button.
    Any idea if there is a workaround for this? Looking to do a two column form. Yes, could code by hand but thought I’d use Enfold styles cuz they are there.

    Thanks

    #755350

    I solved this.

    For anyone trying to do a 2 column (or more) Contact Form 7 using Enfold styles, the solution provided here: https://kriesi.at/support/topic/styling-contact-form-7-as-enfold-contact-form/ may cause issues with form submission. I used the solution above and it looked great but the form submit stopped working.

    Here is a solution that doesn’t break the submit button. Use Enfold flex column styles. If you inspect the column classes by viewing source of: http://kriesi.at/themes/enfold/shortcodes/columns/ , you’ll see the classes needed.

    I applied these classes to make a 2-column Contact Form 7 form:

    <!–left–>
    <div class=”flex_column av_one_half flex_column_div first”>Your Name (required)<br />
    [text* Name placeholder “Your Name”]
    </div>
    <!–right–>
    <div class=”flex_column av_one_half flex_column_div”>Your Email (required)<br />
    [email* SenderEmail placeholder “Your Email”]
    </div>

    <!–left–>
    <div class=”flex_column av_one_half flex_column_div first”><label> Area Code + Phone Number (required)<br />
    [text* Phone placeholder “Area Code and Phone Number”] </label>
    </div>
    <!–right–>
    <div class=”flex_column av_one_half flex_column_div”>Skype Name (If you prefer support via Skype)<br />
    [text Skype placeholder “Skype Name”]</div>

    <!–left–>
    <div class=”flex_column av_one_half flex_column_div first”>Preferred date (Monday-Friday)<br />
    [date* Date placeholder “date”]</label></div>
    <!–right–>
    <div class=”flex_column av_one_half flex_column_div”>Preferred time (Please state a time from 9 a.m. – 5 p.m. PST)<br />
    [text* Time placeholder “Preferred time”]
    </div>

    [submit “Send”]

    #755353

    Hey!

    Thank you very much for updating the topic with the solution, we really appreciate it!
    Please feel free to let us know if there is anything else we can do for you.

    Thanks a lot

    Cheers!
    Basilis

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Styling Contact Form 7 like Enfold Contact forms’ is closed to new replies.