How to create Zelle contact form with Contact Form 7

Important notice: This product is now in maintenance mode and is no longer being actively developed or supported. Updates and bug fixes will not be provided unless they relate to security concerns.

Contact Form 7 is a popular plugin that allows you to easily create a contact form as you want. In this guide, we will explain how to create the contact form on Zelle Pro front page with this plugin.

1. Install and activate Contact Form 7

Contact Form 7 can be downloaded from wordpress.org. You can follow our guide on How to install WordPress plugins.

2. Download Zelle contact form

Download (if a new tab will be opened, right-click on the page and save the file with an XML extension)

3. Import Zelle contact form

After downloading zelle_contact_form_7.xml file you can navigate from your Dashboard to Tools->Import, run WordPress importer and choose this file.

4. Add the same style as on our demo

In order to make it look like our demo, copy and paste the following code in your Dashbard->Appearance->Customize->Additional CSS.

@media(min-width: 768px) {
.zelle-cf7 p:nth-of-type(1),
.zelle-cf7 p:nth-of-type(2),
.zelle-cf7 p:nth-of-type(3) {
	float: left;
	width: 33.33%;
}
.zelle-cf7 p:nth-of-type(1) {
	padding-right: 20px;
}
.zelle-cf7 p:nth-of-type(2) {
	padding: 0 10px;
}
.zelle-cf7 p:nth-of-type(3) {
	padding-left: 20px;
}
}
.zelle-cf7 p:nth-of-type(4) {
	clear: both;
}
.zelle-cf7 textarea::placeholder {
	color: #A0A0A0;
}

5. Set the contact form to be shown on the front page

Now that the contact form is created and the style was added, navigate from your Dashboard to Contact->Contact Forms and locate the shortcode.

Copy this shortcode and paste it in Dashboard->Appearance->Customize->Frontpage Sections->Contact us section.