Contact Form Widget

Overview

This is where you’ll create a form on your site so people can submit information to your email address. It allows you to choose different components for the form, has a CAPTCHA validating feature and plenty of design options.

For example, you can hook up the contact form to Mailchimp to add anyone who contacts you to subscribe to be added to an email list.

Adding a contact form to your site

  1. Find the contact form widget in your site.
  2. Click and drag the contact form widget into a column in your editor.
  3. Done! You've added a contact form and can now customize the widget.

Contact form options

The contact form widget has several options to configure from the text style to integrating to 3rd party service such as Mailchimp.

These options are split into 2 tabs - Content and design. Under those two tabs, there are 2 sub tabs with additional options - Read more below.

Content

The content tab includes all the settings for the actual content of your form. Style the form items, submission settings and integration options here.

Form items

The form items section contains exactly that - the content of your form items, such as email, names, phone numbers, or any custom item you decide to put into your form.

See below for some form item options.

  1. Form item - Clicking this field will reveal a set of new options for the form field.
  2. Delete item - Delete a form field item.
  3. Move item - Click and drag this handle bar to easily re-order the form items.
  4. Add a new field - Add a new form field
  5. Change submit button text - Change the submit button text
  6. Set form title - Change the form title. The form title will also be what you see when users send a form from your site.
  7. Captcha - Prevent spammers! Require users to go through a captcha test to submit a form. It's only recommended to turn this on when you're having spam issues.
  8. Toggle form title - Hide the contact form title

Form items (expanded)

Clicking a form item will expand the options for that form field.

  1. Navigate between form items - Switch to the next or previous form item
  2. Field label - The displayed label, tells your users what to enter
  3. Field type - Change the field type. Depending on what field type you choose, it will change the configurable options for the field. It may also add validation - IE, requiring a valid email address for an email field.
  4. Placeholder - Shows when the field is empty - a "placeholder" for text. Use this to suggest what should be entered in the field.
  5. Required field - Require this to be entered before submitting
  6. Start a new line - Makes it so that this field begins a new line (vs being in the same line as other fields).
  7. Field size - Adjust the field size width.

Submission

The submission setting controls what happens and where the form goes when it's been submitted.

Submission recipients

  1. Navigate - Switch between submission options
  2. Email address - The email address thatcompleted forms will be sent to
  3. Email subject - The subject line of the form

Submission actions

  1. Thank you message - Shows a thank you message when the form is completed. This will not show if you choose to "Redirect to a page after submission" (3)
  2. Error message - Shows an error when the form is not completed correctly.
  3. Redirect to a page after submission - Redirects to a different page after submission. This is useful if you want to create your own custom thank you page.

Tracking

You can add tracking code to the contact form that will run once the form is successfully submitted, in order to track form submissions and conversions.

Code added to this field will execute inside of an iframe and will not be able to access content on the main website. You should add the code in standard HTML format, so JavaScript should be enclosed in <script> tags. 

View specific guidelines for common platforms below.

Integrations

You can extend the reach of your contact form, by integrating it with Google Sheets, Mailchimp, Constant Contact or a 3rd party application using Webhooks.

Google Sheets Integration

Have contact form submission data instantly added to a spreadsheet in Google Sheets.  All contact fields in the form will be populated into the spreadsheet, including a timestamp of when the form was submitted.

Steps

Click the Integrations tab in the contact form’s general settings area.

Expand the Google Sheets option and click SIGN IN WITH GOOGLE.

Click Allow to grant permissions to connect to your Google account.  If your computer is connected to multiple Google accounts, choose the one you’d like to connect to this form.

Choose if you want to add a data to an existing spreadsheet or to a new one.

Select the spreadsheet you’d like to submit the form data to.  You can select the spreadsheet from a list, or use the search bar to find a specific sheet.

Additional Considerations

  • If you have multiple forms on the site you can connect each one to a different spreadsheet, including spreadsheets in different Google accounts.
  • You can also connect a couple of forms to the same spreadsheet, in this case make sure that the fields and order in the form are identical to fit the info submitted.
  • Submitting form data to a Google spreadsheet does not prevent you from downloading the data as a CSV file, or from receiving form submission emails.

MailChimp Integration

MailChimp is a great tool for distribution of email campaigns, newsletters, and so on. By using the new form integration, site owners can manage contact lists of potential clients (site visitors) by collecting the email addresses, which are submitted to the form and sending them automatically to MailChimp.

You must have a MailChimp account. Once you have an account, create a mailing list in your MailChimp account where the contact details will be collected.

Steps

Click the Integrations tab in the contact form’s general settings area.

Expand the MailChimp option and choose CONNECT TO MAILCHIMP.

Sign in with your MailChimp credentials.

Select your MailChimp contact list from the drop-down menu.

Configure your form fields. In addition to the email address, Duda can automatically send first name and last name fields to MailChimp. You must setup the email / first name / last name fields within the form.

Constant Contact Integration

This is a similar integration to MailChimp, but allows site owners to create mailing lists in their Constant Contact account.

You must have a Constant Contact account. Once you have an account, create a mailing list in your Constant Contact account where the contact details will be collected.

Steps

Click the Integrations tab in the contact form’s general settings area.

Expand the Constant Contact option and choose CONNECT TO CONSTANT CONTACT

Sign in with you Constant Contact credentials.

Select your Constant Contact list from the drop-down menu.

Configure your form fields. In addition to the email address, Duda can automatically send first name, last name, and phone number to Constant Contact. The user is required to set up the email / first name / last name fields within the contact form. Email address and text message are added by default.

Webhooks Integrations

Numerous online and cloud services offer integrations via a path called webhooksWebhooks send notifications to a specific web address called the endpoint URL.  In Duda, you can connect the contact form to send an event when the contact form is submitted.

To connect the Duda contact form to another service using webhooks, you simply need to create a custom endpoint URL with your desired service, and paste it into the Webhooks integration field in the contact form.  Once you've added a webhook URL, Duda will send a POST request to the end point with the data in the body in JSON format, when the contact form is submitted on the website. Here's an example of the JSON data that will be sent:

{"Submission Date":"06/02/2016 10:23:54","Form Title":"Contact Us","Name":"John Smith","Email":"test@example.com","Phone":"(555).555.1212","Message":"Webhook Form Submission!"}

Please Note: that “Submission Date” and “Form Title” will always be provisioned, the other fields (field_name : value) are based on the fields which are configured in the form.

Creating an Endpoint URL

Endpoints are setup on 3rd party services (e.g. Zapier or Slack), or another server that you control.  These endpoints are specifically set up to receive notifications from the webhook.

Integration Ideas

Zapier - Connect contact form data to Zapier for unlimited possibilities. Connect with virtually any modern cloud service, including CRMs like Salesforce, Sugar CRM, Zoho and more.

Slack - Robust messaging APP, connect to receive notifications as soon as form data is submitted.

Custom Integration - Create your own custom Webhooks to integrate with the Duda contact form.  For example, save submissions into a database or connect to custom apps or 3rd party services.

Example Webhooks / Endpoint URL Setup on Slack

In the Slack app, open the main account dropdown, then click on Apps & Integrations.

The slack website will open up. In the upper-right corner, click the Build button.

Click on Make a Custom Integration

Select Incoming Webhooks.

Select an existing channel, or create a new channel where your messages will post to.

Copy your Webhooks URL.

Adjust the settings and options to your liking, then click Save Settings.

Then head back to Duda and paste your Webhooks URL into Webhooks field.  Click Done to complete the setup.

Preview your site and submit the contact form to test the integration.

If you see the message in your selected channel, congrats you’re all set up!  Now you’ll receive a message on Slack each time your contact form is submitted.

File Attachments

Files can be attached to contact form submissions. This can be accomplished by creating a file attachment field in the contact form. Links to uploaded files are available in the form submissions’ download file, as well as in any of the form integrations such as Webhooks and Google Sheets.

Steps

Add a new field to any contact form.

Select file attachment from the drop down menu. You can edit the placeholder text to change the name of this field.

A link to upload files will be added to your form.

Contact form troubleshooting guide

If you're not able to receive any form submissions that are being sent using a DudaMobile contact form, most likely it's because our mail is being filtered as spam on your email server's end.

IMPORTANT: This checklist only applies to contact forms built using Duda's contact form element.

Checklist

  • Check the form responses to ensure the contact form is working. You can click the contact form >>> click form responses to download it.
  • Check to see if the email is valid. If you're entering multiple emails, remember to use a comma between emails (no spaces) to separate them
  • Check your spam folder in your site
  • Check your email filter and blacklist settings to ensure that they're not being blocked
  • Add form-processor@dudamobile.com in your email white-list
  • Create a new page and insert your contact form there to see if it works
  • Turn off any custom scripts in your site in the site settings

Still not working?

If your contact form still doesn't work after running through that troubleshooting checklist, contact your email provider to look into why our contact form email submissions are not being received.

If it's working on another page in your mobile site but not the page it's supposed to work on, that usually means there's a custom script interfering with your contact form working. Either reset the page or check your page for any custom scripts that might be causing this issue.

×

Priority Phone Support

English phone support is available 18 hours a day,
Monday through Friday, 3am to 9pm (EST).

United States +1 866-776-1550 3am to 9pm (Eastern)
United Kingdom +44 (0)800-011-9071 8am to 2am (London)
France +33 (0)9-75-18-84-74 9am to 3am (Paris)
Israel +972 (0)3-720-8922 10am to 4am (Jerusalem)
Australia +61 (0)2-8880-9166 7pm to 1pm (Sydney)
To schedule a call in French, Portuguese, Hebrew or Russian, please email us at prioritysupport@dudamobile.com
×

Please Log in as a DudaPro

Priority Phone Support is available exclusively to DudaPros. Log in to your DudaPro account now to see our international support numbers.

Log In
Not a DudaPro? Start a free trial now!