Form Element

Last Updated on

Allow your website audience to communicate with you via the Form element. Raven’s Form element lets you create a:

  • Conctact Form
  • MailChimp Form
  • Redirect Form
x
Beware! This element is a part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor. Forms element is only available in the Raven Plugin.

Having such elements on your website is extremely important to your visitors. Adding one is simple and there are a lot of styles and settings to choose from.

In this article, we’ll explain how to add a Contact Form and a MailChimp Form to a page via Elementor and configure its settings.

In this article


Displaying a Form Element

To add a Form element to a page:

1
Add a new page or edit an existing one.
2
Click on Edit with Elementor button.

3
From the left dashboard, search for a “Form”.

4
Drag and drop the Form element to your page.

5
A new dashboard on the left will open with the element’s settings. These are explained below.

Content

SettingDescription
Form FieldsLets you add new form fields and customize their individual settings.
Submit ButtonYou can configure the submit button text, icon, and width here.
SettingsConfigure your form type: contact form, MailChimp or redirect.
Feedback MessagesLets you add a custom feedback message which will display upon form submit, error, etc.

}

It’s good to mention that the form fields can be different types. You can add:

  • Text
  • Email
  • Textarea
  • Tel
  • Number

fields and set different widths (to make them multi-column). You can also make them mandatory fields by enabling the “Required” setting.


Creating an Outline Contact Form

To create the following contact form, follow the steps below:

1
Follow the steps in Displaying a Form Element section to add the form to your page.
2
Configure the settings like shown below:
SettingDescription
Settings > LabelDisabled
Row Spacing0
Column Spacing0
Field Border TypeSolid
Field Border Width2 px
Field Tyopgraphy TransformUppercase
Button Background ColorTransparent
Button Tyopgraphy TransformUppercase
3
Configure the rest of settings as you desire and publish or update the page.


Creating a MailChimp Form

To create a MailChimp form, follow the steps below:

1
From the WordPress left menu, go to Elementor > Settings > Raven.

2
Generate an API key by following this article and add it in the above path.

3
Follow the steps in Displaying a Form Element section to add the form to your page.
4
Configure the settings like shown below:
SettingDescription
Settings > Add ActionMailChimp
3
Configure the rest of the settings as you desire and publish or update the page.

Frequently Asked Questions

How can I add a New Form Field

You can add as many new form fields as you like and customize their functionality. To add a new form field simply from the Content tab in form settings click on Form Fields > + Add Item.

How can I translate my form?

Translating the form requires a third-party app or plugin. To learn about the process, read the Translating with Loco plugin article.

Configuring SMPT to send emails. (I don’t receive any email, what should I do?)

By default, WordPress uses the PHP mail function to send the emails. This function is not properly configured in many shared hosting providers so it’s best to use SMTP to send emails which are highly reliable.

How can I have a Transparent Background on the Form?

Simply follow the “Creating an Outline Contact Form” section in this article.


Responsive Options

You can choose to have different settings on different screen sizes for some of the Button element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket