|
/ Documentation /Blocks/ How to Create Contact Forms for Your WordPress Website

How to Create Contact Forms for Your WordPress Website

The Spectra Forms block allows you to create beautiful and functional forms without any coding knowledge for free.

It comes with a variety of pre-made templates, as well as the ability to customize your forms to your exact requirements.

In this article, you will find a complete breakdown of all the available controls and settings for forms so you can create nice-looking forms for your website.

Types of Forms

You can create any type of form with Spectra’s form block by simply adding the fields that you want. But still, we offer multiple form templates that you can use out of the box.

Here are some of these templates :

  • Simple contact form: A simple contact form is a form that allows visitors to your website to contact you with their questions, feedback, or concerns. It typically includes fields for the visitor’s name, email address, and message.
  • Newsletter form: A newsletter form is a form that allows visitors to your website to subscribe to your newsletter. It typically includes fields for the visitor’s name and email address.
  • Suggestion form: A suggestion form is a form that allows visitors to your website to submit suggestions for improving your website. It typically includes fields for the subject of the suggestion and a brief description of the suggestion.

How to Create a Contact Form Using Spectra

We’ll assume you already have Spectra installed and activated on your website. Once completed, you can simply follow the steps below:

Adding the Spectra Forms Block

  • Navigate to the page or post where you want to insert your contact form. Then, click on the + icon at the top-left of the screen.
  • Search for and select the Form block.
  • Select the type of form template to start with. For this example, we’ll go with “Simple Contact Form”.
  • Provide a form title.

We have successfully created a form. Now, it’s time to add and configure the various form fields available with the Spectra Form block.

Adding & Configuring Spectra Form Fields

  • Hover below an existing form field and click on the + icon to add a new field.

Some of the fields that you can add in your form:

  1. Name: Combines the user’s first and last names.
  2. Phone: Let users enter their phone numbers.
  3. Textarea: Offers users the ability to include longer messages. For instance, a “Feedback” field.
  4. Email: Allows users to input their email address.
  5. Checkbox: A simple option for users to check, such as a terms & conditions agreement.

  • Drag and drop the following icon to arrange your form fields in the desired sequence.
  • To make a field required, select the individual field, and enable the “required” option from the right panel. 
  • Add placeholder text in a form field by editing this “Placeholder” textbox.
  • Navigate to the General tab under General Settings to edit messages you want to display after form success or failure.

Note: Configure your preferred reCAPTCHA version and secret key at Spectra > Settings > Integrations in your WordPress admin.

Recording Form Submissions

After you’ve finished creating the form fields, the next step is to configure your form submission settings. 

The submissions made by the users on your form can be sent to your email address. That way, you can easily access the user information right in your email box.

Note: To receive these form responses via email, you’ll need to configure the SMTP settings in your hosting service.

To do this:

  • Navigate to the Actions tab under General Settings.
  • Under “To”, enter the email address where you want the form submissions to be sent.
  • Additionally, you can include “CC” and “BCC” email recipients as well as an email subject for form submissions.

Now, whenever a user fills and submits the form, the data will be sent to the email addresses configured here.

If form submissions are not being sent to your email address, please contact our support by opening a ticket below.

Styling Your Spectra Contact Form

Once you have the basic text and fields of your form taken care of, you can begin styling the design of your Spectra contact form.

For example, you may want to make sure that it matches your branding.

So you can click on the Style tab.

Here, you’ll find a wide variety of options and settings that you can use to customize the design of your contact form.

For instance, you can adjust the spacing and padding, as well as change the colors, size, labels, and buttons.

Forms Block

When you’re satisfied with the look and contents of your Spectra contact form, the only thing left to do is to save and publish it.

You can do so by selecting the Publish button at the top right side of the screen.

That’s it! You can preview your contact form on the front end to confirm that it looks as you want it to.

Configure SMTP

To ensure you receive emails when a form is submitted, it’s important to have SMTP properly configured on your site.

SMTP (Simple Mail Transfer Protocol) helps ensure that emails are delivered reliably, preventing them from being marked as spam or not sent at all.

Without SMTP, emails from your website forms might not reach your inbox, leading to missed important notifications.

To set this up, you can use plugins like WP Mail SMTP, which guides you through the process and connects your WordPress site to your email service provider.

If you haven’t configured SMTP yet, consider doing so to avoid any potential issues with email notifications from your forms.

We hope this article has been helpful. If you have any questions, please feel free to leave a comment below.

Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

On this page

Get Notified When Available

Note - You can purchase the Essential Toolkit now and easily upgrade to the Business Toolkit once it becomes available.

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Get your hands on Spectra Pro

Enter your name and email address to get access to Spectra Pro.