{"id":3460,"date":"2025-07-03T19:36:09","date_gmt":"2025-07-03T19:36:09","guid":{"rendered":"https:\/\/nel-media.com\/en\/?p=3460"},"modified":"2025-07-03T19:44:51","modified_gmt":"2025-07-03T19:44:51","slug":"fluent-forms-create-a-wordpress-contact-form","status":"publish","type":"post","link":"https:\/\/nel-media.com\/en\/fluent-forms-create-a-wordpress-contact-form","title":{"rendered":"Fluent Forms: How to create a WordPress contact form?"},"content":{"rendered":"\n

Fluent Forms is one of the most intuitive and powerful WordPress form plugins, from simple contact forms to complex questionnaires.<\/p>\n\n\n\n

<\/p>\n\n\n\n

In this text, we will show you how to create a basic contact form, define fields, and set up automatic email messages, one to thank the user and the other as a notification to the site owner.<\/p>\n\n\n\n

Step 1: Installing and activating the Fluent Forms plugin<\/h2>\n\n\n\n
    \n
  1. In the WordPress admin interface, go to Plugins > Add New<\/strong>.<\/li>\n\n\n\n
  2. Type \u201cFluent Forms\u201d in the search engine, find the plugin, and click Install Now<\/strong>.<\/li>\n<\/ol>\n\n\n\n
    \"Fluent<\/figure>\n\n\n\n

    3. After installation, click Activate<\/strong>.<\/p>\n\n\n\n

    Step 2: Creating a contact form<\/h2>\n\n\n\n

    After activation, Fluent Forms<\/strong> will appear in the left menu. Click on \u201c Add new form<\/strong> \u201d.<\/p>\n\n\n\n

    Here, we have the option to create a form from scratch (New Blank Form)<\/strong> as well as the option to choose a template (Choose a template)<\/strong>.<\/p>\n\n\n\n

    \"Selecting<\/figure>\n\n\n\n

    Select the \u201c Simple Contact Form<\/strong> \u201d template, which will load a ready-made contact form for you.<\/p>\n\n\n\n

    Step 3: Adding and defining fields<\/h2>\n\n\n\n

    The template usually already contains fields such as First Name, Last Name, Email, and Your Message.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    If you want to customize or add fields:<\/p>\n\n\n\n

      \n
    • On the right side, there is a list of available fields (for example, text, email, number, phone number, etc.).<\/li>\n\n\n\n
    • Drag and drop fields into the form or click on existing ones to edit them.<\/li>\n<\/ul>\n\n\n\n
      \"existing<\/figure>\n\n\n\n

      Defining the \u201cName\u201d field<\/strong><\/p>\n\n\n\n

      Click on the Name field in the form. The settings will open on the right. Here’s what you can define:<\/p>\n\n\n\n

        \n
      • Field Label<\/strong>: E.g., \u201cYour Name\u201d \u2013 this is the text that the user sees above the field.<\/li>\n\n\n\n
      • Field name (Name)<\/strong>: Automatically generated (eg, “Name”), serves as an identifier in the background.<\/li>\n\n\n\n
      • Placeholder:<\/strong> Text that appears inside a field before input, e.g., \u201cEnter your name\u201d.<\/li>\n\n\n\n
      • Mandatory field: Turn on the <\/strong>Required<\/strong> option if the user must fill in this field.<\/li>\n\n\n\n
      • Validation:<\/strong> You can set rules, such as text only, minimum or maximum number of characters, email addresses only, and so on.<\/li>\n\n\n\n
      • Conditional logic:<\/strong> E.g., show this field only if the user selects a specific option in another field.<\/li>\n<\/ul>\n\n\n\n
        \"Description<\/figure>\n\n\n\n

        After adjusting, click Save.<\/p>\n\n\n\n

        Preview of the finished form<\/h3>\n\n\n\n

        In the upper right corner of the form editor, you have options for preview (Preview & Design<\/strong>), saving (Save form<\/strong>), as well as a short code used to place the form on the page.<\/p>\n\n\n\n

        \"Saving<\/figure>\n\n\n\n

        Step 4: Embedding the form on the page<\/h2>\n\n\n\n

        Using a shortcode<\/h3>\n\n\n\n
          \n
        1. Copy the shortcode that appears (e.g. fluentform id=”9″ ).<\/li>\n\n\n\n
        2. Go to Pages > Add new<\/strong> or edit an existing page.<\/li>\n\n\n\n
        3. Add a block with the name Shortcode<\/strong> to the page and type the code you copied earlier into it.<\/li>\n<\/ol>\n\n\n\n
          \"shortcode<\/figure>\n\n\n\n

          Using the Fluent Forms block<\/h3>\n\n\n\n

          Among the blocks, find the \u201cFluent Forms\u201d block and place it on the page (if you are using Gutenberg).<\/p>\n\n\n\n

          \"Inserting<\/figure>\n\n\n\n

          From the drop-down menu, select the form you want to set up. If this is the only form you have created, you will only have one option.<\/p>\n\n\n\n

          Publish the page – the form should be visible on the published page.<\/p>\n\n\n\n

          Step 5: Setting up e-mail notification<\/h2>\n\n\n\n

          Fluent Forms allows you to send two types of emails: thank the user and notify the owner.<\/p>\n\n\n\n

          User, thank you email<\/h3>\n\n\n\n
            \n
          1. In the form editor, go to Settings>Notifications Settings<\/strong>.<\/li>\n\n\n\n
          2. Click Add Notification<\/strong> and name it, for example, \u201cThank you to the user\u201d.<\/li>\n<\/ol>\n\n\n\n
            \"additional<\/figure>\n\n\n\n
              \n
            1. Set the following:\n
                \n
              • Send To:<\/strong> Select \u201cEmail from Form Field\u201d and select the \u201cEmail\u201d field from the form (e.g. {inputs.email}).<\/li>\n\n\n\n
              • Subject:<\/strong> E.g. \u201cThank you for your message!\u201d<\/li>\n\n\n\n
              • Message:<\/strong> Enter text, e.g., \u201cDear, thank you for contacting us. We will get back to you soon!\u201d You can use variables like {inputs.name} for personalization.<\/li>\n\n\n\n
              • From Email:<\/strong> Enter your email address (e.g., \u201cinfo@yourdomain.com\u201d).<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n

                <\/p>\n\n\n\n

                Click Save<\/strong>. <\/p>\n\n\n\n

                This message is sent to the user after submitting the form.<\/p>\n\n\n\n

                Email notification to the owner<\/h3>\n\n\n\n

                Go back to Settings>Notifications Settings<\/strong> and name it \u201cNotification to Owner\u201d.<\/p>\n\n\n\n

                Set:<\/strong><\/p>\n\n\n\n

                Send To:<\/strong> Enter your email address (e.g., \u201cowner@yourdomain.com\u201d).<\/p>\n\n\n\n

                Subject:<\/strong> E.g. \u201cNew message from contact form\u201d.<\/p>\n\n\n\n

                Message:<\/strong> E.g., \u201cSomeone sent a message: Name: {inputs.name}\\n<\/p>\n\n\n\n

                Email:<\/strong> {inputs.email}\\nMessage: {inputs.message}\u201d.<\/p>\n\n\n\n

                From Email:<\/strong> Can be the same address as above or the user’s email from the form {inputs.email}.<\/p>\n\n\n\n

                Click Save.<\/strong> <\/p>\n\n\n\n

                This message will be sent to you every time someone fills out the form.<\/p>\n\n\n\n

                As you can see here, we are using the codes that are already included in the form. If you have multiple active forms, these codes will also differ.<\/p>\n\n\n\n

                Step 6: Testing<\/h2>\n\n\n\n
                  \n
                • Open the form page on your website.<\/li>\n\n\n\n
                • Fill out the form and send it.<\/li>\n\n\n\n
                • Check if you received an email notification and if the user received a thank-you note.<\/li>\n<\/ul>\n\n\n\n

                  Error messages<\/h2>\n\n\n\n

                  Fluent Forms allows you to customize error messages in two main ways-through the form editing interface and through the form settings.<\/p>\n\n\n\n

                  If you want messages in another language, you must manually customize them for each field or use a translation plugin (e.g., Loco Translate) for global messages.<\/p>\n\n\n\n

                  If the user fills out the form incorrectly or it is invalid for some reason, it will be written to them when submitting the form.<\/p>\n\n\n\n

                  We can change these messages by going to Global settings<\/strong> > General<\/strong> > Validation messages<\/strong>.<\/p>\n\n\n\n

                  \"Validation<\/figure>\n\n\n\n

                  Form filling analytics<\/h2>\n\n\n\n

                  Fluent Forms contains analytics on form completion in both visual and written form.<\/p>\n\n\n\n

                  \"Visual<\/figure>\n\n\n\n

                  The written form also contains information about whether you have already reviewed who filled out the form for you or not.<\/p>\n\n\n\n

                  Frequently asked questions<\/h2>\n\n\n