Categories

Featured templates

WordPress. How to add additional fields to contact form

Elina Webb August 10, 2015
Rating: 5.0/5. From 1 vote.
Please wait...

This tutorial shows how to add additional fields to Contact Form in WordPress.

Joomla 3.x. How to install engine and template on localhost

In WordPress templates, we always have a sample of contact form added with Contact Form 4 plugin. You can edit this form or create a new one:

Wordpress-how_to_add_additional_fields_contact_form-1

  1. Log into WordPress Admin Panel, go to Contact, you will see the current contact form of the template. You can edit this form or click Add New to create a new form:

    Wordpress-how_to_add_additional_fields_contact_form-2

  2. We will try to create a new Contact form now. Click Add New, then a sample form will show up, this form includes some basic fields such as Name, email, etc. So we will create some additional field, for example Cell phone and File Upload:

    Wordpress-how_to_add_additional_fields_contact_form-3

  3. For Cell phone field:

    Copy the code from one of the other fields to get the same layout with the new name of the field:

    Wordpress-how_to_add_additional_fields_contact_form-4

    We can select Text field from Generate Tag button, fill in the name, choose some option provided. After this, you will see the code generated. Just copy it to the left side:

    Wordpress-how_to_add_additional_fields_contact_form-5

    Wordpress-how_to_add_additional_fields_contact_form-6

    Wordpress-how_to_add_additional_fields_contact_form-7

  4. Copy the other code to the Message Body so that you will get this field to your email:

    Wordpress-how_to_add_additional_fields_contact_form-8

  5. For File Upload field, we will do the same steps, copy the layout with the name of the field:

    Wordpress-how_to_add_additional_fields_contact_form-9

    From Generate Tag button, we will choose File upload. Fill in the name and other options:

    Wordpress-how_to_add_additional_fields_contact_form-10

    Wordpress-how_to_add_additional_fields_contact_form-11

    You will see the code generated after this. Just copy it to the left side:

    Wordpress-how_to_add_additional_fields_contact_form-12

    To get this file to your email, you need to copy this code to the File attachments:

    Wordpress-how_to_add_additional_fields_contact_form-13

  6. Put a title for this form, and click Save:

    Wordpress-how_to_add_additional_fields_contact_form-14

    You will see the code for this form on the top:

    Wordpress-how_to_add_additional_fields_contact_form-15

    Copy this code to a page, a post or a text widget. Then you can test the form. After getting the confirmation that the message is successfully sent, you can open your email to check:

    Wordpress-how_to_add_additional_fields_contact_form-16

Feel free to check detailed video tutorial below:

Joomla 3.x. How to install engine and template on localhost

Best Professional Wordpress Themes
This entry was posted in WordPress Tutorials and tagged contact, form, WordPress. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket