THIS ARTICLE COVERS WORDPRESS, SQUARESPACE AND WIX.
(Notes relevant to SquareSpace and Wix at the end of the article).
Watch the video below to create and download a website inquiry form. You should send this webform to your web developer.
QUICK TIP - You can add your web developer as a user and give them access to just settings and they can easily do all this for you!! 😊
Learn how to build and customize a web inquiry form to capture lead information directly from your website. This guide covers setting up fields, mapping data to your CRM, and generating the embed code.
How do I start creating a new web inquiry form?
To get started, you'll need to navigate to the settings area and locate the web forms section. From here, click on the button to create a new form. This will open up the form builder where you can begin defining the purpose of the form and how it will appear to your prospective clients.
💡 Action Steps
Navigate to Settings
Click on Web Forms
Click Create New Form
How do I add fields to my inquiry form?
You can add fields by selecting them from the available list on the sidebar. Simply drag and drop the fields you need, such as First Name, Last Name, Email, and Phone Number, into the form canvas. You want to make sure you're capturing all the essential information needed to follow up with a lead effectively.
💡 Action Steps
Select fields from the sidebar
Drag and drop fields onto the form canvas
Include First Name, Last Name, Email, and Phone Number
How do I make a field required?
If there is specific information you absolutely must have, you can click on an individual field to open its settings and toggle the 'Required' switch. This ensures that the user cannot submit the form without filling out that specific piece of information, which is particularly important for contact details like email addresses.
💡 Action Steps
Click on an individual field
Open field settings
Toggle the Required switch
How do I map form fields to CRM contact fields?
It is crucial to map your form fields to the corresponding fields in your CRM so the data flows into the right place. Under the field settings, look for the mapping dropdown menu. Select the CRM field that matches the form field, such as mapping 'Your Email' to the 'Primary Email' field in your contact database.
💡 Action Steps
Open field settings
Locate the mapping dropdown menu
Select the corresponding CRM field
How can I customize the look and feel of my form?
You can change the appearance of your form in the styling tab. Here, you have the options to change the button color, adjust the font size, and modify the background colors to match your brand's website. You can also decide whether you want the labels to be visible above the boxes or as placeholder text inside the input fields.
💡 Action Steps
Go to the Styling tab
Adjust button color and font size
Choose between Field Labels or Placeholder text
How do I set up a confirmation message or redirect?
Once a user submits the form, you need to decide what happens next. In the post-submission settings, you can either write a custom 'Thank You' message that appears on the screen or enter a URL to redirect the user to a specific landing page on your website.
💡 Action Steps
Navigate to Post-submission settings
Type a custom Thank You message
Or enter a URL for Page Redirect
How do I set up notifications for new submissions?
To ensure you're alerted when a new inquiry comes in, go to the notification settings. You can add your email address or the addresses of your team members to receive an automated email every time the form is completed. This allows you to respond to new leads as quickly as possible.
💡 Action Steps
Go to Notification settings
Enter recipient email addresses
Save notification preferences
How do I save and preview the form?
Before you go live, click the save button in the top right corner. You can then use the preview button to see exactly how the form will look and function for a visitor. It's a good idea to run a test submission yourself to verify that the data is mapping correctly and notifications are firing.
💡 Action Steps
Click the Save button
Click the Preview button
Perform a test submission
How do I get the embed code for my website?
When you are happy with the form, click on the 'Embed' or 'Publish' button. This will generate a snippet of HTML code. You simply copy this code and paste it into the backend of your website, whether you are using WordPress, Squarespace, or a custom-built site, to display the form to your users.
💡 Action Steps
Click the Embed or Publish button
Copy the generated HTML code snippet
Paste the code into your website editor
Tips
💡 You should share this web page with you web developer. If you want your web developer to own the entire process (ie Creating the web form, styling it for your website, and putting it onto your web page), you should consider ADDING YOUR WEB DEVELOPER AS A USER for the initial setup period. Once the web form work is complete, you can delete them as a user. The choice is yours!
💡 Can I have a different web forms for different types of inquiries?
Where you can set different automation rules for leads for weddings vs corporate events vs funerals. All web form enquiries created by our contact forms are set to a default stage of New, but you can have multi forms which you can place on different pages on your website.
On a form, you can either have a default Event Type or provide a dropdown so the user can select the Event Type. If the Event type is set, you can set up an automation with a condition set on the Event Type such that the correct information is sent to the customer.
********************************************************************************
WEB FORM STEPS FOR YOUR WEB DEVELOPER
💡 TECHNICAL STUFF!! SHARE THIS PAGE WITH THEM.
The remainder of this article explains the general steps a web developer should use to add our webform to your website.You should share this web page with your web developer so they can watch the video and read this text.
You should download the web form and give it to your web developer. Alternatively, you can add your web developer as a user and get them to create and download the form.
We always advise setting up a Test Contact Us page to test the inquiry form. When you are happy, you can set the test page as the live page.
Please advise your web developer of the following:
1. We have put minimal style on the form, the web developer should edit the html/css to create the look of the form to match the look of the website.
2. All the html in the file can be edited, but the form input names, any classes on inputs and any values on hidden fields should remain the same (excluding the return_url input as noted in point 3).
3. The web developer must create a new page (contact success page) on the website. Once the form is submitted, the user will be redirected to this page. Usually, this page reads something like "Thank you for contacting us ...."
4. On the Form, the web developer must check the full URL for the contact success page (point 3 above) is correct on the hidden field return_url.
5. *** IMPORTANT *** The form should be fully tested prior to making the web page public to avoid losing any inquiries.
HOW TO INSERT A BRITE WEBFORM INTO A SQUARESPACE WEBSITE
1. Open your web form in the Inquiries section in your Account Settings (https://app.britebiz.com/settings/webToContact/index).
Note: If you have not created your web form, watch that video first.
2. Click the download form button on the right.
3. Locate the downloaded file and open it in TextEdit (Mac) or NotePad (PC) (right-click on the file and select Open With).
Mac Users: Check out this video if you are having trouble viewing the HTML code in TextEdit.
4. Log into your Squarespace account.
5. Open the contact form page and click Edit.
6. Click on the Add Block button and select the < / > Code block.
7. Copy all the HTML code from the downloaded file that is open in TextEdit / NotePad and Paste it into the Code Block in SquareSpace and click Apply.
8. Click Save (top left corner) to save the Page
HOW TO INSERT A BRITE WEBFORM INTO A WIX WEBSITE
1. First, open up the Wix Editor and click on the “Add” button in the left sidebar.
2. Then, select “Import” from the drop-down menu.
3. Next, you will be prompted to select the file that you want to import. Choose the file that contains your template.
4. Click “Open”.