Devcron Platform
DashboardHome
  • Welcome
  • Platform News
    • Recents
      • Devcron Sites Are Now More Accessible
      • This Global Colors Feature Cuts Color Picks by 80% and Ups Scalability
      • Jump Start Your Site Membership by Actively Inviting Members
  • Overview
    • Platform Overview
    • Dashboard and Account
      • Dashboard Overview
      • Site Overview
      • Account Setting
      • Site Comments
      • Statistics and Analytics
  • Professional Website Builder
    • Getting Started
      • Editor Overview
      • Launching Your Site Checklist
      • Row Editor
      • Global Design
      • Global Colors
      • Responsive Tablet
      • Customize Background
      • Edit by Device
      • Switch Views
      • Sidebar Layout for Desktop
      • Global Text
      • Image Picker
      • Manage and Import Content
      • Add Sections
      • Arrange Content
      • Copy and Paste
      • Quick Access
      • Show Hidden Elements
      • Keyboard Shortcuts
      • System Requirements
    • Publishing Site
      • Go Live, Publish, and Set Up Your Domain
      • Purchase a Custom Domain
      • Configure Alternate Domains
      • Unpublish a Site
    • Pages and Popups
      • Pages and Popups
      • Configure a Multi-Language Site
      • Add a Navigation Folder
      • Change Home Page
      • Password Protected Pages
      • Publish a Single Page
    • Membership (New)
      • Add Membership Pages
      • Membership Plans
      • Bulk Invite Members to Membership Sites
    • Header and Footer
      • Headers
      • Header and Expandable Menu
      • Shrinking Headers
      • Footer
    • Content
      • Local Business Schema
      • Image Terms and Licensing
      • Image Size Guidelines
      • Image Editor
      • Add Premium Images (Shutterstock Images)
      • Video Backgrounds
      • Use the Color Picker
    • Connected Data and Dynamic Pages
      • Connected Data
      • Dynamic Pages
      • Collections
      • Internal Collections
      • Airtable Collections
      • Google Sheets Collections
      • External Collections
      • Create Dynamic Pages
      • Connect Your Dynamic Page Widgets
      • Add Lists to Display Dynamic Pages
    • Flex Editor
      • Flex Overview
      • Flex Breakpoints
      • Flex Design Panel
      • Add and Edit Flex Sections
      • Create Overlapping Elements in Flex
      • Flex Alignment and Spacing
    • Personalization Rules
      • Personalization Rules
    • Blog
      • About Blogs
      • Updating an Old Blog to the New Blog Platform
      • Blog Settings
      • Add and Edit Blog Posts
      • Manage Post Settings
      • Import Blog Posts from RSS Feeds
    • Custom Code
      • Custom Code Guidelines
      • Using HTML and Custom Code
      • How Can I Troubleshoot Custom Code?
      • Developer Mode
      • Google Analytics Integration
    • Site Settings
      • Site Settings
      • Site Icons
      • Backup Sites
      • Add SSL or HTTPS
      • Load Site in an iframe
      • Header HTML
      • Set a Default Site Language
      • Facebook Tracking Pixels
      • How to Add Schema Markup to Your Site
      • URL Redirects
      • Privacy Settings
      • Site SEO Settings
      • Introduction to SEO
      • Examples of SEO Keywords and Descriptions
      • IndexNow
      • Fonts Library
      • Security Measures
      • General Data Protection Regulation (GDPR) Compliance Information and Resources
      • The California Consumer Privacy Act of 2018 (CCPA) Compliance Information and Resources
      • Introduction to Core Web Vitals
      • Optimize Your Site for Core Web Vitals
      • Core Web Vitals FAQs
      • Lighthouse and Core Web Vitals Comparison
      • Progressive Web App (PWA)
      • Google Tag Manager Tracking
    • Edit On Mobile
      • Edit On the Go
      • Site Stats on Mobile
      • Use the Dashboard on Mobile
      • Edit Image Widgets on Mobile
      • Edit Image Slider and Photo Gallery Widgets on Mobile
      • Edit Click-to-Call and Click-to-Email on Mobile
      • Select and Add Images on Mobile
      • Link Picker
      • Backup, Publish, Re-publish, and Unpublish on Mobile
      • Edit Sites on a Tablet
  • Widgets
    • Widget Overview
      • Add Widgets
      • Edit Widgets
      • Widget Design
      • Outer and Inner Spacing
      • Inline Editing
      • Add Animations
      • Blog Widgets
    • Basic Widgets
      • Text Editor
      • Title Widgets
      • Button Widget
      • Floating Buttons
      • Breadcrumbs Widget
      • Icon Widgets
      • Table Widget
      • Navigation and Sub-Navigation Links
      • Anchor Tags and Links
      • Text & Image Widget
      • List Widget
      • Accordion Widget
      • Tabs Widget
      • Countdown Widget
      • Copyright Widget
      • Spacer Widget
      • Upload a File
    • Media Widgets
      • Image Widget
      • Photo Gallery Widget
      • Image Slider Widget
      • Video Widget
      • Troubleshooting Video Widget
      • Lottie Animation Widgets
      • Before & After Widget
      • Shape Widgets
      • Audio Widgets
    • Business Widgets
      • Contact Forms
      • Configure a GDPR-Friendly Contact Form
      • Contact Form Responses
      • Contact Form Integrations
      • Contact Form Troubleshooting
      • Zoom Widget
      • Map Widget
      • Google Calendar Widget
      • Click To Call
      • Click to Email
      • Business Hours
      • Multi Location Widget
      • Yelp Reviews
      • Online Scheduling
      • OpenTable Reservation Buttons
      • Restaurant Menus
      • Coupons
      • PayPal Button
    • Social Widgets
      • Instagram Feed
      • Reconnect Instagram Feed
      • Social Icons
      • WhatsApp Widgets
      • Social Share Widgets
      • Twitter Feeds
      • Facebook Feeds
      • Facebook Like Button
      • Facebook Comments
      • Disqus Comments
      • RSS Feeds
Powered by GitBook
On this page
  • Add Contact Form
  • Content Editor
  • Design Editor
  • Add Connected Data

Was this helpful?

  1. Widgets
  2. Business Widgets

Contact Forms

PreviousBusiness WidgetsNextConfigure a GDPR-Friendly Contact Form

Last updated 2 years ago

Was this helpful?

Use the Contact Form widget to add a complete web form to your site. The Contact Form widget allows you to provide visitors with a variety of input areas; specific text, drop-down, radio buttons, check boxes, date, time, email, and phone numbers. You can use the form for email newsletter opt-ins, customer questions, or simply to gather feedback from your site visitors.

Note

  • On radio buttons and check boxes, you can add images to display for the options. The images will not appear in the email received from the form submissions, but the selected label appears (even if hidden on the site).

  • We do not recommend duplicating contact forms, as this typically results in issues in the duplicated contact form.

Add Contact Form

To add the widget:

  1. In the left panel, click Widgets.

  2. Click and drag the Contact Form widget into your site.

To learn more about adding widgets to your site, see .

Content Editor

To access the content editor, right-click the widget, and click Edit Content.

On the Form Items tab:

  1. Decide what information you would like to collect from your visitors and then modify the existing fields by clicking the name of the field. To add new fields, click Add Field.

  2. Note

  3. If your form includes a File Attachment field, the file name must not include a space when uploaded. The file size limit for attachments is 10MB.

  4. Type the text you want to appear on the Submit button.

  5. By default, reCAPTCHA validation is added to new forms. This protects your form from spammers and speeds up the form submission process for site visitors. Select a reCAPTCHA position. Select to display the reCAPTCHA as an icon or text in the form.

  6. Type a Form title. To hide the form title, click the eye () icon.

  7. Note

  8. If you change the title of the form, the title only changes after a new response is submitted. To change the form name quickly, we suggest you submit a test response and wait a few minutes for the form to update.

On the Submission tab:

  1. To set the email address and subject for receiving form responses, click Submission recipients. Make sure to enter the email address in the Submission recipients step in order to have a copy of the information submitted.

  2. Note

  3. To set the confirmation and error messages to display when visitors submit a form, click Submission actions. Use the Rich Text Editor to add color, emphasis (bold, italics and underline), and bullets to text in the message boxes. To have the form redirect to a page after submission, click the Redirect to a page after submission toggle, and select the page to which you want to redirect.

  4. To add tracking code to your form, click Tracking, and paste conversion code or AdWords in the field provided.

Design Editor

To open the contact form design editor, right-click the Contact Form widget, and click Edit Design. In the design editor, you can change the button layout, items, frame, and spacing.

Layout

On the Layout tab:

  • Click the layout icon to select a layout design for the contact form.

  • To change the form alignment, click Left or Right.

Item

On the Item tab:

  • To make edits to the field style and field text, click Fields.

  • To edit the button style and button text, click Button. To revert back to the global style, click Revert to global design.

Frame

On the Frame tab:

  • To make edits to the frame style, click Frame Style. You can change the background by adding a color or image.

  • To change the text style of the title, click Form Title.

  • To change the text style of the submission notification, click Submission Message

Spacing

Add Connected Data

To add connected data to a contact form:

  1. Select the email address and additional fields you want to include in the contact form email.

  2. (Optional) Click Edit Content and make any necessary changes to the content. All changes will be synced with your content library.

  3. Click Done.

If the Submission recipient is empty, the primary email in the content library will be used. If no such email exists, the account owner will be used as the default submission recipient. All responses go to the .

On the Integration tab, send successful submission data to a third-party service. For more information, see .

To make edits to the padding and margins of the contact form, click the Spacing tab. For more information about spacing, see .

If you are having issues with the contact form, see .

You can connect the email address to the content library, or to an email field in collections. Additionally, you can add collection fields such as apartment ID or team member name to the email subject or as external fields sent in the form. Those additional fields will be available not just in the form email but also when accessing the form responses data from site overview. For more use cases, see the Product Overview. For more information on connected data, see .

Right-click the widget, and click Connect to Data.

form responses page
Contact Form Integrations
Outer and Inner Spacing
Contact Form Troubleshooting
Connected Data
Add Widgets