5th Mar 2021

How to integrate contact form 7 in Frontity

Wordpress

Written By, Kinnari Vasavda

Overview

In this article, we will learn how to integrate the most awaiting package of frontity for contact form 7(CF7) plugin of WordPress. This package allows you to create various forms on any of the frontity themes. To integrate contact form 7 in frontity just follow a few simple steps and you are good to go.

Create a contact form in WordPress

First on your WordPress website you need to install the latest version of the Contact Form 7 plugin which is available for free. Now, you create contact form(s) according to your requirement and name according to your choices.

Integrate Contact Form on your page

Once you are done with creating a form, there is one shortcode generated based on your contact form title. If you have not created a page/post in your WordPress site then first you need to create the page/post and afterward, you are supposed to paste the shortcode generated from CF7.

The screenshot shown below represents the shortcode of the contact form.

generated-shortcode

Paste the above shortcode on a page/post where you want to display your contact form. If you’re using the Gutenberg editor, you can simply paste the CF7 generated shortcode in the Shortcodes block, available in the widgets section.

form-shortcode

Integrate CF7 in frontity

If you want to integrate the contact form 7 in frontity then you are supposed to install the Frontity Contact Form 7 package and you need to follow the below-mentioned steps.

Step 1: Frontity CF7 installation command

Step 2: Add the frontity contact form package name in frontity-settings.js.

Step 3: Run command

That’s it! This package does not require any further settings.

Add contact page in the menu

If we want to add a menu to display contact form 7 on a contact page

For example, if your WordPress site contact page URL is:- http://localhost/frontity-wordpress/frontity-contact-form/

You need to use this slug(frontity-contact-form) and add the Menu name in frontity-settings.js.

Customize your contact form styling

Contact form by default does not add style in input fields however you can style your contact form according to your requirement by adding a custom stylesheet as we learned from our previous frontity blog.

Shown below are a sample code and screenshot of the output of my styled contact form in frontity.

Sample Code

Output:

frontity-form-output

Conclusion

Forms are the common component in every website and the contact form 7 plugin is very popular in WordPress. I hope this article helped you in integrating the contact form 7 in frontity. Stay connected to know more about Frontity.

Written By,

Web Designer at Yudiz Solutions Pvt. Ltd