How to Setup Web Forms

When setting up website forms, the most important aspect is insuring deliverability to the email address(s) where submissions should be sent. While Elementor does have the ability to simultaneously capture form leads and store them into a database as a backup (via the Collect Submissions option), insuring form submissions are properly sent to recipients is critical.

* After pushing a site live (from a development / staging environment), all web forms should be tested and confirmed to be working by both the web developer and the client.

Operating Spaces

Step 1 - reCAPTCHA

Login to reCAPTCHA with your GRO account
Depending on the capacity, select Gro Marketing Sites or Gro Marketing V3
Click the Gear icon
Under Domains, add the live URL (ex. sightlink.co/) If you are operating on a dev site, gromarketing.site is already added to reCAPTCHA.
Click Save
Make sure the keys in Elementor match the keys in ReCAPTCHA. You can find the keys above the list of domains in ReCAPTCHA.

Step 2 - WordPress

Setting field ID's Within Elementor’s Edit Form tab, be sure to give each field a corresponding ID (under Advanced), so that the Shortcode is recognizable. This keeps things clean when submissions are stored in the database. This way, if a client exports a CSV of form entries, the table headers will be easily identifiable, instead of random alphanumeric characters.

Add reCAPTCHA v3 field as the last field
Set Actions After Submit to: Collect Submissions, Email, and Redirect
From Email tab, set all fields appropriately (see below)
Redirect tab - Click the icon for Dynamic tags, select Internal URL, click the wrench, Type = Content, Search & Select = (a Thank You page)

For Email, use these settings...

To = Clients email address
Subject = Create a relevant subject (you can also incorporate Field Shortcodes) (Ex. New message from [field id="name"])
From Email = noreply@gromarketing.site (dev sites) or noreply@domain.com (live sites)
Bcc = [email protected], [email protected]
Meta Data = Remove Credit

Step 3 - SendGrid

If you are operating on a dev site, save this step for post-launch.

Login to app.sendgrid.com
Under Settings, click Sender Authentication
Click the Authenticate Your Domain button
Step 1 - DNS host = Cloudflare
Step 2 - Select Yes
Click Next
Domain You Send From = newdomain.com
Click Next
Open Cloudflare and copy / paste DNS records
After entering all DNS records to Cloudflare, check the box I've added these records and the Verify button

It's giving me errors. What do I do? If it gives you errors, turn off proxy for each and try again. This might take a few minutes.

Step 4 - WP Mail SMTP

Make sure the WP Mail SMTP plugin is installed and configured.
From Email: [email protected] - Check Force From Email (This will change once the site goes live. If preparing from a live domain, use the live domain – Ex. [email protected])
From Name: Site Name (ex. The Campbell, Statehouse Tallahassee, SightLink, etc.) - Check Force From Name
In the Mailer section, the SendGrid box should be checked.
Insert API Key, if necessary (Copy API Key)
Set the Sending Domain to gromarketing.site. If preparing from a live domain, use the live domain – Ex. sightlink.com)

Test Email Delivery Test your email under WP Mail SMTP > Settings > Tools insert a valid email address in the Send To field, and click Send Email.

Be sure to check your Spam folder.

After site launch, it’s imperative to have the client test and confirm all form submissions are not only being sent, but also received at the appropriate addresses.