4,9 based on 300 reviews
Trusted by 1500+ businesses and student of all shapes and sizes
Free Course
4,9 based on 300 reviews
Trusted by 1500+ businesses and student of all shapes and sizes

Contact Form 7 Tutorial

WordPress,WordPress Plugins

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;  
}




What Do You Want?
Ask A WordPress Related Question Get A Quote For A Website Meet Ferdy In Person
How Did You Find Out About Ferdy?

I consent to the conditions.



SCROLL TO THE ANSWER

Timestamps

26 thoughts on “Contact Form 7 Tutorial”

  • Hoi Ferdy
    Ik wil u vragen.
    Hoe gebruik je een afbeeldimg voor je webshop os ecommerce moet je alleen een afbeelding plaatsen op jou ecommerce van google ik begrijp diet niet en als je die afbeelding plaatst en klanten kopen die ding hoe gaat dan naar die klanten je heb toch niet fysiek producten

  • 2022-07-15 09:08:07

    Hello. how can I reach you on a call? I want o build a Facebook social media alternative, what does it cost to build it?

  • 2022-03-18 14:24:52

    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.

  • 2021-12-10 13:40:27

    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

  • 2021-11-12 14:50:57

    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:

  • 2021-06-21 11:17:40

    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

  • 2021-06-18 09:43:58

    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.

  • 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

  • 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?

  • 2021-01-29 21:31:34

    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

  • 2021-01-25 16:04:06

    Die css code die ik plak werkt niet of laat het grecaptcha logo niet verdwijnen of is dat alleen bij de pro versie

  • 2021-01-11 07:06:22

    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?

  • 2021-01-02 12:00:14

    Looooove your humour iro the hot male models and the vip message from Nigeria!

  • Hello Ferdy,
    Great job… but does not work with email from gmail…
    have you some advice about this problem ?

  • 2020-06-07 23:03:44

    Hi Ferdy,
    How we can validate if mobile number field would allow only in number an and 10 digits.

  • 2020-04-21 08:23:24

    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,
    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.

  • 2020-03-29 12:52:00

    Excellent you teach very clearly and properly…
    love from Pakistan

  • A
    2019-11-19 15:34:13

    Hi Damiliola, yes, you need Elementor Pro to do that.

  • 2019-11-19 15:32:26

    hello ferdy,
    Is there a way i can edit my header and footer using elementor

  • 2019-11-15 14:18:55

    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

  • 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.

  • 2019-09-11 18:03:57

    You are a good talented teacher. God bless

  • A
    2019-07-31 10:58:29

    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

  • 2019-07-29 07:19:54

    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?

Leave your comment

FERDY.COM
TUTORIALS

Learn step by step how to create a WordPress website for your business, organisation or hobby. Thanks to Ferdy’s video tutorials and simple way of explaining things, you don’t have to hire an expensive web designer and wait months before your website is finished.

With Ferdy’s WordPress tutorials, you are in charge of the progress and you save yourself a ton of money. Don’t have a domain and web hosting yet? No problem. Ferdy shows in you in each tutorial how to get web hosting and a free domain.