Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • January 17, 2018 at 6:34 pm #898606
    steviger

    Hi,

    For this website I use Contact Form 7 in combination with the layout Avia short codes like for example:
    [av_one_fourth first]<label>Aanhef*[select* aanhef "Kies hier" "Dhr." "Mevr."]</label>[/av_one_fourth][av_three_fourth]<label> Naam*[text* naam]</label>[/av_three_fourth]
    This used to work flawless but recently I found out that it shows the actual code in the webpage and doesn’t style the forms anymore.
    Please have a look here: http://www.studijob.nl/ik-zoek-een-baan/inschrijven-als-uitzendkracht/

    I tried make a form from scratch but the problem persist. Any ideas on how to fix this? All plugins, themes and WP are up to date.

    Best regards,

    Steven

    January 18, 2018 at 11:16 am #899029
    Rikard

    Hey Steven,

    Did you try to use the shortcode you are given by CF7 instead?

    Best regards,
    Rikard

    January 18, 2018 at 12:21 pm #899089
    steviger

    Hi Rikard,

    The code as mentioned in my previous post, is the code I use in the CF editor. To display the form I use the shortcode in an avia text block. Something like: [contact-form-7 id=”193″ title=”Inschrijfformulier uitzendkracht”]

    Or do you mean something else?

    Regards,

    Steven

    January 19, 2018 at 5:39 am #899484
    Rikard

    Hi Steven,

    Thanks for the feedback. Please send us a temporary admin login and login URL so that we can have a closer look. You can post the details in the Private Content section of your reply.

    Best regards,
    Rikard

    January 19, 2018 at 12:17 pm #899631
    steviger

    Hi Rikard,

    Here you go!

    Cheers,

    Steven

    January 21, 2018 at 4:46 am #900254
    Rikard

    Hi,

    Thanks for that, I’m not sure why it’s displaying the shortcode like that. But maybe you could try to replace it with actual markup instead? For instance, the first shortcode:

    [av_one_fourth first]<label>Aanhef*[select* aanhef "Kies hier" "Dhr." "Mevr."]</label>[/av_one_fourth]

    Would be replaced by this:

    <div class="av_one_fourth first"><label>Aanhef*[select* aanhef "Kies hier" "Dhr." "Mevr."]</label></div>

    Best regards,
    Rikard

    • This reply was modified 6 years, 12 months ago by Rikard.
    January 24, 2018 at 1:28 pm #902126
    steviger

    Hi Rikard,

    Thanks for you reply. With your solution, I got rid of the unwanted codes displayed. However, now the whole layout is a mess.
    As you can see in de code, most fields should be next to each other : 1/3 2/3,1/2 1/2 etc.
    It seems to me that CF 7 is not completely compatible with the latest version of Enfold, could that be the case? It just happend see.

    Best regards,

    Steven

    January 27, 2018 at 12:31 am #903589
    Basilis

    Hi,

    No that is not the case, CF7 is compatible by dafault and it is not generating any code

    Best regards,
    Basilis

    January 30, 2018 at 2:15 pm #904896
    steviger

    Hi,
    In the meantime I tried to make an completely new form and page. The problems stilll persist. Any help is much appreciated ;)

    Regards,

    Steven

    January 31, 2018 at 7:46 pm #905728
    Basilis

    Hi,

    Not sure why, but I checked your form and it has some html inside, which is also triggering the

    div .av_three_fourth
    element, which has padding, so everything goes below.
    I think if you remove the sidebar at that page, everything should show properly.

    Best regards,
    Basilis

    February 1, 2018 at 2:48 pm #906301
    steviger

    Hi Basilis,

    I really have no clue why the issue with CF7 is is happening. It happens to occur on other websites as well. We didn’t change anything exept updating the theme and WP.

    February 2, 2018 at 12:02 pm #906809
    Ismael

    Hi,

    You should replace the shortcode with the actual column markup as Rikard suggested. Is this form working properly?

    
<div class="av_one_fourth first"><label>Aanhef*[select* aanhef "Kies hier" "Dhr." "Mevr."]</label></div>
<div class="av_three_fourth"><label> Naam*[text* naam]</label></div>
<div class="av_one_half first"><label> Adres*[text* adres]</label></div>
<div class="av_one_half"><label> Postcode*[text* postcode]</label></div>
<div class="av_one_half first"><label> Woonplaats*[text* woonplaats]</label></div>
<div class="av_one_half"><label> Telefoon[tel* telefoon minlength:10 maxlength:14]</label></div>
<div class="av_one_half first"><label> E-mail*[email* email]</label></div>
<div class="av_one_half"><label> Geboortedatum*[text* geboortedatum placeholder "dd-mm-jjjj"]</label></div>
<div class="av_one_third first"><label> Nationaliteit*[text* nationaliteit]</label></div>
<div class="av_two_third"><label> Opleiding*[text* opleiding]</label></div>
<div class="av_one_third first"><label> Uren beschikbaar per week*[text* beschikbaarheid placeholder "minimaal 16 uur per week"]</label></div>
<div class="av_two_third"><label> Functiewensen*[textarea functiewensen x2 ]</label></div>
<label>Eventuele opmerking(en)[textarea opmerking x3]</label>
<label>Upload je CV (.docx, .doc of .pdf. Max grootte 1 Mb) [file uploadcv limit:1mb filetypes:docx|doc|pdf]</label>
[submit "Verzenden"]

    Best regards,
    Ismael

    February 2, 2018 at 3:07 pm #906860
    steviger

    Hi Ismael,

    Thanks for you reply. With your (and Rikard’s) solution, I got rid of the unwanted codes displayed. However, as I mentioned earlier, now the whole layout is a mess.
    As you can see in de code, most fields should be next to each other : 1/3 2/3,1/2 1/2 etc.

    Regards,

    Steven

    February 4, 2018 at 10:15 pm #907591
    Basilis

    Hi,

    Using so much HTML to the page, yes it can make it a mess we are afraid…

    Best regards,
    Basilis

    February 7, 2018 at 4:00 pm #909234
    steviger

    Hi guys,

    I ended up with this solution from 2015: https://kriesi.at/support/topic/styling-contact-form-7-as-enfold-contact-form/

    Regards,

    Steven

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘[SOLVED] Avia layout elements not working with Contact Form 7’ is closed to new replies.