{"id":190683,"date":"2020-08-13T03:35:58","date_gmt":"2020-08-13T03:35:58","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=190683"},"modified":"2020-08-11T17:49:40","modified_gmt":"2020-08-11T17:49:40","slug":"creating-the-perfect-contact-form-with-forminator","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/creating-the-perfect-contact-form-with-forminator\/","title":{"rendered":"Creating the Perfect Contact Form with Forminator"},"content":{"rendered":"

Contact forms not only let visitors get in touch with you, they are also essential for lead generation. With our free 5-star Forminator<\/a> plugin, adding a contact form to your WordPress site is easy, as this guide will show you!<\/p>\n

This tutorial will demonstrate how to set up the perfect contact form and create the ability for visitors to reach you (and reach back out to them) in just a few clicks.<\/p>\n

Here are the areas that we\u2019ll be covering:<\/p>\n

    \n
  1. Create Contact Forms Faster Using Time-Saving Templates<\/a><\/li>\n
  2. Customize Forms to Suit Your Needs by Adjusting Their Appearance<\/a><\/li>\n
  3. Control the Behavior of Your Form for Maximum Performance<\/a><\/li>\n
  4. Set Up Email Notifications for Instant Alerts<\/a><\/li>\n
  5. Advance Forms Further by Integrating with Popular 3rd Party Apps<\/a><\/li>\n
  6. Control Your Data Storage to Your Standards in Settings<\/a><\/li>\n
  7. Separate a Form Perfectly with Pagination<\/a><\/li>\n
  8. Preview and Easily Implement Your Form Using Shortcodes<\/a><\/li>\n<\/ol>\n

    A new form is a cinch with Forminator. Let\u2019s get started!<\/p>\n

    <\/a>1. Create Contact Forms Faster Using Time-Saving Templates<\/h3>\n

    With Forminator\u2019s premade templates, just click Contact Form<\/strong>, name it, hit Create<\/strong>, and it will be set up for you immediately.<\/p>\n

    \"Templates
    Click this button, and let\u2019s create a contact form for your site.<\/figcaption><\/figure>\n

    This form comes with all the essentials a simple contact form needs: First Name, Email Address, Phone Number, Message, <\/strong>and Send Message<\/strong>.<\/p>\n

    \"Contact
    Use the default fields to instantly create a basic contact form.<\/figcaption><\/figure>\n

    You can add more fields and edit accordingly. However, if this serves its purpose, just click Publish<\/strong>, and Forminator delivers a shortcode for use on any WordPress page, post, or acceptable widget.<\/p>\n

    Creating a contact form with Forminator is quick, simple, and easy!<\/small><\/p>\n

    Forminator automatically syncs with your admin email, so when users opt-in, you\u2019ll get notified.<\/p>\n

    You now have a form that\u2019s ready to collect information and be used on your website. It’s that simple.<\/p>\n

    \u00a02. <\/a>Customize Forms to Suit Your Needs by Adjusting Their Appearance<\/h3>\n

    Forminator gives you a lot of flexibility when it comes to adjusting the appearance of your contact form with colors, fonts, custom CSS, and more.<\/p>\n

    The Design Style<\/strong> area comes with a pre-made style.<\/p>\n

    \"The
    Pick Forminator\u2019s premade designs or jazz it up with some CSS.<\/figcaption><\/figure>\n

    You can adjust the Design Style with options like Default<\/strong>, Flat<\/strong>, Bold<\/strong>, Material<\/strong>, or you can opt for None<\/strong>.<\/p>\n

    Pick the style that works best for your contact form.<\/small><\/p>\n

    From here, you can change the colors in the Colors <\/strong>section. This is where you can customize it perfectly to fit your color palette on your website.<\/p>\n

    Adjust the colors on many elements of the form, such as the form container, submission indicator, field basics, and more. Or use the default colors.<\/p>\n

    \"Various
    Color options are endless when it comes to customizing your form.<\/figcaption><\/figure>\n

    Click on an individual element to change its colors.<\/p>\n

    Add custom colors to any form element.<\/small><\/p>\n

    Similar to the colors, you can change many font levels in Fonts<\/strong>. Forminator’s font options include inheriting the theme\u2019s fonts, or you can customize these.<\/p>\n

    \"The
    Match your brand\u2019s fonts throughout the entire form.<\/figcaption><\/figure>\n

    Any of these fonts can be overwritten with custom ones by Google Fonts<\/a>. You can easily change the font size and weight.<\/p>\n

    Choose from hundreds of fonts.<\/small><\/p>\n

    Also, customize your form container\u2019s border and padding in the Form Container<\/strong> area.<\/p>\n

    Beyond that, you can adjust the radius, thickness, and style. Also, in the Spacing<\/strong> area, you can adjust the spacing with options of Comfortable<\/strong>, Compact<\/strong>, or Custom<\/strong> — where you\u2019ll enter your spacing in pixels.<\/p>\n

    \"The
    Need more space? The border and spacing can be customized however you\u2019d like.<\/figcaption><\/figure>\n

    To take design further, add custom CSS for more advanced modifications.<\/p>\n

    3. <\/a>Control the Behavior of Your Form for Maximum Performance<\/h3>\n

    Your contact form\u2019s behavior is how your form functions while a user is filling it out and when the user hits submit.<\/p>\n

    Being able to edit and modify key points any way you\u2019d like puts you in control of your contact form’s behavior.<\/p>\n

    To start with, you can adjust the Submission Behavior<\/strong>. Modify submission behavior with an Inline Message<\/strong>, Redirect<\/strong> to a specific URL, or Hide Form<\/strong> upon submission.<\/p>\n

    You can also customize the message and set the time (in seconds) to auto-close the success message (which indicates the form was submitted okay).<\/p>\n

    \"Submission
    Add a personalized message to your users.<\/figcaption><\/figure>\n

    Forminator allows you to choose your Method<\/strong> of reloading the page. You can use AJAX<\/a> to send the form without reloading the page or reload the page.<\/p>\n

    The Validation<\/strong> method is for fields that you\u2019ve chosen to validate. This feature shows how these will behave when a user submits, whether to run validation checks when the user submits the form using Ajax or on the server-side using PHP, and returning any error messages after a page reload.<\/p>\n

    Also, there is a Submission Indicator<\/strong> feature that shows the loader if activated.<\/p>\n

    \"The
    Keep users in the loop by letting them know that the form will be submitted.<\/figcaption><\/figure>\n

    There are also options for enabling Autofill<\/strong>, Security<\/strong> (Honeypot protection and logged in submissions only), and the Lifespan<\/strong> of a form.<\/p>\n

    Lifespan allows your form to expire on a specific date or after a certain number of submissions.<\/p>\n

    \"The
    Make it easy to submit a form with Autofill.<\/figcaption><\/figure>\n

    4. <\/a>Set Up Email Notifications for Instant Alerts<\/h3>\n

    <\/a>Customize email notifications for your admin and site visitors in just a few clicks with Email Notifications<\/strong>.<\/p>\n

    You can create emails that get delivered to your admin team or any specified email addresses when a form is submitted.<\/p>\n

    There are also advanced options for CC Emails<\/strong>, BBC Emails<\/strong>, Reply-to Emails<\/strong>. Plus, you can add conditions based on user input and rules for additional customization.<\/p>\n

    \"Where
    Get a notification the way that you want it when a new form is submitted.<\/figcaption><\/figure>\n

    5. <\/a>Advance Forms Further by Integrating with Popular 3rd Party Apps<\/h3>\n

    You can send a specific form\u2019s data to a connected 3rd party app, such as MailChimp<\/a>, MailerLite<\/a>, Slack<\/a>, and more. It\u2019s all done right in Forminator’s dashboard.<\/p>\n

    Forminator will show you a list of connected apps that you have available; from there, you can activate it to connect with the form by hitting the plus sign and Activate App<\/strong>.<\/p>\n

    \"The
    All contacts from a form can go directly into MailChimp.<\/figcaption><\/figure>\n

    Every app will have different prompts to get it to synchronize and will walk you through exactly how to do it. Once finished, your form will sync with the app, and it will work accordingly.<\/p>\n

    You can connect and disconnect from any 3rd party app at any time.<\/p>\n

    3rd party apps are perfect for continuing marketing through email providers, storing information on the cloud, and much more.<\/p>\n

    6. <\/a>Control Your Data Storage to Your Standards in Settings<\/h3>\n

    With Settings<\/strong>, you can control the Data Storage<\/strong> by disabling any submissions in your database. All submissions are stored by default if not enabled.<\/p>\n

    You can also customize how long you\u2019d like to retain the form\u2019s submission for a specific amount of time in the Privacy<\/strong> settings.<\/p>\n

    Finally, there are options for handling account erasure requests and keeping files that are submitted if the form gets deleted.<\/p>\n

    \"Settings
    Data storage controls have never been more straightforward.<\/figcaption><\/figure>\n

    Edit data storage in Forminator\u2019s global privacy settings at any time.<\/p>\n

    7. <\/a>Separate a Form Perfectly with Pagination<\/h3>\n

    Add pagination to your form to break it up into individual sections. Pagination leaves the style not as cluttered looking, which is beneficial if you have a lot of fields that are required.<\/p>\n

    Simply add the Page Break<\/strong> field, and Pagination will appear on top. You can then insert page breaks in between various fields and separate the form however you\u2019d like.<\/p>\n

    You can adjust the Progress Indicator<\/strong>, Buttons Text<\/strong>, and the Labels<\/strong>.<\/p>\n

    Once completed, your users will go step-by-step through the form.<\/p>\n

    Use pagination to break up complex forms.<\/small><\/p>\n

    8. <\/a>Preview and Easily Implement Your Form Using Shortcodes<\/h3>\n

    Does your form look good? Hit Preview any time to get a glimpse of it and try it out\u2026<\/p>\n

    Preview and test your new contact form.<\/small><\/p>\n

    As mentioned at the beginning of this article, when you\u2019re ready, once you hit Publish<\/strong> on your new contact form, Forminator provides you with a shortcode that you can paste into WordPress pages, posts, or acceptable widgets to display your form.<\/p>\n

    \"A
    Forminator\u2019s shortcode gets the \u201cthumbs-up\u201d.<\/figcaption><\/figure>\n

    You can always access the shortcode in Forminator\u2019s admin. Along with that, you can change, edit, and adjust your form at any time and the changes will automatically propagate throughout your site wherever you have added the form via the shortcode.<\/p>\n

    <\/a>And Like That, It Forms<\/h3>\n

    With all the elements in place, you can have your contact form up and running in no time.<\/p>\n

    The perfect contact form will contain information that is required to serve your purpose. With Forminator, you can adjust a form exactly how you want to ensure it functions perfectly for your WordPress site.<\/p>\n

    You can view more about constructing contact forms <\/a>and also about getting started with them<\/a>.<\/p>\n

    Speaking of contact forms, be sure to use ours to reach out to our 24\/7 support team superheroes if you ever have any questions and need to contact us.<\/p>\n

    And to keep tabs on what\u2019s coming up with Forminator, check out our Roadmap<\/a> any time.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Contact forms not only let visitors get in touch with you, they are also essential for lead generation. With our free 5-star Forminator plugin, adding a contact form to your WordPress site is easy, as this guide will show you! This tutorial will demonstrate how to set up the perfect contact form and create the […]<\/p>\n","protected":false},"author":811449,"featured_media":221951,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"8","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263,11260,11259],"tags":[],"tutorials_categories":[11232],"class_list":["post-190683","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-wpmu-dev-products","category-wpmudev-tutorials","tutorials_categories-forminator-pro"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/190683","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/811449"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=190683"}],"version-history":[{"count":38,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/190683\/revisions"}],"predecessor-version":[{"id":223470,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/190683\/revisions\/223470"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/221951"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=190683"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=190683"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=190683"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=190683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}