PHPForms incredible and simple web form builder

PHP Contact Forms for Website

2.3.1 Contact Form



Contact form is a very useful thing for every site where communication between site owner and users takes place.

Of course, you can provide your contact data directly on some page of the site, but in this case you'll receive large amount of undesired email letters sent by bots or spammers.

Usually contact form contains the fields like: first name and last name, email address, comment to site administrator and CAPTCHA for spam protection.

Contact us form


Also contact form allows you to receive from users not only text messages and some attached files (photo, video, audio). The functionality of your future form is chosen by you and only by you. Moreover, you can set any background you want, as well as the color of the text, font size, field size, type and style. To create a web form you need some knowledge of HTML, CSS and PHP.

But our product allows you to create smart and pretty PHP contact forms without any special programming skills.

PHP Contact Form Creation with PHPForms



First of all, to create a form you should go to PHPForms Form Builder software and click Create a new form button .

Create a new form


After that you will see empty field of your future form and elements that you may add to it.

Empty form


First of all you should give some name to your form. To do this - go to the tab called Form properties in the menu placed on right side of the window.

Form properties


Then input the name of your form, its description for your site visitors and for yourself, and the message you want to be displayed to user after successful form submission:

Filled form properties


Then choose the color of your contact form, its width in pixels, and put ticks (if it is necessary) into the following checkboxes: Ultimate Spam protection (reCAPTCHA), Back to Form (if you don't put tick here you can enter URL where you want your users to go after successful form submission), Limit to one entry per IP address and Send to e-mail (if you want to send the submission of this form via email):

Recaptcha


Now some words about protection against spam:

Click on Form Properties and check on the field Ultimate Spam Protection. Then you will have to fill two fields: Public key and Private key.

How to get these keys? First of all you should register at reCAPTCHA special site: http://www.google.com/recaptcha. Here you should enter address of your future site and will get these two keys. Input them in appropriate fields.


Back to Form Creation:

After that, you can start adding fields to your form. Let's add three text fields, such as Name, E-mail and Message to administrator and one File upload field.

Go to Add field tab. It looks like this:

Add field


Select Text Field in Standard fields. New field will immediately appear in your form:

Add text field


After that, place mouse pointer over this element. Red dotted border will appear around it:

Editing a field


Then left click on it. The field will change its appearance and the next tab Element properties will be opened:

Text field properties


In this case we need to fill the properties of following element: Label (name of the field) and to mark it as a required field (put the tick in the Check it property):

Value


Now your contact form in the Form Builder looks like this:

Form with text field


Then we'll add E-mail field. Perform all the actions described for Name field and add some Element properties: Value (example of how email address looks like) and Validation rules (choose E-mail only):

Email field


After that create Message to administrator field. You should just add Text Area field. And then the process of its creation is similar to the creation of Name field.

Now let's create File upload field. Choose appropriate item in Additional elements and click it. This new field will appear in your form.

File upload field


In Element properties you can define maximum size of the file(kB) and allowed file extensions (for example, doc, pdf, jpg, png, bmp). We don't mark this field as required one.

File upload properties


Let's save your form - press Save button placed under your form.

Save button


You'll see the following message:

Save message


Finally you can see how your contact form will look like. Just press Preview button near Save one:

Preview


In new window you will see this form:

Preview form


The last thing you need to do - is to get the code of your form to embed it into your site.

Get code


There are two ways to insert your new form into your site:

HTML code


That's all! Your form is ready to be implemented to your site!