Set up a contact form on your website to allow your site』s visitors a simple way to get in touch with you.
Here are the options available for this widget:
CONTENT
Form FieldsSubmit ButtonActions after submitAdditional Options
STYLE
FormFieldButtonMessages
ADVANCED
AdvancedMotion EffectsBackgroundBorderCustom PositioningResponsiveAttributesCustom CSS
The Slides widget allows you to quickly create simple slides that work perfectly, without a fuss.
Content
Slides
Shows the list of slides. You can drag and drop them to change their position, duplicate, delete or add a slide. When you click on a single slide, its options open up. Each slide has Background, Content and Style settings.
Background
Color: Set the background color for the slideImage: Choose an image from the media library
If an image is chosen as a slide background, additional options appear:
Size: Choose whether to display the background as cover or auto. The auto image is for situations where you have the exact sizes needed, and also where you would want the entire image to appear in the slider. The cover size is for more abstract and atmospheric images, where the showing of the entire image is less important.Ken Burns Effect: Choose YES to enable this popular zooming effect on the background image.Background Overlay: Choose YES to set a background overlay that will appear on top of the image. If set to YES, you have the option of choosing the overlay』s color.
Content
Title & Description: Insert the title and description for the slideButton Text: Set the text for the buttonLink: Add a URL the slide or button will link toApply Link On: If a link is set, this option appears. Choose if the link applies to only the button or to the whole slide
Style
Styling for individual tabs is OFF by default, relying on the global styles which are set on the widget』s Style tab. If you wish to override the global slide styles, turn the Custom switch to ON. This will enable you to set custom styles for that individual slide. The custom styles for individual slides are:
Horizontal Position: Position the content horizontally: Left, right or centerVertical Position: Position the content to the top, middle or bottomText Align: Align the text left, center or rightContent Color: Choose the color of the contentHeight: Set the exact height of the slide in either PX, VH, or EM
Slider Options
Navigation: Choose to display arrows, dots, both or nonePause on Hover: Make the slide pause when the mouse hovers over itAutoplay: Get the slides to rotate automatically, according to the speed you setAutoplay Speed: Set the time it takes for the slide to start rotatingInfinite Loop: Have the slides rotate in an infinite loop and without stoppingDirection: Choose a direction for the slider as left or rightTransition: Set the transition of the slides as slide or fadeTransition Speed: Set the time it takes for the slides to rotateContent Animation: Set the animation effect of the content』s display when the slide is shown: None, Down, Up, Right, Left, or Zoom
Style
Slides
Content width: Set the width of the content inside the slidePadding: Set the inner spacing between the edge of the content and the edge of the slideHorizontal Position: Set the position of the content as right, left and centerVertical Position: Set the position of the content as top, middle or bottomText Align: Align the text to the right, left or centerText Shadow: Add a shadow and blur to the text
Note: If an individual slide has Custom styles set, these global styles will have no effect upon that slide.
Title
Spacing: Set the spacing between the title and the descriptionText Color: Set the color of the titleTypography: Set the typography of the title
Description
Spacing: Set the spacing between the description and the buttonText Color: Set the color of the descriptionTypography: Set the typography of the description
Button
Size: Set the size of the button, from extra small to extra largeText Color: Set the text color for the buttonTypography: Set the typography of the buttonBorder Width: Set the border width of the buttonBorder Radius: Set the border radius, to control corner roundness
Normal State / Hover State
Text Color – Set the text colorBackground Color – Set the background color of the buttonBorder Color – Set the border color of the button
Navigation
Arrows
Arrows position – Set the position of the arrows inside or outside the sliderArrows size – Set the exact size of the arrowsArrows color – Set the color of the arrows
Dots
Dots Position – Set the position of the dots inside or outside the sliderDots size – Set the exact size of the dotsDots color – Set the color of the dots
Note: Autoplay is affected by Google』s Autoplay policy on Chrome browsers.
Note: Using Elementor template shortcodes within the widget may sometimes work, but it is not a supported feature.
Advanced
Set the Advanced options that are applicable to this widget
Do you receive errors after submitting forms?
Example error messages:
Server_error This error is not visible for site visitorsAn error occurredA red X
You may have empty Field IDs in one or more of your form fields. Please open the settings for your form, select each of the fields and then switch to the Advanced tab. If you notice that the ID option is blank, please try typing in a value (this needs to be a unique ID value that isn』t used anywhere else inside the form).
Creating menus is a WordPress function. You can use the Elementor Nav Menu Widget (Pro) or your theme to display these where needed. Learn more here.
Create Your Menu
Navigate to Dashboard > Appearance > Menus. If you have not created a menu, you will need to do so now. Give your menu a name and click the Create Menu Button. You may additionally assign the option to add newly created pages automatically and the display locations.
Adding Pages To The Menu
From the add menu items panel select the pages you wish to insert and click the Add to Menu button.
Creating Submenus
Add your items to the menuDrag and drop an item so that it is placed under the parent item slightly indentedRepeat this process for the other child itemsSave your menu
Adding Custom Links To The Menu
You may add external URLs, anchor links, and placeholder links by using the Custom Links option.
Adding Blog Categories To Your Menu
You may assign blog archive categories from the Categories. For more about WordPress categories, click here.
View Your Menu
From the Dashboard, you can now view your menu by clicking the Visit Site link
The Elementor visual form builder is a powerful tool that helps you build complete and beautiful online forms in minutes without using any code.
Here, we』ll show you how to build a simple lead capture subscription form that will accomplish three goals:
Allow visitors to sign up to a mailing list.Add the user to a 3rd party marketing automation tool such as MailChimp.Give the user a free gift such as a worksheet, ebook, or white paper for joining.
Drag And Drop A Form Widget
Begin by dragging the Form widget onto a page. The Form widget immediately creates a basic form which already contains a name field, an email address field, a message textarea, and a submit button.
Content > Form Fields
In the Form options panel, begin in the Form Fields section by giving the form a name, such as 「Subscribe Form」.
Next we see the 3 fields that were automatically generated when the widget was inserted: Full Name, Email, and Message.
For a typical lead generation form, there is no need for a message field, so delete it by clicking the X at the far right of the field option, leaving just the name and email fields. If you want to add new fields, just click the Add Item button to do so, but we only need two fields for this particular example.
Now let』s take a closer look at the options available for each field.
A Field』s Content Tab
Type – Under the field』s Content tab, you can select the Type of field. The Name field, for example, is a Text field type, which simply allows a user to type any standard text into a one-line field. The Email field, on the other hand, has a type of Email, which only accepts text that is in the appropriate email format, containing both an @ and a dot.
Label – Next is the Label option. Although it is not required, we recommend you provide a Label, even if you decide to hide it for display purposes, because this text is displayed in the email you receive when someone submits the form.
Placeholder – Next is the Placeholder option. This is an optional bit of text that helps the visitor understand what to place in this field.
Required – Now, set the Required toggle to Yes if you want the field to be required, or No if not. For most subscription forms, both the Name and Email fields are usually necessary, so set both of these to Yes. At the bottom of the Form Fields section, you can choose to Show or Hide the Required Mark. Set it to Show if you want the typical red asterisk next to the field labels. Just above the Required Mark option is the option to show or hide the Labels themselves. Of course, if you hide the Labels, then the Required Marks will be hidden as well, since they are attached to the Labels.
Column Width – In many cases, a thin subscription form is desirable, so instead of taking up so much vertical space, place the name and email fields on the same line. To do this, click the Name field, which opens up the field』s options. Change the field』s Column Width from 100% to 50%. Now do the same for the Email field. Once both fields』 column widths are set to 50%, the two fields should be on one row, side by side.
A Field』s Advanced Tab
Now let』s quickly take a look at the fields』 Advanced tab. In most cases, you will not need to make any adjustments here.
But one thing of importance to note is that the ID field here should never be blank. If, for some reason it is blank, type an ID name manually. Without an ID, the form won』t work properly. You』ll notice that the Shortcode contains the ID name within it. The Shortcode is the code you can copy/paste into the emails that get sent if you wish to have that particular field data sent out. By default, emails send all field data, by using the auto-generated shortcode [all-fields]. But in some situations, you may not wish to have every field』s data sent within the email. In that case, you would manually enter the shortcodes of the fields you do want included.
For a normal subscription form, you would leave these Advanced options as they are, assuming they each have an ID assigned.
See the Form Fields documentation for additional details on working with field data.
Content > Buttons
Now set the options for the form』s buttons. Most simple forms, such as this one, only have one button – the Submit button. If you are creating a multi-step form, however, you would also have a button for each step.
First, choose the Size of the form』s Submit button. This option gives you a few 「preset」 styles which set the buttons font size and paddings, primarily. You can adjust these later in the widget』s style tab, but if you are looking for a quick setting, this would be the place to make that choice.
Next, you』ll set the button』s Width. For small forms, the 20% option is usually a good choice, but use whichever width works best for your particular style.
Since this form isn』t a multi-step form, we can skip the Multi-step button options. In the Submit field, type the button』s text. Default is Send, but other popular choices might be Subscribe, Get Started, Sign Up, etc.
Next, choose an Icon to display next to the Submit text on the button if you like. If you choose to display an icon, two new options will appear. Icon Position allows you to choose whether to place the icon before or after the Submit text, and Icon Spacing lets you adjust the amount of space between the icon and the Submit text.
In some cases, you may want to add a unique Button ID, which can be used in custom code when needed. Normally, this is left blank, and you should leave it blank for this demonstration.
See the Submit Button documentation for additional details on all the button options.
Content > Actions After Submit
This section allows you to add actions that will be performed after a visitor submits the form. The primary, default action is to send an email with the form』s data to someone. Other typical actions might be to redirect the user to a particular page or connect to a 3rd-party marketing platform such as Mailchimp. For this example, we』ll do each of those actions.
Email Action
As mentioned, the Email action is already added for us by default. You can see it in the Add Action area. If you don』t want the form submission data to be emailed to anyone, you could delete this action by clicking the X next to Email. Of course, we normally want to email the data, so leave this action in place. Now notice that you have an Email tab under the Actions After Submit tab. Every action added will create its own options tab beneath this.
The Email tab has a number of options. See the Send Results Via Email to the Site Administrator(s) section of the Actions After Submit documentation for full details. By default, the settings here will send an email with the data from all form fields to the site administrator. You can adjust who the form goes to, what data is included, and more.
MailChimp Action
Once you』ve determined that these settings are as you want them to be, it』s time to add another action. This time, open the Actions After Submit tab again, and click in the field next to Email to open the dropdown selections to choose from. For purposes of this example, choose Mailchimp. This adds a new tab below the Email tab called MailChimp. Click that tab to open it.
Assuming you haven』t already set up your MailChimp integration, you』ll receive this message:
Set your MailChimp API Key in the Integrations Settings. You can also set a different MailChimp API Key by choosing 「Custom」.
Just click the Integrations Settings link to open a new browser tab where you can enter your MailChimp API key.
Once the key is set there, you will be able to select an Audience list from the dropdown in the form』s MailChimp tab. Doing so will automatically add the user』s name and email address to your MailChimp list when they submit the form. If there are any problems with the integration, please see the integration document for the 3rd party platform you are using. In this example, you would read the MailChimp Integration document for tips on troubleshooting problems with this integration.
Redirect Action
Finally, let』s add one last Action After Submit. Open the Action After Submit tab, click the field and select Redirect from the dropdown. This adds a new Redirect tab beneath.
Click the Redirect tab to open its options and enter the URL of the page you want to redirect the user to once the form is submitted. This can be any page you have previously created for this purpose. For this example, it would be a page that thanks the user for signing up, and supplies the user with the freebie that you are offering or information on how to download it.
Content > Additional Options
Because this is not a multi-step form, skip the Steps Settings tab and open the Additional Options tab. The Form ID is optional, but if you need to target this form with an ID for some custom code, you can enter a unique ID here. Otherwise, leave it blank.
Set Custom Messages to Yes to be able to enter specific wording desired for each of the messages that might be given to a user. For example, you might want to change 「An error has occurred」 to read instead, 「Sorry, but an error has occurred.」 Please note that the Custom Messages are fallback messages when the browser does not display its own error. Very often, users will never see these specific messages.
See Additional Options documentation for full details.
Style
Now that you have your form in working order, it』s time to style it a bit. Click the widget』s Style tab.
Each portion of the form can be styled, including the Form itself, the Form Fields, the Submit and Multi-Step Buttons, the Messages, and the Steps (if used).
See Form Style documentation for full details on styling each of these areas.
Test Your Form!
Once you』ve styled the form to your liking, you』re done. Publish or update the page, and fill out your form to make sure it works as expected. If you have any problems, check our form troubleshooting guide for help.
More Fun With Forms
If you want to learn how to do more fun things with Elementor Forms, read on:
Subscribe Form Popups
If you would like to create a Subscribe Form Popup, see this tutorial:
Multi-Step Forms
If you』d like to learn how to create a multi-step form, see the Multi-Step Forms documentation or watch this tutorial:
Contact Forms
If you are interested in creating a Contact Form, watch this tutorial:
Send Confirmation Email
If you would like to send a confirmation email to the user, you will use the Email 2 Action After Submit field for this purpose. Just follow this guide:
The Google Maps widget is a really simple way to embed Google Maps in your website. This is very useful for contact pages, so your visitors can know where you are located.
Content
Location: Enter the location you wish to displayZoom: Set the zoom level of the mapHeight: Set the height of the map
Style
CSS Filters: Adjust the image style by changing the CSS Filter scales for Blur, Brightness, Contrast, Saturation, and Hue settings.Transition Duration (only on Hover): Set the amount of time to transition from one filter setting to the other when hovering over the map.
Advanced
Set the Advanced options that are applicable to this widget
Tip: To remove the gap around the Google Maps widget, and have the map span the full width of the page, change the Section width from Boxed to Full Screen, and set the Columns gap of the Section from Default to No Gap.
Important: In order to use the Elementor Maps Widget, you must first create an API key and place it in Elementor > Settings > Integrations. To learn more, see this article.
The Accessibility Improvement experiment aims to improve accessibility of Elementor widgets.
What is accessibility?
Web accessibility or a11y is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to websites by people with disabilities.
Tip: The word 「accessibility」 is often abbreviated as 「a11y」, which represents the first letter of 「accessibility」 (「a」), the last letter of the word(「y」), with 11 letters between the 「a」 and the 「y」. Pronounce a11y as either 「a-one-one-y」 or 「a-eleven-y」, not 「ally」, as those are numerical ones and not the letter L.
How will this experiment affect Elementor widgets?
Some Elementor widgets may need improvements to adhere to accessibility guidelines. For example, the Elementor Tabs widget creates empty anchor tags and missing screen reader states per tab which conflicts with accessibility guidelines. In addition, the empty anchor tags may be a negative search engine ranking factor. In the experiment added to version 3.1.0, we improved the Tabs widget accessibility by removing empty tags, adding selected tab state, and improving keyboard navigation. These changes help improve the ranking and accessibility of user』s sites.
Important: This experiment includes some markup changes which may affect any custom code that users have implemented in their websites. Because this is in the Experiments stage only, users should test the new, accessible Tabs widget on test sites only to avoid damaging existing sites.
Note: This experiment is automatically active on all NEW sites with a new install of Elementor only.
How To Use This Experiment
Go to Elementor > Settings > Experiments tab.Select Active from the Accessibility Improvements dropdown.Click the Save Changes button.
Multi-Step Forms allow you to create forms that have multiple steps, such that the user fills out a few fields, clicks Next, fills out a few more, clicks Next or Previous, etc. until the last step is completed, at which time the form can be submitted.
Steps are special form fields that act as separators and allow users to:
Choose the step indicator (e.g. Next / Previous)IconTextIcon + TextNumberNumber + TextProgress BarNoneAdd icon per stepCustomize steps appearanceControl over Next and Previous itemsValidate each step fields immediately
Content
See the Form Widget documentation for additional form elements.
Form Fields
Form Name: Enter a name for the form
Form Fields – A list of the fields in your form. You can duplicate, add or delete fields as you please. You can drag and drop to change their order.
Click on a field to view its settings. For Step fields, specifically, the following options are available.
Type – Choose Step to create a new Step fieldLabel – The name of the field, displayed on the form and on the email you receive from the user.Previous Button – Type the button』s label (e.g. Previous, Go Back, etc.)Next Button – Type the button』s label (e.g. Next, Continue, etc.)Icon – Select Button』s Icon, either None, Upload SVG, or select from Icon Library
Input Size – Set the height of the fields. Label – Show or hide the labels on the form.
Steps Settings
Type: Select the design of the Steps indicators, selecting from None, Text, Icon, Number, Progress Bar, Icon and Text, or Number and TextShape: Select the border surrounding the Step indicator, either Circle, Square, Rounded, or None
Style
Steps
Typography: Change the typography options for the Steps numbers
Spacing: Set the amount of space between the Steps and the form fields
Padding: Set the amount of padding around the Steps numbers
Inactive | Active | Completed
Primary Color: Set the color of the Steps numbers, for inactive, active, and completed states
Secondary Color: Set the color of the Steps background, for inactive, active, and completed states
Divider Width: Set the thickness of the divider line that separates each Step number
Divider Gap: Set the gap spacing between the divider line and each Step number
In order to save pages as a template to re-use in your website or kit use the following method:
Click the up arrow located to the right of the Publish / Update Button located at the bottom of the panelChoose Save as TemplateGive a name to your template and save
Your page will now be in your template library and available for use in your project or exporting to another site as a JSON file.
Tip: If you need to clone templates, you can use the above method. Save the template as a new name. Repeat the process as needed. The cloned templates will be in your library for editing. This is similar to 「Save As」 on a computer.
The audio playlist is a native WordPress feature and can be used in the classic editor, or block editor using the classic block. It uses mp3 files uploaded to the media library and very similar to creating an image gallery. In order to create an audio playlist in Elementor, you will need to use the Text Editor Widget.
Get Started
From the Basic Widget library, drag a Text Editor Widget to your page in the desired locationClick the Add Media button in the Text Editor controlsSelect the Create audio playlist from the options on the leftSelect the files you wish to be included in your playlist and click the 「Create a new playlist」 button in lower cornerSelect the playlist settings you wish to include. The track titles can also be edited at this time. Click the 「Insert audio playlist」 button in the lower cornerYou will now see the playlist in the editor panel. It will not show in the main window but be displayed as the shortcode. This is normal and will only show on the live pagePublish or Update your page and view from the preview icon or in another tab. Your audio playlist should be visible and working
Tip: Video Playlists may be created using the same steps above.
Note: Since this uses the media library and is stored in the uploads folder, the files can be downloaded by users using the developer tools or inspecting the code. It is recommended to upload clips or lower quality files if important to protect this from occurring.
