V4 Elements Form Estimated reading: 7 minutes 4 views Build a form for your visitors: a contact form, a quote request, a booking form and more. Start from a ready-made design, check every message in your dashboard, and keep spam out. No code needed. WIDGET Form READY DESIGNS 17 presets PLAN Free (some extras are Pro) A QUICK LOOK What You Will Build A contact form. If a visitor forgets a field, a friendly note shows what is missing. When everything is right, a thank-you message shows, and the message lands in your dashboard. The form asks for missing fields, then says thank you BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons first. That is all you need. Note: Messages are saved in your dashboard under Animation Addon > Submissions. Sending an email too needs a working mail setup on your site. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Turn On the Widget Good news: the Form is already on. If you ever need to turn it on again, it only takes a moment. In your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Under Form Widgets, find Form and switch it on. Click Save Settings. The Form card in your dashboard (click to zoom) STEP 2 Add It to Your Page Open a page in the Elementor Editor and drop the form in. Click the + button at the top left to open the Elements panel. Type Form in the search box. Drag the Form with the orange badge onto your page. Note: A new Form comes with First name, Last name, Email, Message, a checkbox and a Submit button. STEP 3 Start from a Ready-Made Design Do not want to build your form field by field? Pick a preset. Select the Form. In the General tab, open Presets. Click Apply a preset. Click the one you like. The ready-made designs. Contact (1) is used on this page (click to zoom) Note: A preset replaces your fields with its own. Pick a preset first, then edit the words. Contact Name, email, phone, message and a consent box. Used on this page. Address, All Fields, All Fields in Columns Forms that show many kinds of fields. Advanced Fields A form with a slider and a star rating. Doctor Appointment, Hotel Booking, Salon Booking, Event Booking Booking forms. Loan Estimate, Quote Calculator, Web Project Estimate Forms that work out a price or an amount. Multi-Step Contact, Multi-Step Lead Registration A form split into steps, with Next and Previous buttons. Newsletter (Pro) A simple email sign-up. STEP 4 Edit the Fields Open the Structure panel. The form is a list of small parts. Click any part to edit it. The Form (1), its Labels, Inputs and Text area (2), and the Submit button and messages (3) (click to zoom) Click a Label to change the words above a field. Click an Input to change its placeholder (the gray hint). Click the Submit button to change its words. Click the Success message and the Error message to change what visitors read after they send. Tip: Besides these, the Form also has Select, Radio, Checkbox, Password, Country, File Upload, Range, Rating and Calculation fields, and Next and Previous step buttons for multi-step forms. Drop them in from the Structure panel. STEP 5 Choose What Happens After Sending Open the Content section in the General tab. Submission Behavior: Store + Admin Email (default), Store Only or Email Only. Reset After Success (seconds): how long the thank-you message stays before the form clears. The default is 5. Use 0 to keep the message. Switch Hide Form After Success on to hide the fields, so only the thank-you message stays. Hide After (seconds): how long to wait before hiding the fields. Submission Behavior (1), Reset After Success (2), Hide Form After Success (3) and Hide After (4) (click to zoom) Tip: Use the States switch (Normal, Success, Error) at the top to see and style each look while you edit. Want more than an email, like sending the message to another service? Open Actions After Submit. Manage Actions (1) (click to zoom) Note: Manage Actions is a Pro feature. STEP 6 Keep Spam Out Open the Bot Shield section. Keep Honeypot on. It is a hidden field that only robots fill in. Set the Minimum Submit Time (seconds). A form sent faster than this is treated as a robot. The default is 3. Optional: choose reCAPTCHA v3 as the CAPTCHA Provider. Add your keys in Animation Addon > Submissions > Integrations first. Honeypot (1), Minimum Submit Time (2) and CAPTCHA Provider (3) (click to zoom) Tip: Blocked messages go to the Spam Log tab, so you can check that no real person was stopped. STEP 7 Style It Every part is a normal box. Click it in the Structure panel and open the Style tab. Click the Submit button. Add a Background (for example #f05a35), a Border Radius and some Spacing. Then click its text and set a white color and a size. Click an Input to change its border, radius and spacing. Click a Label to change its font size and color. Note: Your site’s own default text style can show through on the Submit button, for example as a big colored label. The steps above fix it. STEP 8 See Your Messages Every sent form is saved. Go to Animation Addon > Submissions. Your messages, with the form, the status and the date (click to zoom) Pick a form in All forms, or search for a word or an email. Click Export CSV to download your messages. Tick messages and click Delete to remove them. Tip: The other tabs are Spam Log, Action Jobs, Form Health and Integrations. RESULT Final Result The Contact preset with an orange Send Message button. The finished contact form SETTINGS Options Submission Behavior Default: Store + Admin EmailStore + Admin Email, Store Only or Email Only. Reset After Success (seconds) Default: 5When the thank-you message goes away and the form clears. Hide Form After Success Default: OffHides the fields after sending. Hide After (seconds) Default: 0Wait time before hiding the fields. Manage Actions ProMore things to do after a form is sent. Honeypot Default: OnA hidden trap for robots. Minimum Submit Time (seconds) Default: 3Faster than this counts as a robot. CAPTCHA Provider Default: NoneNone or reCAPTCHA v3. ID Optional CSS ID. GOOD TO KNOW More Details Friendly checks If a required field is empty, the form shows a note under that field, and nothing is sent. The thank-you stays a few seconds Then the form clears and is ready for the next message. Spam is logged Blocked robots are saved in the Spam Log, not lost. Many forms Add as many forms as you like. Each one is listed by name in Submissions. HELP Troubleshooting I do not see the Form in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and switch on Form under Form Widgets. Click Save Settings, then reload the editor. Type Form in the search box. I clicked send and nothing happened Wait 3 seconds after the page opens. A form sent faster than the Minimum Submit Time counts as a robot. Also check that every required field is filled. I do not get an email The message is still saved in Animation Addon > Submissions. For email, your site needs a working mail setup. A mail plugin can help. My button has a green or black label Click the Submit button and its text in the Structure panel and set the color and the background in the Style tab. The thank-you message is hard to read Click the Success message in the Structure panel, and choose a darker text color in the Style tab. I want to keep the message on screen Set Reset After Success (seconds) to 0. You Did It Your page now has a form that checks fields, says thank you, and keeps every message safe. If you face any problem, please contact our support team. We are happy to help.
