Add a contact form to your website using MaxiBlocks and Fluent Forms

Step-by-step guide

Please complete the steps in sequential order for best results. Whenever you see the message below follow the steps to complete the setup:

Step1

Install Fluent Forms plugin

• Go to your WordPress dashboard.
• Navigate to Plugins > Add New.
• Search for "Fluent Forms" in the search bar.
• Click Install Now  and then Activate  the plugin once the installation is complete.

Step2

Import the JSON Form files

Download one or more JSON form ZIP files from the links below. Unzip first. Then import and use the ones you prefer.

Combined option:

• All contact forms in one package - Download file
• All email subscribe forms in one package - Download file

Individual options:

1. Contact Form #1 [Name, Email, Message] - Download file
2. Contact Form #2 [Name, Email, Message, GDPR] - Download file
3. Contact Form #3 [Name, Email, Message] - Download file
4. Contact Form #4 [Name, Email, Checkboxes, Message] - Download file
5. Email Subscribe #1 [Name, Email] - Download file

• In your WordPress dashboard, go to Fluent Forms > Import/Export.
• Click on the Import Forms  tab.
• Upload t he downloaded JSON file by clicking on Choose File  and selecting the JSON file.
• Click Import Form  to add the form to your Fluent Forms collection.

Step 3

Configure your form for reliable delivery (do not skip this step!)

Take some time to configure the form and plugin. See Fluent Forms docs.

Pay close attention to the 3 options:

• Set up Form Submission Confirmation Message in Fluent Forms
• Setting up Admin Email Notifications in Fluent Forms
• Send Users Email Notification with Fluent Forms
• See integrations (some may require a paid upgrade)

Step 4

Add the imported form to a MaxiBlocks pattern or page

• Navigate to the page or post where you want to add the contact form.
• Within the editing experience select the Fluent Forms block.
• From the right sidebar
• Select the imported form from the dropdown menu in the Fluent Forms block settings.
• Customize the block settings as needed to fit your design.

Step 5

Test your form (do not skip this step!)

Open the page with your form in an incognito browser window to simulate a real person's submission process.

1. Fill out all form fields:
   • Use a different email address for sending
2. Submit the form and check for a confirmation message
3. Check your receiving email (including spam folder) for the message
4. Reply to the received email
5. Verify if the sending email received your reply

Step5

Publish/Save the page and test

Once you have added and customized your form, click Publish or Update to make your changes live.

That's it! Your contact form should now be up and running on your website.