Home
NextSaaS

Contact Form

NextSaaS integrates seamlessly with Contact Form 7, one of WordPress's most popular and reliable contact form plugins. All demo content uses Contact Form 7, making it easy to create and manage contact forms on your website.

Installing Contact Form 7#

Step 1: Install the Plugin

  1. Navigate to Plugins > Add New in your WordPress admin dashboard
  2. Search for "Contact Form 7"
  3. Click Install Now on the Contact Form 7 plugin
  4. Click Activate after installation

Alternatively, you can install it from Appearance > Install Plugins if it appears in the recommended plugins list.

Step 2: Create Your First Contact Form

  1. Go to Contact > Contact Forms in your WordPress admin
  2. You'll see a default contact form already created
  3. Click on the form name to edit it, or click Add New to create a custom form

Video Tutorial#

For a detailed walkthrough and insights into using Contact Form 7, watch our video tutorial:

Contact Form 7 Wordpress Tutorial

Basic Form Setup#

Default Form Fields

Contact Form 7 comes with a default form that includes:

  • Name field (text input)
  • Email field (email input)
  • Subject field (text input)
  • Message field (textarea)
  • Submit button

Customizing Form Fields

You can customize your form by editing the form template:

  1. Go to Contact > Contact Forms
  2. Click on your form to edit it
  3. Modify the form template using Contact Form 7's tag syntax
  4. Update the mail settings to configure email notifications
  5. Click Save when done

Common Form Tags

[text* your-name] - Required text field
[email* your-email] - Required email field
[tel your-phone] - Phone number field
[textarea* your-message] - Required textarea
[submit "Send"] - Submit button

Configuring Email Notifications#

Mail Settings

  1. In your contact form editor, go to the Mail tab
  2. Configure the To field (recipient email)
  3. Set the From field (sender email)
  4. Customize the Subject line
  5. Add form fields to the message body using tags like [your-name], [your-email]

Mail (2) Settings

You can configure a second email (auto-reply) in the Mail (2) tab:

  1. Enable Use Mail (2)
  2. Set the recipient to [your-email] (the form submitter)
  3. Create a thank you message
  4. Customize the subject line

Adding Forms to Pages#

Using Shortcode

  1. Copy the shortcode from your contact form (e.g., [contact-form-7 id="123"])
  2. Edit the page where you want the form
  3. Paste the shortcode in the content area
  4. Update or publish the page

Using Elementor

  1. Edit your page with Elementor
  2. Search for "Contact Form 7" widget
  3. Drag the widget to your desired location
  4. Select your contact form from the dropdown
  5. Customize the widget settings
  6. Update the page

Styling Contact Forms#

2 Column Input Fields

If you want 2 column in a row You just need toa add a class in a div .nextsaas-cf7-column.

GSAP Animation Panel!

Using Theme Options

NextSaaS includes built-in styling for Contact Form 7 forms that matches the theme design. The forms will automatically inherit your theme's color scheme and typography.

Custom CSS

To add custom styling, go to Theme Options > CSS Editor and add:

/* Style Contact Form 7 inputs */
.wpcf7-form input[type='text'],
.wpcf7-form input[type='email'],
.wpcf7-form textarea {
  /* Your custom styles */
}

/* Style submit button */
.wpcf7-form input[type='submit'] {
  /* Your custom styles */
}

Advanced Features#

Conditional Fields

Contact Form 7 supports conditional logic through add-ons like:

  • Contact Form 7 Conditional Fields
  • Smart Grid-layout Design for Contact Form 7

File Uploads

To add file upload functionality:

  1. Add [file your-file] to your form template
  2. Configure file size limits in Contact > Integration
  3. Set allowed file types

Spam Protection

Contact Form 7 includes built-in spam protection:

  • Akismet Integration: Automatically filters spam
  • reCAPTCHA: Add Google reCAPTCHA for additional protection

Troubleshooting#

Form Not Sending Emails

  • Check your email settings in the form configuration
  • Verify your hosting supports PHP mail function
  • Consider using an SMTP plugin (WP Mail SMTP)
  • Check spam folder for test emails

Form Not Displaying

  • Verify the shortcode is correct
  • Check if Contact Form 7 is activated
  • Clear any caching plugins
  • Check for JavaScript errors in browser console

Additional Resources#

Need Help?#

If you need assistance with Contact Form 7 setup, please contact our support team at hello@pixels71.com.