Design Cloud - Contact Form 1 issue

[skated]

Hi,

I installed the Contact Form 1 content from your Design Cloud on my website (https://giacomodenanni.it/contatti)and all seemed working well. I tried doing some customization using CSS, and everything seemed also going well. Suddenly I realize that what I was seeing in Pro wasn’t the same was showed on browser.
This is from Pro:

This is from a browser:

I tried deleting all the added CSS, but nothing changes. I don’t know what to do.
I insert credentials in secure note, so you can take a closer look.
Can you help me. please?

Thanks a lot!

[ruenel]

Hello Giacomo,

Thanks for posting in! I have investigated the issue and it is caused by your modifications of the contact form. You have added this:

<div class="row two-cols">
     <div class="col">[text* first-name placeholder "Nome *"]</div>
     <div class="col">[text* last-name  placeholder "Cognome *"]</div>
</div>
<div class="row two-cols">
     <div class="col">[email* email placeholder "Email *"]</div>
     <div class="col">[tel phone  placeholder "Telefono"]</div>
</div>
<div class="row one-col">
     <div class="col">[textarea* message placeholder "Messaggio *"]</div>
</div>
<div class="row one-col">
     <div class="col wpgdprc-themeco">[wpgdprc "Utilizzando questo modulo accetti la memorizzazione e la gestione dei tuoi dati da questo sito web."]</div>
<div class="row one-col">
     <div class="col">[submit "Invia"]</div>
</div>

The correct one should be this:

<div class="row two-cols">
     <div class="col">[text* first-name placeholder "Nome *"]</div>
     <div class="col">[text* last-name  placeholder "Cognome *"]</div>
</div>
<div class="row two-cols">
     <div class="col">[email* email placeholder "Email *"]</div>
     <div class="col">[tel phone  placeholder "Telefono"]</div>
</div>
<div class="row one-col">
     <div class="col">[textarea* message placeholder "Messaggio *"]</div>
</div>
<div class="row one-col">
     <div class="col wpgdprc-themeco">[wpgdprc "Utilizzando questo modulo accetti la memorizzazione e la gestione dei tuoi dati da questo sito web."]</div>
</div>
<div class="row one-col">
     <div class="col">[submit "Invia"]</div>
</div>

The error? You have a missing </div> in the code above. Please have it updated and test the page again.

We would love to know if this has worked for you. Thank you.

[skated]

Thank you very much!! It was so easy…

One last question: I installed the Contact Form 1, and saw your video on youtube about it (https://youtu.be/XfHWymmWMoI). In the video there’s a link to github with the code used in the video. Html code worked in creating the form, but css code added to the page didn’t had any effect. Can you eplain me why? Maybe the installation of Contact Form 1 included some css code in itself. But where is it added?
It’s just some curiosity of mine…

Thanks!!

[christian]

Hey Giacomo,

If you import a Design Cloud Template, the custom CSS is added with the import so you don’t need to add them manually unless you wish the CSS to apply globally in which case, you add the CSS in Theme Options > CSS.

For the case of the Contact Form 1 template, the custom CSS is in the Section’s Element CSS.

I checked your page though and the CSS is working so the reason why it’s not working on your end could be cache. Please clear your browser’s cache and check again. Also, check in incognito mode and other browsers.

Hope that helps.

[skated]

Yes, it totally helps! Everything is working now.
Thanks!!

[marc_a]

Hi Giacomo,

You’re welcome and it’s our pleasure to help you. If you have any other concerns, feel free to reach us.

Thank you.