Overview
WordPress powers over one-third part of the web making it the most popular choice in web development services.
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.
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.
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
npm install frontity-contact-form-7
Step 2: Add the frontity contact form package name in frontity-settings.js.
"packages": [ "frontity-contact-form-7" ]
Step 3: Run command
npx frontity dev
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.
"menu": [
[
"Contact Form",
"/frontity-contact-form"
]
]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
label {
color: rgb(45, 65, 82);
width: 100%;
}
textarea {
width: 100%;
resize: none;
}
span.wpcf7-form-control-wrap {
margin-bottom: 20px;
width: 100%;
display: inline-block;
}
.wpcf7-form-control {
width: 100%;
padding: 12px;
background-color: #eef2fd;
border: 1px solid #eef2fd;
}
input.wpcf7-form-control.wpcf7-submit {
width: auto;
padding: 8px 32px;
}
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.
You may also like
WooCommerce: Boost conversion with Pre-Sales activities
Conversion means users who are converted from visitors to customers for your e-commerce website. You...
WooCommerce: Conversion rate
As per today’s situation, about 5+ million e-commerce websites are using the WooCommerce platform. To survive and thrive, you need to know where you stand in this competitive and crowded community. ...
Introducing Twenty Twenty-Two – first default block theme!
The WordPress default theme twenty twenty-two with WordPress...
