Searching for the perfect contact form for WordPress is a time consuming job because there are so many forms for WordPress. I have searched for hours to find the WordPress contact form that is the most user friendly for my website visitors as well as easy for me to set up. Finally, I found the best WordPress contact form plugin…

WordPress Contact Form

Through my hours of searching Google and WordPress.org I found Custom Contact Forms is by far the best WordPress contact form plugin. Why? It is the only contact form for WordPress that provides every type of customization for each form, form field, and form field option. There are no other forms for WordPress that exist like this plugin. And I am not getting paid to say that. The plugin is free – I just love it so much and I know how frustrating it was for me searching for forms for WordPress for hours…days…weeks. It does take some time to get used to navigating Custom Contact Forms. That is why I put this tutorial together. I hope it helps!

How to Create a Contact Form

Below is a short video tutorial outlining how to create a Custom Contact Form and get started with the initial process of installation, activation, and creating your first form.

If you need assistance adding form fields, managing field options, and editing form styles for your Custom Contact Form please view the screenshots below for additional insights.
Important: Right off the bat I need to remind you of one thing that is very important to keep in mind. Anytime you make a change to a form, a form field, or a form field option you MUST save your changes in order to see them take effect. There are save buttons on the right of each item and there is a global save feature on the bottom left of each section. If you run into an issue when your changes are not taking effect on your contact form then go back to the options section and click Save on the right option button as well as the global save feature.

How to Add Fields to a Form

Visit the Custom Contact Forms plugin home page and scroll down to the section labeled “Manage Forms”.

Look on the right of this section and you will see three setting buttons for each of your custom contact forms. These settings are labelled Save, Delete, and Options. For the next step of adding a field you should click the button labelled Options.

After clicking the Options button you will notice a new section opens up for that specific form.

The WordPress form by default comes with a few fields already set up for you to add to your contact form. Keep in mind, the form fields have been created but they have not been added to your form. You must add the fields you want to use.
Look to the bottom right of the new expanded menu to find the available fields you can add to your form. You will notice a drop down menu labelled Add a Field. Click the drop down menu to find which fields you would like to add.
Add each field you want to use one at a time. Do not worry about which field you add first because you can switch the order of the fields once you have added them to your custom contact form.

Tip: If you want to know what each form field will look like once it is on your contact form – scroll back up to the top of page and you will notice a horizontal navigation menu with the items Forms, Fields, Field Options, Styles, Support, Advanced, and News. Click the menu item labelled Fields.

From within the Fields section you will notice you can create additional new fields. Also, you can see all the default fields that have already been created for you. You are able to see what each form field will say when they are present on your form, and you are able to edit all the options for each field. When I need to add a new field I usually just edit one of the default fields that were created by default. It saves me time and is more user friendly to edit something that was already created.

How to Manage the Form Field Options

You also may want to edit the field options for a particular form field. Example: if you choose to add the default field – How Should We Contact You? This field is a drop down and if you were a user on your website you can select the method you would like to be contacted with.
Tip: First, you can edit the name and title of the field to say anything you want – it doesn’t have to be a field for contact method. Second, you may want to edit the attached fields. Just as with adding fields to your form in the previous step you can also add field options to a specific field the same way.

What is the difference between User Fields and Fixed Fields? You are unable to change the type of field the Fixed Fields are. This is helpful because if you use their Website field, for example, and one of your website visitors enters an invalid website address the form will return an error message to that user. That being said, I recommend using Custom Contact Form’s default fixed fields whenever possible for optimum results and preventing spam.

How to Reorder Form Fields and Options

If you would like to rearrange your form fields once you have added them to your WordPress contact form then access the Options for that form.
Go back to the original home page for the Custom Contact Forms Plugin. Expand the menu for the specific form you are working on by clicking the Options button on the right (as stated in a previous step). You will notice on the bottom left of the expanded options a section labelled Attached Fields.

Simply click and drag a field to rearrange the order it comes in the form.

How to Add a Form to WordPress

Once you are ready to insert the form into your website simply copy and paste the short code that is provided.

You will see there is the  option to display through a short code and display with a PHP function code. Depending on your experience using WordPress you may be able to use the Theme Display Code. I prefer using the short code because I can copy and paste it into any of my WordPress pages, posts or Text/HTML widgets. If you enter the form short code into a WordPress page or post be sure to switch the WYSIWYG editor to Text, not Visual.
Sometimes this step doesn’t matter, but other times I have tried to enter the form into the Visual Editor and it worked fine. Something to keep in mind if you need to trouble shoot your form implementation.
The plugin also comes with a built in widget where you can drag and drop the widget into one of your sidebars.

Visit your WordPress dashboard then go to the Widgets section and you will see the contact form widget is available by default. Just choose which form you would like to display.

Custom Contact Form Definitions

• Slug – refers to the one word label that is stored in your WordPress database for a particular form or form field.
• Label – refers to the words that will appear above a specific field.
• Type – refers to the type of field you are working with. ie: text field, large text area field, drop down field, date field, etc.
• Initial Value – refers to the words you can opt to include within the actual form field itself. Not the words that appear above the form (the Label), but the words within the field. You can choose to not use a Label at all and only include an initial value. Sometimes this makes for a cleaner and more concentrated look for your custom contact form. The below image is an example of using the Initial Value for each field rather than using the Label option.

• Required refers to whether the field is required for a user to fill in to submit the form. When you see the form on your WordPress site it will have a small asterisk next to it indicating that form field is required.
• Field Instructions refer to the small pop up that will be presented to the user when they click inside a particular field. The instruction will usually appear to the right of the form so keep that in mind if you choose to use this option and where you end up placing your form on your site. If the form is on the right side of your website then your user will not be able to read the entire instruction tool tip – this is unprofessional. You can customize the instruction tool tip but I will save that for a future tutorial.

Conclusion

I hope you enjoyed this “How to” tutorial for the WordPress Custom Contact Form Plugin.
If you are unable to make it through the tutorial of screenshots and would prefer further video assistance please let me know.
Feel free to leave a comment below, contact me through my website or connect with me on social media.
Special thanks to Tailor Lovett for developing this contact form for WordPress and putting in so much time to make it the most customizable WordPress form on the market.