Explore Gutenix
Free Theme
Get Gutenix

How to Add New Fields to Contact Form 7

From this tutorial you’ll learn how to add new fields to contact form using Contact Form 7 plugin.

Adding New Fields
  1. First, let’s log in to Administration panel (Dashboard). Enter your login credentials and navigate to the Contact tab on the left. Here you can view all the existing contact forms on your website. To add a new contact form click on Add New tab.
  2. You will see a sample form with few basic fields, such as Name, Email, etc. Here we need to add a new field (e.g., Cell Phone).
  3. Let’s copy the code from the other field and paste it to preserve the layout of the copied field.
    If you need to create custom layout for your contact form, please, feel free to proceed to reading How to Create Custom Layout for Contact Form.
  4. Rename the field. You can replace the text, that is not included into the code “[]” brackets with your own text.
  5. Now you need to paste the code for the cell phone. Click on the tag you want to add. In our case, it is tel.
  6. Enter the name of the code in the Name field and click on Insert Tag button.
    There are several options available for you in the Form-tag Generator popup window. Let’s overview them.

    • Field Type – here you can choose, whether the field will be required, or optional.
    • Name – type in the name of the field you’re creating.
    • Default Value – here you can set the default value for the tag. Check Use this text as the placeholder of the field to give the user a hint on what information he needs to provide, and in what format it should be.
    • ID attribute/Class attribute – here you can specify the class or ID for the tag to use the specific CSS class or ID style.

  7. You should replace the code copied from the other field by the new one you’ve created.
  8. When you’ve added all the necessary fields to your new form, input the title for the contact form and click on Save button to save it.
  9. Now you can paste the shortcode of your new contact form to your website’s pages and posts. Please, feel free to read Creating a Contact Form with Contact Form 7 Plugin tutorial to get more detailed information about creating contact forms.