How to Create and Customize Forms in PrestaShop’s Contact Form Module

Creating custom forms for your PrestaShop store allows you to gather important customer information, streamline communication, and improve the overall user experience. This guide walks you through creating various forms using the Contact Form Ultimate module.

Part 1: Adding a new form

Step 1: Access the contact form module

• From the module’s Dashboard, click on the “Contact forms” box to navigate to the Contact Forms tab.
• Click on the “Add new” icon in the top-right corner.

Step 2: Configure the form settings

At this step, you’ll define the basic properties and settings for your form. Each option contributes to how the form appears and functions for users.

• Enable separate form page: Turn this option on to create a standalone web page for the form.
• Form title: Add a descriptive title (visible on the front end).
• Contact form alias: Set a unique alias for the form URL.
• SEO settings:
  • Meta title: Add a concise title for SEO.
  • Meta keywords: Provide relevant keywords.
  • Meta description: Write a summary to help search engines understand your form's purpose.

Step 3: Save your form

Click the “Save” button to finalize the initial form setup.

Part 2: Adding input fields to your form

Forms in PrestaShop are structured using rows and input fields. Here's how to add them:

Step 1: Add rows

• Navigate to the “Form” subtab.
• Click on “Add row” and select a suitable row template to structure your form.

Step 2: Add input fields

• Click on the “Add input field” button.
• Choose the type of input field (e.g., text, email, drop-down, CAPTCHA, etc.).
• Fill in the required details in the popup form (e.g., field label, placeholder text, validations).
• Click “Add input field” to save.

Step 3: Save the form

After adding all rows and fields, click “Save” to apply changes.

Part 3: Enabling reCAPTCHA for spam protection

To add a reCAPTCHA field:

• From the module’s configuration page, navigate to "Settings > Integration", and select “reCAPTCHA” sub-tab.
• Enable the feature, select the captcha type then configure your API keys.
• Once enabled, you can add a reCAPTCHA field to your forms for enhanced security.

Part 4: Popular form types and suggested fields

1. Contact form

Used for general customer inquiries. Follow these steps to build the form:

Row 1: Display store information with Google Map

• Add a new row.
• Add a Text field:
  • Content: "Our stores".
  • Format: Plain text.
• Add an HTML field:
  • Content: Embedded code from Google Maps displaying your store location.
  • Paste the embed code copied from Google Maps.

Row 2: Collect personal information (name and email)

• Add a new row with 2 equal-width columns.
• Column 1: Add a Text field:
  • Label: "Full name".
  • Validation: Required.
• Column 2: Add an Email field:
  • Label: "Email address".
  • Validation: Required.

Row 3: Contact preferences

• Add a new row with 2 equal-width columns.
• Column 1: Add a Dropdown menu:
  • Label: "Select department".
  • Options: Sales, Customer support, Technical support.
• Column 2: Add another Dropdown menu:
  • Label: "Message type".
  • Options: Support, Return/Exchange, Order tracking.

Row 4: Message subject

• Add a new row.
• Add a Text field:
  • Label: "Message subject".
  • Validation: Required.

Row 5: Message content

• Add a new row.
• Add a Rich-text editor field:
• Label: "Message content".
• Integration: TinyMCE for advanced text editing.
• Validation: Required.

Row 6: File upload and security

• Add a new row with 2 equal-width columns.
• Column 1: Add a File upload field:
  • Label: "Attachment".
  • Supported file types: .jpg, .png, .pdf, .docx.
• Column 2: Add a reCAPTCHA v2 field for spam protection.

Row 7: Submit button

• Add a new row.
• Add a Submit button field:
• Label: "Send Message".

2. Quotation form

Used to collect quotation requests. In the guide below, we will build a quotation form for the window blinds online store. Here’s how to structure it:

Row 1: Personal information

Add a 3-column row.

Add the following fields:

• Name: A text input field.
  • Placeholder: "Your name".
  • Character limit: 15.
  • Validation: Required.
• Email: An email input field.
  • Placeholder: "Your email".
  • Validation: Required.
  • Phone number: A phone number field.
  • Placeholder: "Your phone numbers".

Row 2: Section title

• Add a single-column row.
• Add a text field or HTML block to display the section title, “CUSTOMIZE YOUR BLIND”.

Row 3: Blind customization fields

Add a 3-column row for Width, Height, and Room name:

• Width: A number input field.
  • Placeholder: "315 to 3000 mm".
  • Validation: Set a numeric range between 315 and 3000.
  • Mark as required.
• Height: A number input field.
  • Placeholder: "265 to 3040 mm".
  • Validation: Set a numeric range between 265 and 3040.
  • Mark as required.
• Room name: A text input field.
  • Placeholder: "Bedroom, Living room, Kitchen, etc."
  • Mark as required.

Add another 3-column row for Model, Tilt position, and Lift position:

• Model: A dropdown menu.
  • Add options for available blind models.
  • Mark as required.
• Tilt position: A dropdown menu.
  • Add options like "Left", "Right", or "Center".
  • Mark as required.
• Lift position: A dropdown menu.
  • Add similar options for lift positions.
  • Mark as required.

Row 4: Comments section

• Add a single-column row.
• Add a text area field.
• Label: “Do you have any other comments for us?”
• Allow unlimited text input.

Row 5: CAPTCHA

• Add a single-column row.
• Insert a CAPTCHA field: Select reCAPTCHA for spam prevention.

Row 6: Submit button

• Add a single-column row.
• Insert a Submit button:
• Label: "Ask for Price".
• Customize the button color and style to match your store’s theme.

3. Customer survey form

Gather customer feedback to improve your services. In the guide below, we will build a customer survey form for a restaurant. Use these steps:

Row 1: Form header

• Add a single-column row.
• Insert an HTML block with the following text: "Please help us improve our service to serve you better next time".

Row 2: Personal information

Add a 2-column row.

Insert the following fields:

• Name: A text input field.
  • Label: “Your Name*”.
  • Validation: Mark as required.
• Email: An email input field.
  • Label: “Your email*”.
  • Validation: Mark as required.

Row 3: Phone number

Add a single-column row.

Insert a phone number field:

• Label: “Your phone number”.
• Placeholder: Leave blank.

Row 4: Meal type

Add a single-column row.

Insert a radio button field:

• Label: “Which kind of your meal?”
• Options:
  • Breakfast
  • Lunch
  • Dinner

Row 5: Ratings

Add a 2-column row to rate Quality of Food and Cleanliness:

Quality of Food:

• Dropdown menu field with options:
  • Perfect
  • Good
  • Average
  • Poor
  • Very Poor
• Mark as required.

Cleanliness:

• Dropdown menu field with the same options as above.
• Mark as required.

Add another 2-column row for Ease of ordering and Overall quality:

• Follow the same steps as above to create dropdown fields with identical options.
• Mark as required.

Row 6: Additional comments

Add a single-column row.

Insert a textarea field:

• Label: “Do you have any comment for us?”
• Allow users to write unlimited text.

Row 7: Submit button

Add a single-column row.

Insert a Submit button: Label: "Submit".

4. Product question form

Allows customers to ask questions about specific products. Build it as follows:

Row 1: Form title

• Add a single-column row.
• Insert an HTML block with the text: “PRODUCT QUESTION FORM”. Use bold text and uppercase for the header.

Row 2: User information

Add a 2-column row.

Insert the following fields:

• Your name: A text input field.
  • Label: “Your name*”.
  • Validation: Mark as required.
• Your email: An email input field.
  • Label: “Your email*”.
  • Validation: Mark as required.

Row 3: Subject

Add a single-column row.

Insert a text input field:

• Label: “Subject*”.
• Validation: Mark as required.

Row 4: Product URL

Add a single-column row.

Insert an auto-filling URL field for the product URL:

• Label: “Product URL (auto getting URL)”.
• Configure the field to capture the current product page URL dynamically.
• Make this field read-only to avoid user modification.

Row 5: Question

Add a single-column row.

Insert a textarea field:

• Label: “Your question*”.
• Placeholder: “If you have any questions about this product, please write them here.”
• Validation: Mark as required.
• Allow users to write detailed queries.

Row 6: Submit button

Add a single-column row.

Insert a Submit button: Label: "Send My Question".

Tips for an effective form design

• Keep it simple: Avoid overwhelming users with too many fields.
• Add validation: Ensure essential fields like email and phone numbers are validated.
• Make it accessible: Use clear labels and placeholders for better usability.
• Confirmation emails: Configure email notifications to acknowledge the customer’s request and send it to the appropriate department.

By following this guide, you’ll be able to create functional and visually appealing forms to meet various customer needs in your PrestaShop store.