WordPress.org

Plugin Directory

Test out the new Plugin Directory and let us know what you think.

Contact Form

Contact Form plugin is an handy and functional tool for creating and editing different types of contact forms for your WordPress website contact page.

Contact Form step by step guide

Our Contact Form plugin has user friendly interface, but we will try to explain the all options and functions of our Contact form plugin on this page. We will explain how to create and insert the contact forms into your website posts/pages and widgets.

First of all you can add as many forms as you need. Also you can use as many field in your contact Form as you need, there is no such type of limitation in our plugin. There are a lot of useful and necessary field types in our contact form plugin.

How to create Contact Form

First of all login into your WordPress website admin panel and install our plugin. Then activate it, after that you will see "Wpdevart Forms" new admin menu tab on the left side of your administration panel. Click on that tab and you will see the Contact Form admin menus. Click on the "create a new form" button and add your first contact form. On this page you can add or remove contact form fields and change the contact form main settings.

Here are the field types that you can use in Contact Form

  • Text field
  • Email field
  • URL field
  • Telephone number field
  • Upload File field
  • Date/Calendar field
  • Password field
  • Text Area field
  • Radio Button field
  • Check Box field
  • Dropdown List field
  • Heading field
  • Separator/Divider field
  • ReCaptcha field
  • Google Map field(check the FAQ to see how you can use the Google Map in your contact forms)

For some of this fields the Label and Placeholder fields are not required and there is no need to fill this fields. For example this fields are not required for ReCaptcha or Google Map.

Use the "Add New Field" button on the right bottom side for adding new fields. You can also remove the fields using the Recycle Bin icon on the right side. Use the right side of fields easily moving them in Contact Form. Use the Required option for important fields. After creating all field for Contact Form type the Submit Button Value and check the other settings. On the right bottom side there is an "Advance Options" button, click on that button and you will see this two options - "Do you want to add reset button to the form?", "Do you want to show cancel/close button?". Use this options if you need. On the top right side there is additional settings of Contact Form - "Settings" and "Extras" buttons. Click on that buttons and you will see the other important options for Contact Form. You can set the Recipient's email, Subject, Message text, Success message text, Failure message text, Contact Form template, Redirect URL, Enable auto responder and other options.

After you set all settings for Contact Form, save the form.

After that edit your posts/pages and click on Insert WpDevArt From shortcode(find the shortcode button from the list of Visual Editor Tools). Then choose the contact form you need and click on insert button. Now you can check your created Contact Form on front-end.

Contact Form Submissions

After someone added submission for your contact form you will see it on general forms page. After every contact form you will see the number of submission for each contact form. Click on the number of submissions and you will be redirected to the submissions page. On submissions page you can Export submissions to CSV, edit or delete submissions. If you click on the edit button then you will see the popup window where you can edit every submission user made for contact form. Make the changes and then click update. Also, you can choose what fields exactly you want to export.

Contact Form design settings(Pro)

If you need to configure the form design settings then click on "Styling" tab from admin menu of WpDevArt forms. After that select the Contact Form you need. You can use "Disable Form Styling" option if you don't need any customizations from this page(only selected theme style will effect on your contact form). You can find this option below "Select Form" on general Styling page.

Below you can check all design settings we have

Contact Form style

  • Contact Form Area Width - Set width of the form area in pixels(px) or percentage(%).
  • Contact Form position - Set form position(Left, Center, Right).
  • Contact Form Area Background - Set background color of form area.
  • Set top border of the form area - Border Top(px), Border Style(8 different border styles), Border Color.
  • Set bottom border of the form area - Border Bottom(px), Border Style(8 different border styles), Border Color.
  • Set right border of the form area - Border Right(px), Border Style(8 different border styles), Border Color.
  • Set left border of the form area - Border Left(px), Border Style(8 different border styles), Border Color.
  • Contact Form Margins/outside spacing. Set spacing from every side of the form area in pixels(default 10px) - Margin Top, Margin Bottom, Margin Left, Margin Right.
  • Contact Form Padding/inside spacing. Set padding from every side of the form area in pixels(default 10px) - Padding Top, Padding Bottom, Padding Left, Padding Right.

Contact Form Fields style

  • Contact Form Field Width - Set width of the form fields in pixels(px) or percentage(%).
  • Contact Form Field Height - Set height of the form fields in pixels.
  • Contact Form Field Background - Set background color of the form field.
  • Contact Form Field Focus Background - Set background color of the form field on focus.
  • Set top border of the form fields area - Border Top(px), Border Style(8 different border styles), Border Color.
  • Set bottom border of the form fields area - Border Bottom(px), Border Style(8 different border styles), Border Color.
  • Set left border of the form fields area - Border Left(px), Border Style(8 different border styles), Border Color.
  • Set right border of the form fields area - Border Right(px), Border Style(8 different border styles), Border Color.
  • Contact Form Fields Margins/outside spacing. Set spacing from every side of the form fields in pixels(default 10px) - Margin Top, Margin Bottom, Margin Left, Margin Right.
  • Contact Form Fields Padding/inside spacing. Set padding from every side of the form fields in pixels(default 10px) - Padding Top, Padding Bottom, Padding Left, Padding Right.
  • Typography for Form Fields - Set font family, font style, font size, line height and color for contact form fields.
  • Typography for Form Fields - Set Placeholder texts font family, font style, font size, line height and color.
  • Show radio buttons and checkboxes as block level - Select this option to display radio buttons and checkboxes list vertical.

Contact Form Fields Labels style

  • Hide Fields Labels - Hide labels on front-end.
  • Contact Form Label Width - Set width of the contact form field labels in pixels(px) or percentage(%).
  • Typography for Form Field Labels - Set font family, font style, font size, line height and color for contact form fields Labels.

Submit Button Styling style

  • Submit Button Background - Set background color of contact form submit button.
  • Submit Button Hover Background - Set background color of contact form submit button on hover.
  • Set border of the contact form submit button - Border Top(px), Border Style(8 different border styles), Border Color.
  • Margins/outside spacing. Set spacing from every side of the button in pixels(default 10px) - Margin Top, Margin Bottom, Margin Left, Margin Right.
  • Padding/inside spacing. Set padding from every side of the button in pixels(default 10px) - Padding Top, Padding Bottom, Padding Left, Padding Right.
  • Typography for Contact Form Submit Button - Set font family, font style, font size, line height and color for contact form submit button.

Success/Failure Message style

  • Contact Form Success Message Background - Set background color of success message
  • Contact Form Failure Message Background - Set background color of failure message
  • Messages Margins/outside spacing. Set spacing from every side of the messages in pixels(default 10px) - Margin Top, Margin Bottom, Margin Left, Margin Right.
  • Messages Padding/inside spacing. Set padding from every side of the messages in pixels(default 10px) - Padding Top, Padding Bottom, Padding Left, Padding Right.
  • Set font size, font family, font style and color for messages - Set font family, font style, font size, line height and color for messages.

Separator/Divider style

  • Set border styling for contact form separator/Divider - Thickness, Style, Color.
  • Separator/Divider Margins/outside spacing. Set spacing from every side in pixels(default 10px) - Margin Top, Margin Bottom, Margin Left, Margin Right.
  • Typography for contact form Separator/Divider - Set font family, font style, font size, line height, text align and color for contact form Separator/Divider.

Custom Headings/Titles style

  • Headings/Titles Margins/outside spacing. Set spacing from every side in pixels(default 10px) - Margin Top, Margin Bottom, Margin Left, Margin Right.
  • Typography for contact form Headings/Titles - Set font family, font style, font size, line height, text align and color for contact form Headings/Titles.

Configure design settings and then save it.

Also, we recommend you to check our other plugins - WordPress Gallery, WordPress Booking calendar, WordPress coming soon, WordPress Facebook like box, WordPress YouTube, WordPress Countdown plugin, Facebook comments WordPress, WordPress Poll plugin, WordPress lightbox .

The Best Offer From WpDevArt

You can check the best offer page here - Best Price

Requires: 3.4.0 or higher
Compatible up to: 4.7.3
Last Updated: 4 hours ago
Active Installs: 10,000+

Ratings

4.6 out of 5 stars

Support

7 of 8 support threads in the last two months have been marked resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.

100,1,1