How to embed the contact form in your web pages

A quick and easy tutorial on how to embed the contact form in your web page.

Embed using IFrame

Iframe gives you the option of using an external URL to load its contents to create a box on your web page.  Iframe is one of the easiest ways to embed a contact form on your web page.

Here is a sample iframe code:

<iframe src='/contact/contactus.php' frameborder='0'
width='100%' height='600' allowtransparency='true'></iframe>

Use the scr attribute to update the URL path to your contact form, change the value of the ‘height’ attribute to stop the box from scrolling.

Including a header and footer in the contact form page.

Embed the contact form using a common header and footer on your website. You can include the header and footer in the contactform.php.

This method allows you to preserve the same look across the website.

Here is some sample code that illustrates this method.

Including the header:

<body>
<!--Note: The header is included here -->
<?php include('../includes/header.php'); ?>
<!-- The form start from here-->
<form id='contactus' action='<?php echo $formproc->GetSelfScript(); ?>'  
method='post'>
<fieldset >
  
Including the footer:
</script>
<!-- Note: Here we include the footer -->
<?php include('../includes/footer.php'); ?>
</body>
</html>

Responsive HTML5 Web Contact Form

Responsive HTML5 Web Form

Source Code For the Responsive Contact Web Form

This is an example Single Page Application using the libraries and principles I have learned and created since 2010. My libraries include:

Form file

Stylesheet file

Php script embedded in Html file

Javascript scripts embedded in Html file

jQuery scripts embedded and externally linked.

The form has the following features:

jQuery Powered

Fully Responsive Layout

Google Face Fonts

Valid HTML5 &amp; CSS3 Code

Compatible Browsers: IE7, IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

Clean Design

Highly Customizable

Works even with Javascript Disabled

PHP validation

HTML5 validation

Fallback scripts for unsupported browsers

The inputs required are:

Name

Email

Website

Message.

https://github.com/ngeshlew/responsive-html5-web-form

Python Contact Form with Optional Captcha

WhatMail

This is a simple cgi contact form that and can handle utf-8, which is a crucial feature for me since not all my friends write to me in English :)
It also has a text captcha. It's enabled by default but you can configure whatmail to either disable it or use Google's recaptcha instead. Note that using recaptcha would enable Google to track people who use your form, so this option is mainly here for legacy reasons.
The GUI (big word for a form and a thankyou page) can be skinned with mustache templates. The default skin is twitter bootstrap based, but anything goes, and skin pull-requests are welcome.
If your form is served via SSL, you can also configure it to encrypt the mail it sends with gpgme (plain old ascii-armor. not mime). Be careful when you set this up: the illusion of security can easily make you lose your head.
There's no email address validation and no assumption that such an address is entered at all (friends can leave a name, strangers may decide to leave a phone number instead). Also note that the identity of the sender can't be verified (even when encryption is enabled, nothing is signed), but the again - your phone doesn't come with prank-call protection either :). For what it's worth, the sender's ip number is included in the mail you receive.

Installing

  • Run git submodule update --init to fetch dependencies.
  • Put all files (including .htaccess) in a web-accessible folder.
  • Check your .htaccess settings by accessing testcgi.py from web: If you see python source, do notcontinue to the next step (creating whatconf.py). This file will contain passwords and keys, and you have to make sure it can't be accessible from web. If .htaccess doesn't do the trick, show it to your sysadmin and ask to config your folder at the apache according to what's written there.
  • Optionally, get recapcha keys for the form's domain.
  • copy whatconf_defaults.py to whatconf.py and edit it. See comments inside the file.
  • That's it. You can now access the folder via web (e.g. /whatmail/) and get a contact form. Send yourself a message to congratulate yourself.

Skinning the GUI

  • Copy the skins/default/ folder to [say] skins/mine/.
  • Edit the mustache templates there.
  • You can also have static files (css, js, graphics) in the skin's folder. In templates, you can refer to that folder as {{skin}} (e.g. <img src="{{skin}}/graphics/logo.png">).
  • Change SKIN_FOLDER at whatconf.py from skins/default to skins/mine.
Easy.

Enabling gpg

Note: If you decide to enable gpg, make sure the cgi page is served via SSL (otherwise, it's kinda daft). If there's an alternative http url that gets to the same cgi script, it is important to supply anSSL_REDIRECT_TO at whatconf.py (see below).
First thing, you need to make sure you have gpgme and pygpgme installed.
Simply try import gpgme from python and see if it works.
If it doesn't - installing them is beyond the scope of this README file, but it's doable :)
  • Create a script-specific gpg homedir (say, ./.gnupg). If it's inside a web-accessible folder, make sure homedir's name starts with a "." (and verify that you can't get to files there via web).
  • Export the recepient's pubkey (i.e. yours). E.g. do (on your desktop) gpg -a --export me@example.com > me.asc and upload the temporary me.asc to the server.
  • Import the pubkey to the gpg homedir with gpg --homedir ./.gnupg --import < me.asc
  • Repeat with other pubkeys (if you want to encrypt to multiple recepients).
  • Edit GPG_* parameters at whatconf.py (GPG_HOMEDIR should be a full path starting with /).
  • It is recommended to write your script's SSL url as SSL_REDIRECT_TO. You are using SSL. Right? :)
  • Note: You should make sure your gpg homedir and the files in it are only readable by you (chmod 700 for the folder and 600 for the files). This can also work on a shared host, if the hosting provider has configured cgi scripts to run under your own uid (e.g. at Webfaction).
    If you're on a shared host where cgi scripts of all users run under the same uid (e.g. Apache's www-data), don't try to chmod the homedir so that www-data has rights at the gpg homedir. Better use an unecrypted form, so that your users know where they stand. 
    https://github.com/thedod/whatmail