Setting Up Contact Forms for Wiso and Liko Themes (Using Contact Form 7)

This guide provides a detailed walkthrough for creating, configuring, and assigning Contact Form 7 forms in the Wiso and Liko WordPress themes. It also includes troubleshooting tips for common errors.

1. Creating a New Contact Form

Step-by-step:

1. From your WordPress Dashboard, go to Contact > Add New.
2. Give your form a title, such as “Contact Form Black”.

2. Configuring the Contact Form Tabs

A. Form Tab

Use the following default template:

 Your name
    [text* your-name autocomplete:name] 

 Your email
    [email* your-email autocomplete:email] 

 Subject
    [text* your-subject] 

 Your message (optional)
    [textarea your-message] 

[submit "Submit"]

Explanation:

• The label tag wraps each input field, which ensures accessibility and clarity.
• text*, email* indicate required fields—the asterisk * makes them mandatory.
• autocomplete:name and autocomplete:email enable browser autofill for user convenience.
• This configuration prevents submission unless all required fields are filled correctly.

Working Alternatives: If you don’t need all fields to be required:

 Your name
    [text your-name] 

 Your email
    [email your-email] 

Or if you prefer placeholders instead of labels:

[text* your-name placeholder "Your Name"]
[email* your-email placeholder "Your Email"]

B. Mail Tab

Ensure the fields match exactly with those in your form:

• To: [_site_admin_email]
• From: [_site_title]
• Subject: [_site_title] "[your-subject]"
• Additional Headers: Reply-To: [your-email]
• Message Body:

From: [your-name] [your-email]
Subject: [your-subject]

Message Body:
[your-message]

--
This is a notification that a contact form was submitted on your website ([_site_title] [_site_url]).

• Check: Use HTML content type

C. Messages Tab

Customize the success/error messages if needed. Default messages often suffice but feel free to localize or enhance for clarity.

D. Additional Settings Tab

Usually this is left blank unless custom behavior is needed.

Save the Form

Click Save to finalize your form setup.

3. Get the Form ID

After saving, you’ll receive a shortcode like this:

[contact-form-7 id="7b2846f" title="Contact form black"]

Here, the ID is 7b2846f.

4. Assigning Contact Forms in Wiso Theme

A. Newsletter in Footer

1. Go to Appearance > Widgets.
2. Locate the Footer Simple Sidebar.
3. Add a Wiso Subscribe widget.
4. In the field labeled “Form ID from Contact Form Plugin”, enter your form ID (e.g. 7b2846f).
5. Click Save.
6. Visit your site’s front-end and test the form. For newsletter forms, only an email field is required.

B. Inserting Form on a Page (WPBakery Editor)

1. Edit your page with WPBakery.
2. Insert the Contact Form 7 element.
3. Select the form by its title.

C. Inserting via Shortcode

In any WordPress editor block, paste the shortcode:

[contact-form-7 id="7b2846f" title="Contact form black"]

5. Assigning Contact Forms in Liko Theme

A. Contact Page Setup (with Elementor)

1. Navigate to Pages > Contact.
2. Click Edit with Elementor.
3. Drag and drop the Liko: Contact Form widget.
4. In the Form Content panel, choose the form title to assign it.

B. Assign via Elementor Shortcode Widget

1. Use the Shortcode widget.
2. Paste the form shortcode there.

6. Troubleshooting Common Issues

A. “Email address entered is invalid”

• Ensure [email* your-email] is used in both the form and mail tabs.
• Avoid placeholder typos or unrecognized field names.

B. “One or more fields have an error. Please check and try again.”

• Ensure all required fields are filled.
• Use correct syntax: all required fields must have an asterisk (e.g. [text* your-name]).

C. Form Not Submitting

• Check if Contact Form 7 is fully installed and activated.
• Ensure no JavaScript errors are occurring (check via browser dev tools).
• Confirm mail settings are correctly mapped and valid.

D. No Emails Received

• Check spam/junk folder.
• Try using a custom email address for From: in the mail tab.
• Install an SMTP plugin like WP Mail SMTP to ensure reliable email delivery.

For further assistance, refer to the official Contact Form 7 documentation or reach out via the theme’s support platform.