Using Contact Form 7 (CF7) Plugin with Flatsome Theme

Instructions on how to use the contact form flatsome theme plugin as well as most themes using WordPress or WooCommerce. Contact Form 7 (CF7) supports creating forms such as contact form, promotion registration form, and newsletter form.

How to Use Contact Form Flatsome WordPress Plugin (CF7)

Contact Form 7 stands for CF7, this is a plugin that supports creating free forms and using it via shortcode. You just need to create the form and then you can insert it anywhere on your website where you want it to appear.

Add contact form 7 to your website, a form with the information you have set up that allows customers to send emails directly from your website to your Email. Help you get the desired information from customers or information that needs support, error reporting services, products …

To be able to set up, create flatsome contact form first you need to install the plugin. If not installed, please log in to the admin page (Admin). In the left menu click on Plugins->Add new. Search for the phrase contact form 7 and install and activate it. Normally, when you install the flatsome theme, this plugin is already available. You can check in the installed plugins section or in the left menu that shows Contact or Contact.

Step 1. Add or edit contact form in flatsome

To add, create or edit contact form flatsome in the left menu of the admin page click on contact form. This section itsmeit will use an existing form and edit it as follows:

After clicking Edit (edit) click on the Form tab, by default there will be 3 fields name, email, content. If you want to add a phone number, then click the tel button above, it will add a field and it will look like this:

Click Insert Tag you will get a contact form with: Full name, phone number, email address, content in HTML code, you can add other fields similar for example: address, gender, interests… Below is an example of HTML template in flatsome contact form.

<label> Full name (*) </label>
<p> [text* text-922 placeholder "First and last name"] </p>

<label> Phone number (*) </label>
<p> [tel* tel-195 id:phone-number class:phone-number placeholder "Phone number"] </p>

<label > Email address (*) </ label >
<p> [email* email-815 placeholder "Email address"] </p>

<label> Content (*) </label>
<p>[textarea* textarea-810 placeholder "Content"]</p>

[submit id:contact-submit-form class:contact-submit-form "Submit"]

Click Save after completing the step of creating and editing the form. Now copy the shortcode of the form you just created to attach to the contact page. The shortcode is of the form: [contact-form-7 id=”15″ title=”Contact form”].

Step 2. Add the shortcode and display the form outside the frontend

Go on, in the menu click Page and edit or edit with UX Builder. When itsmeit installed the Flatsome theme and imported the demo, the shortcode was available. So itsmeit will select the newly edited Form and click Apply->Update.

You can also add a new form by clicking on any empty space where you want to display it and pressing the “ + ” sign and finding Contact Form 7 in the widget section on the left. Or you can also select HTML and insert the shortcode. The displayed results will be as follows:

Not done yet, when you add or edit fields in the form, you also need to change the values ​​in the Mail tab, continue to see step 3 itsmeit fix the values ​​for the contact form in the flatsome theme to work.

Step 3. Fix contact form 7 email error on Wordpress

Click to switch to the Mail tab and copy the values ​​in your input cells, similar to the image below.

• To: Is the email you want to receive contact form from customers
• Form: Email of the website, you can set email by domain if available or similar to the one in the picture. After @ must be the domain of the website
• Subject: Self-set email subject, you can add the customer’s name or phone number like a photo for easy identification.
• Additional headers: Can be left blank or attached to the recipient.
• Message body: The content is similar to the screenshot above, the most important thing is that you copy the correct [field] codes.

Drag the mouse down and click Save when finished editing. And test the result of the newly created flatsome contact form.

Above are 3 simple steps to create a contact form in WordPress using contact form 7 and flatsome theme. CF7 is used by a lot of people, but if you want to be more advanced in your marketing strategy, you can refer to the Fluent Forms plugin.