Create Your Own Website Capture Form

Note: If you haven't already, please read Introduction to Website Capture to learn how Bridg website capture works.

The Bridg app can utilize your own HTML code for its website capture feature.  This enables you to design the form in the exact style that you want.  When it's ready, your Bridg Customer Success Manager (CSM) can help you perform tests.  Keep in mind that Bridg is not responsible for fixing or adding design elements, such as responsive elements, custom layouts, etc.  

You can download the basic Bridg capture form here if you need a starting point for creating your form.

 

Size Constraint

On large screens or windows the form dimensions will max out at 650px (width) and 550px (height). 

 

Input Fields

Below is a list of data that can be captured on a form using Bridg along with the value for the name attribute.  You can style your own input fields (drop down menus, text fields, radio buttons, etc.), but the fields must pass properly formatted values when the form is submitted.  

*For a location drop down, your Bridg CSM can help add in the appropriate code for having the list of locations auto-populate.   

Field HTML (Name Attribute)
First Name name="first_name"
Last Name name="last_name"
Full Name name="name"
Email Address name="email"
Birthday Month name="dob[month]"
Birthday Day name="dob[day]"
Birthday Year name="dob[year]"
Wedding Anniversary Month name="wedding_anniversary[month]"
Wedding Anniversary Day name="wedding_anniversary[day]"
Wedding Anniversary Year name="wedding_anniversary[year]"
Zip Code name="zip"
Location name="account_id"

 

Customizing the Success and Duplicate Email Messages

Both the Success and Duplicate Email Messages default to take up 100% of the width and height of the capture form.   If you would like create messages with your own designs, you should come up with code that would be placed in a div.  This code is separate from the capture form code.  

For example, the code below would show a success message that has a background image and white text.

<div style="width:100%;height:100%;background-image:url(image.png);color:#FFFFFF;font-weight:bold;">Thank you for joining!</div>

 

Best Practices

Here are some best practices for designing your own website capture form.

  • Have a clear call-to-action
  • Do not ask visitors to give a lot of information
  • Have your form respond to different screen sizes, such as mobile
  • Have field validation for your input fields

 

Getting Your Code into Bridg

When your HTML is done and ready to be tested, contact your CSM and they will upload your code to your account.  They can then direct you on how to test the form and implement it on your webpages.

 

Have more questions? Submit a request

Comments

Powered by Zendesk