Welcome to the Patch Forms Overview! Our Form Builder and Installation Options provide a versatile user-friendly experience for creating and deploying forms. Whether you're looking to gather feedback, sign up new clients, or conduct surveys, Patch Forms is your go-to solution. This guide will walk you through the creation and installation process step-by-step.
How to Create a New Form
Log in to the Patch portal, then navigate to the Forms module in the left-hand side menu.
Start by clicking on the purple plus button in the bottom right corner of the page.
Then enter a unique and descriptive name to your form for easy identification, note this naming is for internal use only and then click ‘Create’.
This will then open 'Step 1: Details' of the Form Builder.
To edit an existing form click the ‘pencil’ icon here:
To duplicate an existing form to use instead of starting from scratch click the ‘duplicate’ icon here:
*Please be sure to rename the form accordingly to not create confusion later in the process.
Please note some elements of a form are included by default. Branding of the form automatically inherits your Brand Settings including Logo and Brand Colors set in your account settings. These settings can be adjusted in Step 2 of the Form Builder. There are also a few Contact Fields included by default including First Name, Phone Number, and SMS On (SMS opt-in). These can be edited or deleted as needed in Step 1 of the Form Builder.
Step 1: Details
Top Content, Form Options, Bottom Content/Default Disclaimer
Top Content: Customize the header or introductory text.
Form Options: By default, every form comes pre-loaded with the following Contact Data Fields: First Name, Phone Number, and SMS Opt-In. When building a form you can keep these fields and add additional fields to the form, you can edit the existing fields, or you can delete them using the trach icon.
Choose Contact Data Fields: Click the ‘Add new element’ dropdown to select ‘Contact Field’ from the available options. Select from available form elements which include Contact Fields to determine which data you want to collect, Images within the form, or Custom Content using HTML, CSS, or Javascript.
The ‘Contact Field’ Editor’ dialog will open. In the first dropdown under ‘Type’ you will choose from the list of available contact data fields on your account.
If you do not see a field for the data you wish to collect you can add custom fields to your account by going to Account Settings -> Fields. Then come back to or refresh your form to see the newly created field in your list.
Depending on the type of contact field you select there may be additional settings that need to be determined.
Input Field Label: The default label is included for every field, to adjust this enter your own copy.
Input Field Type: By default, this is selected for each field type. In most cases, you will use the default. Example scenarios where users change the type is for Birthday so they can set how the users enter this data usually choosing between MM/DD vs. MM/DD/YYYY.
Edit Contact Data Fields: To edit the settings of a Contact Field that has already been selected click the ‘pencil’ icon. The ‘Contact Field Editor’ dialog will then open. From here you can change the field itself or adjust options like whether the field is required on the form, to only show the field if the contact hasn’t provided that information previously, or set filters to determine other factors in which the field will show.
Required Fields: By default, all fields added to a form are set to be required. To change this and make the a field options uncheck the required setting within the Contact Field Editor dialog.
Hide Field: You can choose to hide fields on a form if the user has already provided the data. Example: A user during checkout provided their email and opted in to email marketing, on the form you want to collect a complete customer profile. You can choose to hide the email address and opt-in field on the form to create a more seamless user experience.
Read-only: If you want to make a field on the form not able to be changed by the end-user (immutable) use this setting.
Filter Rules: To add conditions that will determine if a specific field shows on a form use the filter rules available at the bottom of the Contact Field Editor dialog. Any data point within your account can be used to filter in/out certain fields. You can also use these filter rules to have certain fields appear based on a response within the form. Example: If you are inquiring information from users about the types of products they are interested in, you can have additional fields/questions show up based on their selection. The user selects t-shirts from the form, once they do another field/question will then show asking about color, size, and type but if the user does not select t-shirt these additional questions will not show.
Start by selecting the data field you want to filter against.
Then choose the operation from the middle column. Operation functions include 'Equal to/Not Equal to', 'Empty/Not Empty', 'Before/After', 'Greater/Less Than', and so on. The operations available are dependent upon the data field selected.
Once you have set the operation you will need to select or insert the value for the data field. This can be a value from a predetermined dropdown list or some will require you to insert the value such as Tags. When inserting the value manually please ensure that what you enter is case sensitive and matches EXACTLY how it appears in other areas of your account. For example, if I want to have a field show based on a Tag that I am already using in my account and the Tag in my account is 'Loyalty Members' I will need to insert this exactly. If I were to enter 'loyalty member' this would not return accurate results.
Insert Image: To include an image within the form click the ‘Add new element’ dropdown and select ‘Image Element’.
Select Image: A button will appear in the section for you to select the image, you can choose from an image already uploaded to your account or upload a new one.
Preview/Placement: The preview will update to show how the image displays within your form. To move the image in between other fields or to the top or bottom use the up and down arrows in the data table.
Insert Custom Content: You can include custom content within your form. To do so click ‘Add new element’ and select Custom Content.
A dialog window will open and you can add custom content using either HTML, CSS, or Javascript. Be sure to label the custom content so it's easily recognizable in the form options table.
Bottom Content/Default Disclaimer: By default Patch includes a general disclaimer for your form. Disclaimers are not required unless you are collecting opt-ins from contacts. We automatically include the default SMS gateway for your account and a link to Patch’s privacy policy.
You can override this information by pasting your disclaimer into the text editor. HTML is required for styling when overriding this information.
To delete the disclaimer altogether insert a space into the text editor box.
You can also include other content at the bottom of your form here in the form of plain text, HTML, CSS, or Javascript.
Step 2: Design
Media, Form Styling, Submit Button Styling
Media: The logo set under Brand Settings for your account is selected by default. You can choose to not display your logo at all or choose a different logo on a per-form basis.
Form Styling: Select colors, fonts, and input styling to create an appealing form. By default, all forms will inherit your account's Brand Settings. You can override any of the default Brand Settings.
Font Family:
Font Size:
Background Color:
Content Background Color:
Input Font Color:
Input Background Color:
Link Color:
Max Form Width:
Reset All Styles To Default:
Submit Button Styling: Determine the call-to-action for your button and customize the design of your submission button.
Submit Button Text: By default, the copy includes 'SUBMIT'. To adjust the button text enter your own copy. Please note that the styling of button text is set to ALL CAPS regardless of how you enter the text.
Button Color: By default, the button color will be set based on your Brand Settings but you can override it on a per-form basis. Please note the styling set here will also propagate to the Finish Button on Step 3 for your Thank You/Success page. Copy/CTA for each button is set individually but styling applies to both.
Button Text Color: By default, the button text color will be set based on your Brand Settings but you can override it on a per-form basis. Please note the styling set here will also propagate to the Finish Button on Step 3 for your Thank You/Success page. Copy/CTA for each button is set individually but styling applies to both.
Step 3: Success
Success/Thank You Page Configuration, Redirect Options
Success/Thank You Page: Design a page that users see after a successful form submission. A thank you/success page is not required you can disable this feature and use a redirect only.
Success Page Title: By default, this setting is enabled, to bypass a thank you/success message and only use an automatic redirect, disable this feature.
To include a simple Thank You/Success page leave these settings enabled. Then set your page title and any additional copy you would like to include. Please note the built-in page title setting styling is limited to the font size and font color set in the design settings in the previous step.
If you want more options to determine the styling enter a ‘space’ into this field and use the ‘Finish Message’ instead which allows for more control over the format and styling.
Finish Message: Use the Finish Message section to include additional text above your form options.
Redirect Options: Set up a redirect to a specific URL for post-submission user engagement. You can either have this auto redirect or you can require the user to click a ‘finish’ button to be redirected. To use a ‘finish’ button you must have a thank you/success page enabled.
Redirect URL: Insert the URL you wish to redirect your users to upon form submission.
To have a Thank You or other message appear and then have the user click a Finish button before being redirected use both the Thank You/Success Page section along with a Redirect URL.
To have the form redirect without the user having to click a finish button enter the Redirect URL and disable the Thank You/Success Page.
You can enable the option for ‘skip redirect or thank you page if the user has already completed the form’.
An example of when you might want to use this setting is if a thank you message or page that is being redirected to includes an Offer, Discount, or Access point in which you would not want the contact to obtain this more than once.
Button Options: If you have the Thank You/Success Page setting above enabled you will set the button text here. By default, the button text is set to 'CLICK HERE TO FINISH', to override this enter your own text.
Step 4: Advanced
Automatically Set Data Field Values, Email/SMS Authentication
Set Data Fields for ALL Contacts: Insert data values into certain fields based on when the form loads and/or upon completion of the form. Common examples include setting SMS or Email opt-in status to yes (on), setting a Tag on the contact profile, and adding the Contact to a specific group.
Select Add New Field. -> Choose from the dropdown of available fields to set.
Once you have chosen the field you will set the ‘Operation’ based on the field type.
Then insert or select the value in the third column that will determine what is stored on the contact profile based on completing this form. You can set one or more data fields as needed.
For fields like Email or SMS Opt-in, to have these be checked by default when the user arrives at the form use this section to set each value that pertains to your field to 'Yes'. Click save, then once you refresh your form you will see these values checked by default.
Email/SMS Authentication Settings: Enhance security by requiring email or SMS authentication either before the contact can fill out the form or upon entering their Phone Number or Email Address. When using the authentication feature, upon entering a phone number or email address the system will prompt the user and then send a verification code to the contact that they have to enter to complete or submit the form.
Patch recommends this feature to prevent duplicate contacts from being created in your account. If authentication is not used on a form then every time a contact submits the form with the same email address or phone number a new contact record will be created. If you are not using authentication we highly recommend that you have a process for checking for and merging duplicate contacts regularly for your account.
To use Authentication you must first choose the channel you want the contact to use either SMS or Email. You can only choose one, and which option(s) show is dependent upon what data field is included on your form. For example, if your form does not use an Email Address then you cannot use this data field to send the verification code.
To not require a user to authenticate their contact information in order to submit your form click disable in the top right corner of the section.
If you want to require the user to authenticate their contact information before seeing the form click the setting for this here:
Step 5: Installation
Patch Pixel & Automatic Installation
Overview: The Patch Pixel can be used to automatically load Patch products on a web page. Due to caching, changes to product configuration may take up to an hour to propagate to the web page that has the Pixel installed.
Confirm or Install the Patch Pixel: To implement forms easily ensure you have the Patch Pixel installed on your site.
Shopify Installation: Shopify accounts who have installed the Patch App from the Shopify App Store should already be using the Pixel.
Pixel Code: For all other clients you will need to ensure you have installed the Pixel Script into the <head> of your website theme. For instructions on how to manually install the Pixel on your non-Shopify website click here.
Shareable Link: Use the link provided to share this form with your users. Form links can be used in Email and/or SMS messages, on Social Media, to link QR codes to, and much more. Note: If you do not see this option available click the save icon in the top right corner of the Form Editor, this setting will then appear. To use a Shareable Link you must click the checkbox for 'Render using V2'.
Automatic Installation Options: One-click pop-up (all pages of your site) or embed onto a webpage or section of your website.
One-click Popup: Click the purple plus button in the data table within the Automatic Installation section.
The ‘Form Setup’ dialog will open. By default, the form you are building/editing is selected.
Click the dropdown for Form Type and select ‘Popup’.
An additional setting to choose how this popup will trigger on your site will appear.
Choose from the available options of ‘Immediately On Page Load’, ‘After a delay’, or ‘On exit intent’. If you select ‘After a delay’ you will then need to determine the # of seconds until the popup appears. Most delay popups show around the 3-second mark.
There is an additional setting for determining whether this popup will appear over other popups on your site.
Once you are done make sure to save your changes. Your form popup will appear on your site automatically. Please note due to caching, changes to product configuration may take up to an hour to propagate to the web page that has the Pixel installed.
Embed using HTML ID: Click the purple plus button in the data table within the Automatic Installation section.
The ‘Form Setup’ dialog will open.
By default, the form you are building/editing is selected.
Click the dropdown for Form Type and select ‘Embedded’.
Insert a Unique ID: Choose a unique ID to use for embedding this form onto your site. Make sure this unique ID is easily recognizable and pertains to this specific form. Unique IDs must be globally unique. An example would be embedding a form on your contact page in which a unique identifier could be #contact-page-form.
When entering the unique ID for this setting start with a '#' (hashtag) and then include a '-' (dash) in between each word you are using.
If you do not include the # the element will throw an error and the settings cannot be saved until this is corrected.
Once you have set your unique ID you will then need to copy the script provided in the dialog.
Base script: <div id="your-element-id"></div>
Examples:
<div id="contact-page-form"></div>
or
<div id="blog-newsletter"></div>
Take the script you just copied and paste it into a custom code /HTML block on your site where you want the form to show. Note: Only one HTML element ID can exist per page.
Shopify Accounts: You have three options where this code will propagate onto your site without additional development. You will have to use the Custom Liquid block, Custom Liquid section, or the HTML code editor that is available on ‘Pages’ only. Where on your site these elements are available is dependent upon your theme or custom development.
Log in to your Shopify store. Using the left-side menu navigate to 'Online Store'.
A submenu will appear, depending on which page you want to embed the form on you will either go to 'Themes' or 'Pages'.
Theme Editor:
If you want to embed the form on a page under your 'Theme' you will then click on 'Customize' in the main view of the screen.
Navigate to the page you want to embed the form on. By default, the theme editor opens to the 'Home page'. Note: Not all pages listed within the theme editor have Custom Liquid Sections or Blocks that are compatible with the div script. Also, not all elements of the theme builders will have the options for either of these elements and this is controlled by your Shopify Theme and will vary per account.
Use the left-side menu to select where on the page you want to embed the form. For this example, we will use the Home page. Find a section that allows for a Custom Liquid block or scroll down to where you can add a new section and use the 'Add Section' button.
Then for the section type search or scroll down and click 'Custom Liquid'.
Note: If this page does not have either of these options then the form cannot be embedded using the Automatic Installation option. If you have a website development team or IT dept you can reach out to them to manually install a form on your site.
Usually the 'Add section' option is towards the bottom of the page, to adjust where the form is placed you can drag the element up or down.
The section editor will open and you will paste the div script you copied from your Patch account here. Then click 'Save'.
Please note the preview screen within the editor is not completely accurate in how the form will look on your site. Load the page in your browser to view. Please note additional styling will require knowledge of HTML and CSS that can be applied wither within the Custom Liquid section or within your Form Editor in Patch.
View in browser:
Pages Editor:
If you want to embed the form on a page listed under your 'Pages' you will click this menu option and choose from the available pages or create a new one.
Once you have the page opened you will use the HTML Code editor to paste your script into. You may need to add additional styling using HTML to format the form to make it display properly.
Save your changes and view the page. Note: If the form does not show immediately try clearing your cache. If this does not get the form to appear you may need to wait up to an hour for the pixel to propagate these changes on your site.
WordPress & Other Accounts: You will need to use the Custom HTML code block provided within your theme editor for Forms to propagate onto your site without additional development. Where on your site these elements are available is dependent upon your theme or custom development.
Log in to your WordPress site. Using the left-side menu navigate to 'Pages'.
Then find and click edit on the page you want to embed the form on.
Within the page editor/builder add a 'Custom HTML' block onto the page where you want the form to display. Please note how you add the HTML block onto your site depends on your Theme.
Paste the code snippet you copied earlier from your Patch account and paste it into the code block. Preview and save your changes by clicking 'Publish' or 'Update'.
Test the form on your site.
If this does not work some sites may require you to put the Form into an iframe. Here is the iframe snippet you would use. You will need to insert the form link into this script. You will need to style it accordingly for your needs.
<iframe src="form-link" width="600px" height="500px" frameborder="0"></iframe>
Patch Forms offers a comprehensive yet straightforward approach to form creation and deployment. By following these steps, you can effectively create forms that resonate with your audience and align with your brand. If you need any assistance or have questions, our customer success team is always ready to help.
Comments
0 comments
Please sign in to leave a comment.