Creating a Contact Us Form

A Contact Us form is a great alternative when people are interested in reaching out to you. With a Contact Us form, you have more control over the type of information someone submits in comparison to when someone reaches out to you via email. 

Additionally, there is the ability to export a CSV of all your form entries on the backend – allowing you to keep submission information in a central and easily accessible location.

Lastly, it offers improved usability since they don’t have to leave your website and pull up their email account to get in contact with you. 

How to Create a Contact Us Form 

To make things easy for you, we’ve created a Contact Us form template you can use as a starting point for yours. In order to use the template, you’ll need to save this page as a JSON file (this will be the file type that automatically pops up). To save the page, you’ll right click and select “Save as” from the drop-down.

Save as a JSON

Once you’ve done that, follow the below steps, and get to building!

Find Forms in the back end
  • Under Forms, click Import/Export, select Import Forms and upload the importable form file you downloaded before. Once the form is uploaded, you’ll see a notification on the top of the page confirming a successful upload.
Import the Contact Us Form
  • Once the form has been uploaded successfully, you’re ready to start editing it. Click Forms in the left-hand navigation, go to your Contact Us form and select Edit.
Edit the Contact Us form
  • From here, you can adjust the Contact Us form as needed. The template’s fields include Name, Email Address, Phone Number and “What can we help you with?”. The asterisk (*) by a field indicates whether or not the field is required to be answered.
Contact Us form

Adjust the form fields

If you need to reorder the fields, simply drag and drop the field to the correct position.

Drag and drop form fields

To delete a field, click the X in the upper right-hand corner of the field when hovering over it.

Delete a form field

From here, further customize your form as needed. You can find additional fields to add on the right-hand side. The three types of fields will fall under the categories: Standard, Advanced, Post and Pricing.

Standard Fields include fields that provide basic form functionality. Advanced Fields include fields that are for specific uses. Post Fields allow you to add fields to your form that create blog post drafts in WordPress from the submitted data. Pricing Fields allow you to add fields to your form for selling goods and services. Both Post and Pricing Fields likely won’t be needed on a contact form.

Standard form fields

To add a field, simply click the field’s name to add it to the end of the form. Alternatively, you can drag and drop the field to where you’d like it to live on the form.

Add a form field

Update form field settings

Once you’ve settled on which fields should be added, you have the option to update the field settings based on your needs. There are three sections: “General,” “Appearance” and “Advanced.” We’ll focus on both “General” and “Advanced.”

Under “General,” these options will slightly differ based on which field you’re looking at. Some of these options include updating the Field Label, the Description and applying any rules to the form.

  • Field Label: To customize the field’s name that shows above the field, update the Field Label.
  • Description: To add some direction for submitters on how the field should be filled out or selected add this in the Description section.
  • Rules: Under Rules make the field required or turn on “No Duplicates” by checking the box. “No Duplicates” stops submitters from entering a value in that field which was already submitted by another person.

Below is an example of the Name field’s settings

Form field settings

Under “Advanced,” the only option you’ll most likely need to worry about is Conditional Logic.

Conditional logic creates rules to hide or show a field based on values from a different field. To show a field based on what was entered in another field, choose “Show” from the dropdown. To hide one, choose “Hide.” From there you can choose whether or not you want “All” or “Any” of the rules to match. Lastly, set the rules for when the field will show.

Enable conditional logic

The example is set up to show the “What can we help you with?” field when the “What are you reaching out about?” field’s answer is “Other.”

Conditional logic form field in action

Note: you can set multiple rules.

Make sure to click “Update” to save your changes as you make them. This will ensure that you don’t lose your progress as you’re building out your form.

Once you’ve set the fields and their settings, you’re ready to set up the global form settings, form notifications, the form confirmation and integrations!

Form Settings

Once you’ve finalized the fields, you’ll want to make sure the form’s settings are set up as well. In most cases, the default settings will be sufficient. However, we will touch on how to update the form title, description, button text and turning on animated transitions.

  • Go to Settings and click Form Settings.
  • Under Form Basics, update the title of the form and add a description (if needed). You’ll be able to choose whether to show these on the front end of the website, but we almost always recommend adding that content via headings and page content.
  • To edit the Button text, scroll down to the Form Button section and update the copy as needed. We recommend avoiding standard CTAs like “Submit” and instead using something that’s more personalized such as “Get in Touch.”
  • Scroll down to the Form Options section to turn on or off animated transitions. We recommend turning these on if you have Conditional Logic set up on the form.
  • Lastly, click “Update Form Settings” to save your updates.
Contact Us form settings

Form Confirmations

Confirmations are what the submitter will see immediately after they’ve submitted the form. It’s a great opportunity to let the submitter know that the form was submitted successfully. To set this up, you’ll need to decide where to send them after they submit. The options include text, a Thank You page or a redirect (a specific URL).

  • Go to Settings and click Confirmations.
  • Click “Edit” under Default Confirmation to review the Confirmation settings.
Edit form confirmations
  • While text and redirects are options, we highly recommend sending users to a Thank You page. In order to send a submitter to a Thank You page, you’ll need to set up a separate page. Once you’ve done that, select “Page” under “Confirmation Type.”
  • A dropdown menu will appear, where you can select the Thank You page. Scroll down until you find the correct page.
  • Once you’ve selected the appropriate Thank You page, click “Save Confirmation” to save your changes.
Selecting the Thank You page confirmation

Form Notifications

Notifications are set up so both you and the submitter receive email notifications after the form has been submitted. There are two types of notifications you typically want to set up: Admin and Submitter.

  • Admin Notifications: These are set up so your team is automatically notified via email when someone submits the form. You’re able to choose who to send these to and what type of information to include.
  • Submitter Notifications: These are set up so the submitter gets a follow-up email confirming that the form has been submitted. Additionally, it’s a great way to recap the details of the submission and reiterate next steps.

Admin notifications

  • Click “Edit” under Admin Notification.
Edit the admin notification
  • Update the “Send to Email” field to include all of the emails that the Contact Us form submission notifications should go to, separated by a comma.
  • Adjust the “Subject” and “Message” fields based on your preferences. You’ll want to make sure that “{all_fields}” remains in the message field to receive all of the submitted form information.
  • Click “Update Notification” to save your changes.
Update the admin notification settings

Submitter notifications

  • Click “Edit” under Submitter Notification.
  • Next to “Send To,” click the “Select a Field” option. Set the “Send to Field” option to “Email Address” to have the notification sent to the email address submitted on the form.
  • Add a “From Name” for the email, such as the name of your organization.
  • The “From Email” is automatically set to be the default admin email. Enter a different email address in this field if you prefer to use something different.
  • Under “Subject” and “Message,” customize the copy as needed. You can include any details on next steps or a timeline of when you’re planning on reaching out by. Additionally, you can use “{all_fields}” to automatically pull the form details into the email for them to have a record of their submission.
  • Make sure to click “Update Notification” to save your changes.
Update the submitter notification settings

Form Integrations

Typically you’ll want to integrate your form with a payment processor or email marketing service. However, for the Contact Us form, setting up integrations isn’t necessary. So, no need to worry about this step. You’re ready to get the form up on the page!

Displaying Your Contact Us Form on a Page

Once you’ve built out your form, you’re ready to add it to the Contact Us page. While the form is a key ingredient of the page, don’t forget to include items such as your phone number, email address, hours (if applicable) as well as a short introduction of why they should reach out.

  • Click Pages in the left-hand side navigation, and click the name of the page where your form will live. In this case, it most likely will be your Contact Us page.
Go to the Pages section
  • Once you’re on the page, place your cursor where you want the form to live and click the + in the upper left-hand corner and search for “Form.”
Add form to the page
  • After the Forms block has been added, choose the correct form to be placed on the page.
Select the Contact Us form
  • When the block is selected on the right-hand side, you’ll see the settings. From there, you can turn on or off the Form Title or the Form Description. We recommend you turn off both of these settings and instead use page content to include a heading and introduce the form.
Update the block settings
  • Once the form is added, make sure to preview the page to ensure it’s displaying correctly. The last – and perhaps most important step – is testing your form. Make sure you check all required fields and any conditional logic!
  • If all looks good and is everything is working as expected, publish your changes.

Still Have Questions?

Reach out to us within your Dashboard. Log into your website and then fill out the Website Support form. You’ll hear back from one of Wired Impact’s team members within one business day.