Contact Form 7 Tutorial
Share
Tweet
Share
Pin
Learn step by step how to create simple and advanced forms on your wordpress website using Contact form 7. I will show you how to place a form on your website in minutes and how to create an advanced form from scratch.
We will talk about setting up the contact form message that you receive when someone submits their form and how to create a confirmation email for the person that submits the form.
After that I show you how to enable Google ReCaptcha so spammers can not misuse the form. After that I show you how to style the form with a free tool and how to style the form with a paid tool.
Last but not least I show you how to copy and past your form and the settings to a different WordPress website.
Hide the ReCaptcha Logo
.grecaptcha-badge{
visibility: collapse !important;
}
Share
Tweet
Share
Pin
hello fredy
are you putting the scripts ready when you record your video? Do you face any difficulty when record the video with long period with all remember steps? I wish i could learn from you and do you provide coarching?
Hi, I practise a lot and create notes on my notes app. I use my phone, tablet or second screen to check if I cover everything I see in the notes. I make a lot of errors in my recording and cut those out. This video can help you: https://www.youtube.com/watch?v=aaDvlBMqf4k
Hello Fredy,
I must say I love your tutorials they are so helpful and clear, I do have something that I would like to know if you can help me with if this is you then please contact me on bmasters150665@gmail.com, I say this as there are other people that I think are impersonating you on line I hope to hear from you soon.
Regards
Brett
You are a good talented teacher. God bless
I have contact for 7 plugin and contact form 7 Dropbox add on. But Its not showing drop box anywhere. I did put the API key in the settings.
Hi Ferdy,
I must say that you are an amazing teacher. Thanks for sharing your knowledge with us.
I would like to ask a question, I have a contact form with a space for visitors to the site to upload files, (scanned pictures or documents). To View the document or picture I have to login to the back end of WP and download it. Is there any other way I can retrieve the document or picture without logging in to the back end?
Thank you
hello ferdy,
Is there a way i can edit my header and footer using elementor
Hi Damiliola, yes, you need Elementor Pro to do that.
Excellent you teach very clearly and properly…
love from Pakistan
Hi Ferdy,
I added the contact form to my site without any problems. I filled out the information to submit a trial form to try the form I added, but whatever I do, every time I try “There was an error sending your message. Please try again later.
“I get the answer. Please help.
Your lectures are very helpful and easy to understand. I would like to ask a question. I have a contact form.Kindly guide me, how I restrict phone no in international format(+1 447-474-4200) in Divi Theme.
Hi Ferdy,
How we can validate if mobile number field would allow only in number an and 10 digits.
Hello Ferdy,
Great job… but does not work with email from gmail…
have you some advice about this problem ?
Looooove your humour iro the hot male models and the vip message from Nigeria!
Hi Ferdy,
As a very green student, I am enjoying your youtube videos immensely.
Would you please answer two questions regarding WooCommerce/WordPress?
1. Why do you not use the Accounts Page when setting up your store? (Why do you delete it after you create all the pages?)
2. How do I fix the glitch with the Attribute Name on the Product Page? In other words, after I create the Attribute Name and I can see it in the dashboard, why does it not appear on the website page?
Die css code die ik plak werkt niet of laat het grecaptcha logo niet verdwijnen of is dat alleen bij de pro versie
Hi Ferdy.
Once more, an excellent video! And very helpful…
About Terms and Disclaimers, what do you use to generate them?
Any suggestion?
Thank you.
And keep up the good work.
Pett
Hi Ferdy,
I have successfully created a contact form with Contact Form 7, however the email that is sent has “Worpdress” as the sender instead of the site name. This automatically ends up in the spam box. Is there any way to fix this?
Hey,
I see website and it’s impressive. I wonder if the content or banners advertising options available on your site?
What will be the price if we would like to put an article on your site?
Note: Article must not be any text like sponsored or advertise or like that
Cheers
Devin Kench
Ik heb een website gemaakt met behulp van je tutorial. Maar heb een probleem met Contact Form 7. IK heb een invulveld waar geboortedatum opgeven moet worden met de Nederlandse notatie, dd-mm-yyyy. Maar in de mail die verstuurd wordt staat de datum in yyyy-mm-dd.
Ik kan nergens een oplossing vinden om dat te veranderen.
Contactform7 datum formaat:
==========================
Het datumveld kan worden aangepast in de e-mail waarin deze verstuurd wordt. Hieronder een voorbeeld.
Datum veld: [data date-input]
Ingave: 06-09-2021 als voorbeeld.
In de e-mail tab:
No Format: [date-input]
Format 1: [_format_date-input “D, d-M-Y”]
Format 2: [_format_date-input “l, d-F-y”]
Format 3: [_format_date-input “D, d-m-y”]
Format 4: [_format_date-input “j-n-y”]
Format 5: [_format_date-input “d-m-Y”]
————————————
Dit is het resultaat in de e-mail:
No Format: 2021-09-06
Format 1: ma, 06-sep-2021
Format 2: maandag, 06-september-21
Format 3: ma, 06-09-21
Format 4: 6-9-21
Format 5: 06-09-2021
===================================
Succes.
Groet, PvdZ
Wil.
Ik had al eerder gereageerd maar denk dat de oplossing niet is aangekomen.
Het is wel mogelijk om de weergave van het ingegeven datum-veld binnen Contactform-7 aan te passen.
Hieronder een overzicht van de mogelijkheden.
Contactform7 datum formaat:
==========================
Datum veld: [data date-input]
Ingave: 06-09-2021 als voorbeeld.
No Format: [date-input]
Format 1: [_format_date-input “D, d-M-Y”]
Format 2: [_format_date-input “l, d-F-y”]
Format 3: [_format_date-input “D, d-m-y”]
Format 4: [_format_date-input “j-n-y”]
Format 5: [_format_date-input “d-m-Y”]
————————————
Let op: voor en achter “_format_” staat een underscore!
Dit is het resultaat in de e-mail:
No Format: 2021-09-06
Format 1: ma, 06-sep-2021
Format 2: maandag, 06-september-21
Format 3: ma, 06-09-21
Format 4: 6-9-21
Format 5: 06-09-2021
=============================
Succes.
Groet, Piet van der Zanden.
Ferdy,
Allereerst complimenten m.b.t. je uitgebreide en groot aantal tutorials.
Ik heb er veel van kunnen leren.
Als je weer eens een update voor het “Contact Form 7” zou gaan maken dan een paar zaken die mogelijk handig zijn te vermelden.
Na installatie van de Essential Addons van Elementor komt er bij EA een “Contact Form 7” element bij.
Dus op de gebruikelijke manier plaatsen op je pagina en de naam van je contact formulier kiezen.
Het is dus niet meer nodig de link te plaatsen.
Bovendien kan ook de gehele opmaak via de gebruikelijke instellingen van dit element worden gedaan zodat je het formulier helemaal aan eigen smaak en huisstijl kan aanpassen.
Je kan ook een kop en andere begeleidende teksten toevoegen. (zie bijlagen)
Ook mogelijk wat aandacht aan de velden Cc: en Bcc: in de Mail-tab / Aanvullende koppen. Ik zelf gebruik deze regelmatig om als beheerder en centrale coördinator te zien of alles werkt zoals verwacht.
Wat ik ook gebruik is natuurlijk de “Flamingo” plugin omdat CF7 niets aan logging doet.
Ook is het mogelijk bij b.v. een checkbox zowel de beschrijving als een e-mail op te geven “ sales|ferdy@abcd.nl“
Voorbeeld:
Formulier:
Kies een afdeling (*)
[checkbox* Afdeling “Verkoop|ferdy@abcd.nl”
“Fotografie|studio1@abcd.nl”
“Web Design|webmasters@abcd.nl”]
Email:
Aan: [Afdeling]
Bericht inhoud:
Afdeling naam: [_raw_Afdeling]
Afdeling email: [Afdeling]
Mogelijk gaat dit laatste wat te diep en mogelijk kende je deze mogelijkheid al wel.
Ik zou zeggen succes met je projecten.
Groet, Piet van der Zanden.
Helaas geen bijlage mee kunnen sturen: