Contact Form 7 is our recommended form plugin for WordPress. It is a simple but powerful form creator for WordPress. Here we will show you how to use Contact Form 7 to create and edit a basic form.
After Contact Form 7 is installed, you’ll find a new menu item in your WordPress admin area called Contact, here is where your forms and created and edited. From the Contact main screen, you will see your first contact form, its usually a default form called ‘Contact Form 1’ OR if you have imported the demo data for our theme you may see a few forms that we have made specially for you.
When creating and editing forms CF7 uses simple shortcodes (in WordPress these shortcodes are words surrounded by square brackets like “[” and “]”) – these shortcodes are generated via the ‘Generate Tag’ area (marked in red) and then placed in the form builder area (marked in blue) – you can also add your own HTML to the form for extra control.
Contact Form 7 Basics
Form Styling
The forms within Uptime are created using Contact Form 7 – one of the finest free form plugins for WP, however out of the box, you may notice forms not created/imported via the Demo Data look a little unstyled – the reason for this is our forms use simple HTML and CSS Classes to apply the styling you see in the demo.
You will notice overall, the code looks the same as any other form created with CF7, however you will see the submit button has a couple of CSS classes added to it. These classes give the button the stylish look to see in the demo so if your wish to recreate this, add the classesbtn--primary and btn And your all set.
How to Add a Class to A form Element
Adding a custom css as easy with CF7, to do this you can use the field provided when creating your form element, or manually add the class (or classes) if you wish. For an example of this see the animation below
Want the forms without ALL the demo data?
Not a problem, head to Appearance > Theme Setup and you can use the theme setup wizard to grab just the form data! Neat.
