How to create Neve contact form in WPForms

WPForm is a great plugin that allows you to easily create any contact form you want. It comes with pre-built form templates that can be easily customized, so you don’t ever have to start from scratch unless you want to. To use the contact form you just need to copy the shortcode of the form and paste it wherever it fits your needs.

If you want to create the Neve contact form in WPForms you have to follow a couple of simple easy steps.

1. Install WPForms

In your WordPress dashboard navigate to  Plugins > Add New and search for "WPForms". After you've found it, click "Install" > "Activate" and once the process is finished you're all set to go.

2. a) Create a new contact form

If you want to create a new WPForms form, similar to the form in Neve, this is the step for you. If you already have a form ( possibly migrated from Pirate Forms to WPForms, check 2.b below ).

To make it easy for you to get the contact form template of Neve we created a WPForms template that you will need to import into WPForms. Save the template code in a json file, like neve.json.

In your dashboard navigate to WPForms > Tools, and under WPForms Import click "Select File" and upload the template you previously downloaded, then click "Import". Once the import was successfully finished, you can go and check your forms and you'll see a newly created form named "Neve".

b) Use an already existing WPForms form

1. Edit your existing WPForms form

2. Add a Name field and make sure you make this changes:

- Format: Simple

- Field Size: Large

- Name: Your name ( or the text you want as a placeholder )

- check Hide Label

- add the CSS classes: wpforms-one-half wpforms-first (or select from the "Show Layouts" menu)

. Add an Email field and make sure you make these changes:

- Field Size: Large

- Placeholder Text: Your Email ( or the text you want as a placeholder )

- check Hide Label

- add the CSS class:   wpforms-one-half

. Add a Single Line Text field and make sure you make these changes:

- Field Size: Large

- Placeholder Text: Subject ( or the text you want as a placeholder )

- check Hide Label

. Add a Paragraph Text field and make sure you make these changes:

- Field Size: Medium

- Placeholder Text: Your Message ( or the text you want as a placeholder )

- check Hide Label

. Go to the Settings tab, and change the Submit Button Text to Send Message

3. Insert the form's shortcode in the theme

Copy the shortcode ([wpforms id="xx"]), navigate to the page content, and paste it in a shortcode block.

4. Style contact form

In order to have the same style as in our demo, please copy the following code into Appearance -> Customize -> Additional CSS.

div.neve-demo-form .wpforms-form .wpforms-one-half {
	padding-bottom: 20px;
}
div.wpforms-container-full.neve-demo-form .wpforms-form .wpforms-one-half input, div.wpforms-container-full.neve-demo-form .wpforms-form textarea {
	font-family: "Poppins";
	font-size: 15px;
	line-height: 30px;
	text-align: center;
	border-radius: 4px;
}
div.wpforms-container-full.neve-demo-form .wpforms-form .wpforms-one-half input {
	padding: 22px 12px;
}
div.wpforms-container-full.neve-demo-form .wpforms-form textarea { padding: 7px 12px;
}
.neve-demo-form .wpforms-submit-container {
	text-align: center;
}
div.wpforms-container-full.neve-demo-form .wpforms-form button[type=submit] { 
	font-family: "Poppins"; 
	font-weight: 500; 
	border-radius: 30px; 
	color: #fff; 
	background-color: #fc5f45; 
	border: 1px solid transparent; 
	text-transform: uppercase; 
	padding: 12px 40px; 
	margin-top: 20px; 
}
div.wpforms-container-full.neve-demo-form .wpforms-form button[type=submit]:hover { 
	background-color: #f34123; 
	border: 1px solid transparent; 
} 
@media (max-width: 767px) {
	div.wpforms-container-full.neve-demo-form .wpforms-form .wpforms-one-half {
		width: 100%; 
		margin-left: 0; 
	}

	.neve-demo-form	.wpforms-field-textarea textarea { 
		text-align: center; 
	}	
}