Tutorial: Create a Custom Responsive Contact Form!


Learn how to create your own custom responsive form with this tutorial. It is very easy!
For this tutorial, we’ll be using our contact form script, so you will already have professional anti-spam features in your form. You can repeat the steps as often as you like and add as many fields to your contact form as needed. It is very easy to add more input fields, selectboxes, and checkboxes - you only have to follow the steps described in our contact form tutorial!


Use our contact form as a basis to create a custom responsive form of your own!



Your benefits:

  • You don’t have to rely on third parties and can send e-mails safely via your own server!
  • A professional PHP script © kontaktformular.com will be the basis for your contact form!
  • Benefit from excellent spam protection features: security code (on/off), security question (on/off), time-out (on/off), bad word filter (on/off), honeypot (on/off), click check (on/off), and link blocker (on/off).
  • You can also use the file upload function (optional)!
  • Customize our responsive design template with the style sheet (CSS)!
  • You won’t need a contact form generator!
  • Compatible with Bootstrap, WordPress, Typo3, Contao, Drupal, Joomla, Contrexx, and CMSimple!
  • The form’s PHP and HTML code is well-structured and easy to understand.
  • Our FAQ page has answers to common questions concerning layout and technical issues (e.g. BCC recipient, alignment, thank-you page, etc.)
  • The contact form complies with the GDPR / EU General Data Protection Regulation (you can activate or deactivate the checkbox).

How it Works

  1. Download a suitable contact form (incl. template) from the download page!

  2. Install the contact form on your website.

  3. Select the template you want to edit by clicking on the link "Tutorials: Contact Form – Template *" in the next section (scroll down).

  4. Follow our step-by-step instructions to add a selectbox, checkbox, or another input field. It is best to use an editor (e.g. Notepad2) to edit the contact.php file. On the FAQ page, you will find answers to questions about layout or technical issues.


Tutorials: Contact Form - Template I
Choose your language: German | English

Advanced Version

Spam protection: Security code on/off | Security question on/off   (» 5 more options!)
Data protection: Privacy policy on/off
Error messages (Design): Standard | HTML5
File attachment: Upload function on/off
Send copy: With consent | Without consent | Do not send a copy

Erweiterte Version - Style 8.8


You can find more versions of Template 1 here.


Tutorials: Contact Form - Template II
(German language)

Advanced Version

Spam protection: Security code on/off | Security question on/off   (» 5 more options!)
Data protection: Privacy policy on/off
Error messages (Design): Standard | HTML5
File attachment: Upload function on/off
Send copy: With consent | Without consent | Do not send a copy

Erweiterte Version - Style 11.8


You can find more versions of Template 2 here.


Tutorials: Contact Form - Template III
(German language)

Advanced Version

Spam protection: Security code on/off | Security question on/off   (» 5 more options!)
Data protection: Privacy policy on/off
Error messages (Design): Standard | HTML5
File attachment: Upload function on/off
Send copy: With consent | Without consent | Do not send a copy

Erweiterte Version - Style 12.8


You can find more versions of Template 3 here.


Tutorials: Contact Form - Template IV
(German language)

Advanced Version

Spam protection: Security code on/off | Security question on/off   (» 5 more options!)
Data protection: Privacy policy on/off
Error messages (Design): Standard | HTML5
File attachment: Upload function on/off
Send copy: With consent | Without consent | Do not send a copy

Erweiterte Version - Style 13.8


You can find more versions of Template 4 here.


Tutorials: Contact Form - Template V
(German language)

Advanced Version

Spam protection: Security code on/off | Security question on/off   (» 5 more options!)
Data protection: Privacy policy on/off
Error messages (Design): Standard | HTML5
File attachment: Upload function on/off
Send copy: With consent | Without consent | Do not send a copy

Erweiterte Version - Style 7.8


You can find more versions of Template 5 here.


Tutorials: Contact Form - Template VI
Choose your language: German | English

Advanced Version

Spam protection: Security code on/off | Security question on/off   (» 5 more options!)
Data protection: Privacy policy on/off
Error messages (Design): Standard | HTML5
File attachment: Upload function on/off
Send copy: With consent | Without consent | Do not send a copy

Erweiterte Version - Style 10.8


You can find more versions of Template 6 here.


Tutorials: Contact Form - Template VII
(German language)

Advanced Version

Spam protection: Security code on/off | Security question on/off   (» 5 more options!)
Data protection: Privacy policy on/off
Error messages (Design): Standard | HTML5
File attachment: Upload function on/off
Send copy: With consent | Without consent | Do not send a copy

Erweiterte Version - Style 9.8


You can find more versions of Template 7 here.


Tutorials: Contact Form - Template VIII
(German language)

Advanced Version

Spam protection: Security code on/off | Security question on/off   (» 5 more options!)
Data protection: Privacy policy on/off
Error messages (Design): Standard | HTML5
File attachment: Upload function on/off
Send copy: With consent | Without consent | Do not send a copy

Erweiterte Version - Style 5.8


You can find more versions of Template 8 here.


Tutorials: Contact Form - Template IX
(German language)

Advanced Version

Spam protection: Security code on/off | Security question on/off   (» 5 more options!)
Data protection: Privacy policy on/off
Error messages (Design): Standard | HTML5
File attachment: Upload function on/off
Send copy: With consent | Without consent | Do not send a copy

Erweiterte Version - Style 6.8


You can find more versions of Template 9 here.


Tutorials: Contact Form - Template X
(German language)

Advanced Version

Spam protection: Security code on/off | Security question on/off   (» 5 more options!)
Data protection: Privacy policy on/off
Error messages (Design): Standard | HTML5
File attachment: Upload function on/off
Send copy: With consent | Without consent | Do not send a copy

Erweiterte Version - Style 1.8


You can find more versions of Template 10 here.


Tutorials: Contact Form - Template XI
(German language)

Advanced Version

Spam protection: Security code on/off | Security question on/off   (» 5 more options!)
Data protection: Privacy policy on/off
Error messages (Design): Standard | HTML5
File attachment: Upload function on/off
Send copy: With consent | Without consent | Do not send a copy

Erweiterte Version - Style 2.8


You can find more versions of Template 11 here.


Tutorials: Contact Form - Template XII
(German language)

Advanced Version

Spam protection: Security code on/off | Security question on/off   (» 5 more options!)
Data protection: Privacy policy on/off
Error messages (Design): Standard | HTML5
File attachment: Upload function on/off
Send copy: With consent | Without consent | Do not send a copy

Erweiterte Version - Style 3.8


You can find more versions of Template 12 here.