Actions After Submit

Actions After Submit

Add actions that will be performed after a visitor submits the form (e.g. Open or close a Popup, Send an email notification, Connect to a third-party such as MailChimp, Redirect, etc.)

To learn more about the integration of services please visit this link.

To learn more about the form API visit the Elementor Developers section on our site here.

After A User Submits A Form, Then What?

A common question from first-time form designers is, 「 I』ve set up my Elementor form, but nothing happens when it gets submitted. Why?」

The answer is usually, 「 You haven』t yet set up the 「After Submit」 Actions.」

Once an Elementor form is submitted, you』ll want one or more actions to take place, and each of those actions requires a small amount of setup. Some common actions include:

Email the form results to one or more email addresses.Redirect the user to a 「Thank You」 page.Add subscriber information to a newsletter autoresponder serviceAdd user information to a CRMSend form data to a Slack or Discord ChannelOpen or close a Popup.

Elementor form actions give you powerful options. You can connect with 3rd-party services such as Mailchimp, Drip, Hubspot, Slack, or Convertkit to process the form information. Elementor has these and several more service integrations built-in, but you aren』t limited to connecting with just the built-in integrations. Your forms can also connect with services such as Zapier, via the Webhook action. Zapier connects to 1000+ other services and acts as a bridge between your form and those services. Read our extensive guide on using Elementor with Zapier here.

The list of available Elementor Form Actions currently includes: Email, Email2, Mailchimp, Redirect, Webhook, Drip, ActiveCampaign, GetResponse, and Convertkit, MailerLite, Slack, Discord, and Popup. To learn more about the integration of services, please visit this link.

Content

Actions After Submit

Add new actions by clicking inside the Add Action field. This will bring up a list of available actions to choose from.

Send Results Via Email

Choose Email action. This will add an Email tab.

Click Email tab to open its options.

To: The email address(es) the form submission results will be sent to. Add additional email addresses separated by commas.Email Subject: The subject of the emailEmail Content: The body of the email. By default, all form fields are sent via the shortcode: [all-fields]. Want to customize which fields are sent? Copy the shortcode that appears inside the fields you want to send and paste them here.From Email: The 「sent from」 email addressFrom Name: The 「sent from」 nameReply-To: The email address to send replies toCC: Email addresses to CCBCC: Email address to BCCMeta Data: Available meta data is included by default. Click the 「x」 on each to delete any that you don』t wish to include in the email.Send As: Select the format in which to send the email, either HTML or Plain

Important! Only shortcodes located in the advanced tab of the form fields widget can be used. You cannot use shortcodes from anywhere else here. Adding other shortcodes from other plugins or elsewhere will cause a server error message. The shortcode needs to be written exactly as it appears in the form field』s advanced tab, with one exception. If the shortcode in the advanced tab is of the format [field id=email], you must wrap the field name in straight quotes, so you would need to change [field id=email] to [field id="email"].

Send Email Confirmation To The User Who Submitted The Form

Configure Email2

Email2 is very useful. For example, it could be a confirmation email received by your site』s visitor – immediately after he sent a form on your site.

To create one, go through the same process as above for Email.

Note: In the 『To』 field you should input the shortcode located in the advanced tab of the email field [field id="email"].

Tip: You can personalize the confirmation email by using the submitter』s first name (『Howdy [field id="name"]』).

Here there is an example how to build the entire email content using HTML:

You got a new message!

Username: [field id="name"]

Email: [field id="email"]

Phone: [field id="tel"]

Message: [field id="message"]

Don』t forget to call them back soon 🙂

Important! Only shortcodes located in the advanced tab of the form fields widget can be used. You cannot use shortcodes from anywhere else here. Adding other shortcodes from other plugins or elsewhere will cause a server error message. The shortcode needs to be written exactly as it appears in the form field』s advanced tab, with one exception. If the shortcode in the advanced tab is of the format [field id=email], you must wrap the field name in quotes, so you would need to change [field id=email] to [field id="email"].

Redirect To A Thank You Page

Choose Redirect action. This will add a Redirect tab.

Click Redirect tab to open its options.

Redirect To: Enter the URL of the page to redirect the user after form submission.

Add Subscriber To A Newsletter Email Marketing Service or User Information to a CRM

Choose any of the 3rd Party services. This will add a new tab for that service.

Click the tab for the chosen service to open its options.

API Key: Enter your API key for the chosen service here. You must first set up your API credentials in the Integrations Settings. You can also set different API credentials by choosing 「Custom」.List / Account: Select the list or account to send the form information to.

Use Zapier To Connect Your Form To Any Of Thousands Of Other Services

Choose Webhook action.

Click Webhook tab to open its options.

Webhook URL:Enter the integration URL (like Zapier) that will receive the form』s submitted data.Advanced Data: Slide to YES to send Advanced Data to the webhook, which will include meta data such as Date and Time, Remote IP, etc. It will also send the data as an array, such as:[ 『Name』 => 『John Doe』, 『Email』 => 『[email protected]』, 『Message』 => 『Please contact me』 ]If Advanced Data is set to NO, the data will be sent in Simple form, which will send the form fields to the webhook as a text message, such as:「Name: John Doe, Email: [email protected], Message: Please contact me.」

Send Form Data To A Slack Channel

Choose Slack Action. This will add a new Slack tab.

Click Slack to open its options.

See the Slack integration documentation for more details.

Open or Close A Popup

Popups can be opened or closed after submission of a form.

Choose Popup Action. This will add a Popup tab.

Click Popup to open its options

Select Open Popup to choose a popup that will open after submission of the form. Enter one or more characters to generate a dropdown selection of available popups to choose from.Select Close Popup to close the current popup after form submission. You can also set the popup to Don』t Show Again.

Learn more about the Form Widget (Pro)

500 Error While Using Elementor

500 Error While Using Elementor

Table Of Contents

Common Reason: Not Enough Memory AllocatedFatal ErrorsHow To Troubleshoot a 500 ErrorDoes This Only Happen When Saving Changes?

500 errors are server issues and can occur for many different reasons. If you receive a 500 error while using Elementor you must check the PHP error logs of your server to determine the cause of the problem. If you do not know how to produce PHP error logs please send this guide to your hosting company: https://wordpress.org/support/article/debugging-in-wordpress/ . If your hosting company is not able to solve the issue, you can open a ticket with support and send us the error logs.

Common Reason: Not Enough Memory Allocated

Sometimes, this error message is received because of a memory limit issue. The memory limit has to be set to at least 128MB according to our requirements. To be sure that this is a memory issue, you can ask your hosting company to send you the PHP error logs of your server.

Fatal Errors

There are other things that can lead to this issue (for instance, a fatal error or an issue with a third-party plugin) and without the error logs it is not possible to know what is the exact issue.

How To Troubleshoot a 500 Error

As mentioned above, the first step in troubleshooting is to see what issue is shown in the PHP error logs. If the logs don』t give you precise clues, you can try this troubleshooting technique next: Deactivate your plugins (besides Elementor and Elementor Pro) and switch to a default theme of WordPress such as Twenty Nineteen to rule out a conflict with a third-party product.

Does This Only Happen When Saving Changes?

If the issue happens when you want to save changes, please follow this guide

How To Fix Custom CSS Not Working

How To Fix Custom CSS Not Working

Occasionally some CSS changes may not appear immediately after adding them to our websites. Below are a few common solutions to help with this:

How to fix it?

Regenerating CSS: This can easily be fixed by going to WP admin > Elementor > Tools > Regenerate CSS. Then, you can clear the cache (WP cache and browser cache) and refresh the page.Clearing Site Cache: Check if you have any caching plugins on your site or any server level caching enabled. Clear those caches.Clearing Browser Cache: Clear Browser cache or check the site in a private/incognito window.Theme Compatibility: This issue can be because of the theme. You can try changing to the default theme of WordPress such as Twenty Twenty-One and if it solves the problem, contact the developers of your theme.Multiple Builders: If you are using another page builder alongside Elementor, it can override the content you have made with the builder and hence it stops from displaying the changes. To solve this issue, save the template and then add it on to a new page and it will resolve the problem.

How To Change Sticky Header Color On Scroll

How To Change Sticky Header Color On Scroll

Changing a transparent header to an opaque header on scroll can be achieved in several different methods and with custom code. However, if you would like a simple Elementor solution, you may follow the tutorial below; using the native Scrolling Effects.

Let』s Get Started

If you have not already done so, you will need to create a custom Header Template using the theme builder. Start by creating a two column header section with your logo in an Image Widget and a Navigation Widget.

Use The Advanced Tab

For the next steps we will be using the Advanced Tab in the Section Controls.

Change the Margin

The most common way of creating a transparent header is to give the section a negative margin equal to the height of the section. From the Advanced Tab, unlock the margin controls and set the bottom to a negative value (example: -125px). This will move the section that is below the header to move to the top of the page.

Set The Z-index

You will also need to increase the Z-index of the section to make sure that it always remains on top of the content. You may enter any number higher than the rest of your website』s content, but many designers enter 1,000.

Set to Sticky

From the Motion Effects accordion, select the Sticky option from the dropdown and set to Top.

Adding The Effect

Now that we have a basic transparent header section created, we will add the scrolling effect.

Use the Style Tab

For the following steps we will be using the Style Tab in the Section Controls 

Setting The Final Color

From the color picker, set the final background color or gradient in the color picker.

Adding the Scrolling Effect

From the controls panel, toggle the Scrolling Effects selector.

Set the Values

From the viewport sliders, we now need to adjust the values to create the desired effect. Scroll to the spot on your page where you want to have the full opacity and decrease the Top value until your heading is 100% opacity (example: 25%). You may now increase the value of the Bottom. In the example above we wish the effect to happen rather quickly so we will set the values very close together (example: 22%). This will cause the effect to happen over a 3% page scroll.

Finalizing

You will need to adjust or make allowances for mobile and tablets. It is a matter of finding that sweet spot.

Custom Fonts Not Displaying On Front End

Custom Fonts Not Displaying On Front End

Table Of Contents

Cache IssueHTTP / HTTPS mis-matchCORS Error in ConsoleImporting TemplatesFont Weight Selected Is Not AvailableInvalid Custom CodeNot Including All Font Variations

There are several possible reasons why your custom fonts may not be displaying on the front end.

Cache Issue

The problem may be a cache issue.

If you are using a WordPress cache plugin, clear it. If your host uses server-side caching, clear it as well. You may need to ask your host to help you clear it. Finally, clear your browser』s cache. For more info on WordPress and cache, see https://codex.wordpress.org/I_Make_Changes_and_Nothing_HappensAfter clearing all cache, check again. You may need to use another browser, or a browser in incognito mode if the browser』s cache did not fully clear.  

HTTP / HTTPS mis-match

If you』ve recently migrated from HTTP to HTTPS, your font files may need to be re-uploaded, so they are being served from HTTPS. 

Go to Elementor > Custom Fonts. If the URLs listed do not begin with https, click the DELETE button next to each, and then click UPLOAD buttons to re-upload the files.Go to Elementor > Tools and click the Regenerate CSS buttonThe URLs should now begin with https and your fonts should appear on the front end.

If this is still not working, you may have encountered other issues when you previously migrated to HTTPS.

Go to Elementor > Tools > Replace URLIn the 「Old URL field」 put the site URL with HTTP and in the New URL put the site URL with HTTPS.Click the Replace URL button.Click the Save Changes button.

Finally, go to WordPress』 settings at Settings > General

Ensure both the WordPress Address (URL) and the Site Address (URL) both begin with https

CORS Error in Console

If your custom font is not showing and you receive a CORS error in your browser』s console, you need to contact your host, as they will need to modify the server』s CORS policy. In order to resolve this, changes must be made to your server. Please contact your hosting company to report this issue. Here are useful guides from external sources that you could provide to them.

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

https://htaccessbook.com/increase-security-x-security-headers/

Importing Templates

If you』ve imported a template that included custom fonts, you will need to add the custom fonts manually, because the fonts of these templates won』t be imported automatically.

Font Weight Selected Is Not Available

Custom fonts may not have all available font weights available. If you select a specific font-weight in Typography options, but your custom font does not have that specific weight available, it may not display that font at all. In this case, select a different font weight that is available for your custom font.

Invalid Custom Code

If invalid custom CSS or other code has been added to the site, this can cause many different display problems, including the inability to display custom fonts. Remove or fix the improper code to solve this issue.

Not Including All Font Variations

If custom fonts are not displaying on iOS devices for example, please ensure you have uploaded all font variations, including .ttf .svg .woff .woff2 and .eot

If any variations are missing, in some cases, a default font will be displayed, however, in other cases, the text will be completely gone and invisible on the website.

This can happen because different browsers render fonts differently, so to prevent any inconsistencies, it is important to add all font variations to maintain full browser support.

In order to fix this issue, you can use the Generator tool from Font Squirrel.

From there, you can check options as shown below:

Step 1: 

Step 2: 

Step 3:

You will get the .zip file with all font variations inside. Extract the .zip file and upload all variations to your site』s Custom Fonts section. Learn how.

Hotspot Widget (Pro)

Hotspot Widget (Pro)

The Hotspot Widget focuses on helping you create interactive images that can help you highlight relevant information, boost engagement and increase conversions for your website.

Controls

Background

Image – Chose the background image of the viewportImage Size – Choose the appropriate size based on width and height of wrapperAlignment – Choose between left, center, or right alignment

Hotspot

Content

Label – Enter text to display a label rather than a icon indicatorLink – Enter a URL link for the hotspot. Dynamic Options may be appliedIcon – Chose the icon of your hotspot from the library or upload your own in SVG formatCustom HotSpot Size – Toggle this to enable a custom size for the LabelMin Width – Adjust the width of the LabelMin Height – Adjust the height of the LabelTooltip Content – Using the text editor, enter the content you wish to display in the tooltip content HTML is allowed

Tip: You can use the Dynamic Options in the Link to open an Elementor Popup rather than a tooltip.

Position

Horizontal Orientation – Choose the starting position of your hotpot between left or rightOffset – Use the slider to adjust the horizontal position of the hotspot in %Vertical Orientation – Choose the starting position of your hotpot between Top or BottomOffset – Use the slider to adjust the vertical position of the hotspot in %Custom Tooltip Position – Provides additional options for display for only the current hotspotPosition – Choose between Left, Top, Right, or BottomWidth – Adjust the width of the box in PX or %Text Wrapping – Toggle this to enable text wrapping in your HotspotAnimation – Select the animation of your iconSequenced Animation – Toggle to select the use of a sequenced animation effectSequence Duration – If sequenced animation is selected, determine the duration of the animation sequence in ms

Tooltip

Position – Chose the position of the tooltip content between Left, Top, Right, or BottomTrigger – Select between Hover or ClickAnimation – Select the animation for your tooltip to appearDuration – Adjust the time of the animation in ms

Note: If the Custom Tooltip Position is enabled, the Custom Box Position will be used, rather than the general Tooltip Position.

Style

Background

Width – Adjust the width of your background image in px, %, or vwHeight – Adjust the height of your background image in px, %, or vhOpacity – Adjust the opacity of your background image

Hotspot

Color – Use the color picker to choose your hotspot colorSize – Adjust the size of your hotspotTypography – Select the font properties of the hotspot labelWidth – Adjust the width of the hotspot label area in px or %Box Color – Use the color picker to choose the label background colorPadding – Adjust the padding of the labelBorder Radius – Set the border radius of the labelBox Shadow – Create a shadow effect for the label box

Tooltip

Text Color – Use the color picker to choose your tooltip content text colorTypography – Select the font properties of the tooltipAlignment – Choose left, right, justified text alignment of the tooltip

Box

Width – Adjust the width of the tooltip box in px or %Padding – Set the padding of the tooltip box in px, em, or %Color – Use the color picker to choose your tooltip background colorBorder Radius – Set the border radius of the tooltip boxBox Shadow – Create a shadow effect for the tooltip box

Advanced

There are no additional options specific to this widget in the Advanced tab.

Hotkeys

Hotkeys

Hotkeys are keyboard shortcuts that can be used to do some common actions in Elementor. It saves you a lot of time because you don』t have to click anything.

You can easily access the Hotkeys by clicking Cmd/Ctrl + ? on your keyboard.

Here is a list of the currently available hotkeys:

Actions

Undo Ctrl / Cmd + Z Undo any change made on the pageRedo Ctrl / Cmd + Shift + Z Redo any change made on the pageCopy Ctrl / Cmd + C Copy a Section, Column or Widget   Paste Ctrl / Cmd + V Paste a Section, Column or Widget   Paste Style Ctrl / Cmd + Shift + V Paste a Section, Column or Widget』s StyleDeleteDeleteDelete section / column / widget that is editedDuplicate Ctrl / Cmd + D Duplicate section / column / widget that is editedSave Ctrl / Cmd + S Save your page to the revision history

Go To

FinderCtrl / Cmd + EGo to the FinderPanel / Preview Ctrl / Cmd + P Switch between the panel and preview viewMobile Editing Ctrl / Cmd + Shift + M Switch between desktop, tablet and mobile viewsHistory Ctrl / Cmd + Shift + H Go to the History panelNavigator Ctrl / Cmd + I Opens the NavigatorTemplate Library Ctrl / Cmd + Shift + L Opens Template Library modalKeyboard Shortcuts Ctrl / Cmd + ? Opens Keyboard Shortcuts Help WindowTheme Builder Ctrl / Cmd + Shift + E Opens Theme BuilderQuit ESC Opens Settings and jumps to Exit to Dashboard

Form Submissions

Form Submissions

With Elementor Form Submissions feature you can backup your form submissions data, access it whenever you want, and manage it all from one place. Having your submissions info allows you to gather insights, analyze a campaign』s data, or simply manage your submissions from within your WordPress dashboard.

Note: This is an experiment. Make sure you turn it on under Elementor > Settings > Experiments tab.

Create a new page or edit an existing one and click Edit with ElementorDrag in a Form widget to your pageBy default, the Actions After Submit section includes the Collect Submissions optionTo view the collected submissions go to Elementor > SubmissionsClick to View, Edit, Delete, and 『Mark as read』 any form submission

Note: This does not apply to older forms, to enable this just add it under 「Actions after submit」

Exporting Submissions

You can export your submissions by: Page name, Form name, Time frame, and All. Click Export All to CSV to export your selected submissions.

Please note: Form Submissions is GDPR compliant and uses the WordPress native Export and Erase user information tools so you』ll be able to get access to all of your data in your WordPress admin.

Custom Fonts Not Displaying On Front End

Custom Fonts Not Displaying On Front End

Table Of Contents

Cache IssueHTTP / HTTPS mis-matchCORS Error in ConsoleImporting TemplatesFont Weight Selected Is Not AvailableInvalid Custom CodeNot Including All Font Variations

There are several possible reasons why your custom fonts may not be displaying on the front end.

Cache Issue

The problem may be a cache issue.

If you are using a WordPress cache plugin, clear it. If your host uses server-side caching, clear it as well. You may need to ask your host to help you clear it. Finally, clear your browser』s cache. For more info on WordPress and cache, see https://codex.wordpress.org/I_Make_Changes_and_Nothing_HappensAfter clearing all cache, check again. You may need to use another browser, or a browser in incognito mode if the browser』s cache did not fully clear.  

HTTP / HTTPS mis-match

If you』ve recently migrated from HTTP to HTTPS, your font files may need to be re-uploaded, so they are being served from HTTPS. 

Go to Elementor > Custom Fonts. If the URLs listed do not begin with https, click the DELETE button next to each, and then click UPLOAD buttons to re-upload the files.Go to Elementor > Tools and click the Regenerate CSS buttonThe URLs should now begin with https and your fonts should appear on the front end.

If this is still not working, you may have encountered other issues when you previously migrated to HTTPS.

Go to Elementor > Tools > Replace URLIn the 「Old URL field」 put the site URL with HTTP and in the New URL put the site URL with HTTPS.Click the Replace URL button.Click the Save Changes button.

Finally, go to WordPress』 settings at Settings > General

Ensure both the WordPress Address (URL) and the Site Address (URL) both begin with https

CORS Error in Console

If your custom font is not showing and you receive a CORS error in your browser』s console, you need to contact your host, as they will need to modify the server』s CORS policy. In order to resolve this, changes must be made to your server. Please contact your hosting company to report this issue. Here are useful guides from external sources that you could provide to them.

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

https://htaccessbook.com/increase-security-x-security-headers/

Importing Templates

If you』ve imported a template that included custom fonts, you will need to add the custom fonts manually, because the fonts of these templates won』t be imported automatically.

Font Weight Selected Is Not Available

Custom fonts may not have all available font weights available. If you select a specific font-weight in Typography options, but your custom font does not have that specific weight available, it may not display that font at all. In this case, select a different font weight that is available for your custom font.

Invalid Custom Code

If invalid custom CSS or other code has been added to the site, this can cause many different display problems, including the inability to display custom fonts. Remove or fix the improper code to solve this issue.

Not Including All Font Variations

If custom fonts are not displaying on iOS devices for example, please ensure you have uploaded all font variations, including .ttf .svg .woff .woff2 and .eot

If any variations are missing, in some cases, a default font will be displayed, however, in other cases, the text will be completely gone and invisible on the website.

This can happen because different browsers render fonts differently, so to prevent any inconsistencies, it is important to add all font variations to maintain full browser support.

In order to fix this issue, you can use the Generator tool from Font Squirrel.

From there, you can check options as shown below:

Step 1: 

Step 2: 

Step 3:

You will get the .zip file with all font variations inside. Extract the .zip file and upload all variations to your site』s Custom Fonts section. Learn how.

Icon List Widget

Icon List Widget

The Icon List Widget creates an easy-to-manage list of items, with each item highlighted by its own icon.

Content Tab

Layout

Choose Default or Inline. Default displays items in a vertical list, while Inline displays items horizontally.

Items

Text: Enter the list item』s textIcon: Select the icon for the itemLink: Enter the URL for the item』s link. Click the Link Options cog to either add rel=nofollow to the link or to open the link in a new window.

Note: Both the text and the link of the Icon List items can be generated dynamically by clicking the Dynamic icon next to each, and choosing the source of the data.

Tip: Quickly duplicate or delete items by clicking an item』s Duplicate or Delete icon 

Style

List

Space Between: Control the space between list itemsAlignment: Align the list left, right, or centerDivider: Turn the item divider lines on or off

If the Divider option is turned on, the following style options become available:

Style: Choose from Solid,Double, Dotted or DashedWeight: Set the thickness of the dividerWidth: Control the width of the divider relative to the containerColor: Choose the divider』s color

Icon

Color: Choose the icon』s colorHover: Choose the color of the icon』s hover stateSize: Set the exact size of the iconAlignment: Align the icon left, right, or center

Text

Text Color: Choose the color of the textHover: Choose the color of the text』s hover stateText Indent: Set the distance between the icon and the textTypography: Set the typography options for the text

Advanced

Set the Advanced options that are applicable to this widget