How to create Neve newsletter 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 this 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 this 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 this 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.wpforms-container.wpforms-container-full.neve-newsletter .wpforms-form {
text-align: center;
}
div.wpforms-container.wpforms-container-full.neve-newsletter .wpforms-field-container,
div.wpforms-container.wpforms-container-full.neve-newsletter .wpforms-submit-container {
display: inline-block;
}
div.wpforms-container.wpforms-container-full.neve-newsletter .wpforms-field-container input[type="email"] {
border-radius: 30px 0 0 30px;
padding: 23px 10px 23px 30px;
border: 2px solid #efefef;
background-color: #f7f7f7;
}
div.wpforms-container.wpforms-container-full.neve-newsletter .wpforms-submit-container button {
color: #fff;
background-color: #fc5f45;
border-radius: 0 30px 30px 0;
margin-bottom: 3px;
border: 2px solid #fc5f45;
text-transform: uppercase;
font-family: "Poppins";
font-size: 15px;
font-weight: 400;
line-height: 27px;
}
div.wpforms-container.wpforms-container-full.neve-newsletter .wpforms-submit-container button:hover {
background-color: #f34123;
}
div.wpforms-container.wpforms-container-full.neve-newsletter .wpforms-field-container .wpforms-field-email,
div.wpforms-container.wpforms-container-full.neve-newsletter .wpforms-submit-container {
padding: 0;
}
@media (max-width: 766px) {
div.wpforms-container.wpforms-container-full.neve-newsletter .wpforms-field-container,
div.wpforms-container.wpforms-container-full.neve-newsletter .wpforms-submit-container {
display: initial;
}
div.wpforms-container.wpforms-container-full.neve-newsletter .wpforms-field-container input[type="email"] {
border-radius: 30px;
text-align: center;
}
div.wpforms-container.wpforms-container-full.neve-newsletter .wpforms-submit-container button {
border-radius: 30px;
margin-top: 20px;
padding: 10px 25px;
}
}
Enjoy your new form!
WPForms are capable of much more than only a contact form. This compatibility enables you to use all of WPForms features such as creating forms for payments, surveys, subscriptions, and more. Know more about WPForms!