Create a Branded Web Form to Grow Your Audience

This feature is Coming Soon.  

SlickText Web Forms are a great way to grow your audience and collect additional contact data, like a contact’s name, email address, and anything else you need to collect. Webforms can be a standalone landing page for capturing opt-ins from online ads, social media, or email newsletters. Or, you can embed a web form right on your website.

Web forms can be built from scratch or by using one of our fully customizable, pre-built templates that contain the required checkbox and verbiage to compliantly opt in subscribed contacts.

 

In this article:

Tour the Web Form Builder

Creating, Designing, and Editing a Web Form

Defining Webform Behavior

Activating and Launching a Web Form

Tour the Web Form Builder

Web Forms are located on the Tools page under List Growth.  

1. Once you’ve logged into SlickText, click on Tools in the left navigation menu. 
2. Click on Web Forms. This will take you to the Web Forms page where you can view and manage all of your web forms.
3. Click the Create Web Form button or click on any saved web form to navigate to the web form builder. 

Here’s a brief overview of the tools within the Web Form Builder that allow you to create and launch a web form:

Web Form Canvas: The canvas displays your web form. You build your web form by dragging elements such as text boxes, images, or buttons onto the canvas.

Sidebar Menu: The sidebar menu is to the left of the canvas. Click to expand each menu to build and edit your web form. 

There are five main sidebar menu items:

• Setup — Defines the basic setup of your web form.
• Design — Contains the elements that are the building blocks of your web form. Each of these elements has its own sidebar menu that appears when editing the element.
• Behavior — Determines the purpose of your web form, whether creating contacts or just updating them.
• Custom Code— Allows you to use your own css code to help design the web form, or java code to add analytics and tracking pixels to the form.
• Messaging — Allows you to edit the Double Opt-in Message that is sent to people who complete the web form. They'll have to reply with the word YES in order to complete the subscription process. The Opt-in Message is the final step, which confirms that they've been successfully subscribed.

In addition to these main sidebar menus, there are additional menus for each of the elements that can be added to the web form. For example, buttons, images and fields have their own menus you can use to customize that element. Clicking on elements on the web form displayed on the canvas will automatically show the appropriate sidebar menu.

Other Toolbars: Underneath the canvas and sidebar menu, there are additional tools that allow you to do things like preview, test, and launch your web form.

• Form, Success - Toggle between the web form views to edit them. 
  • Form — This is the web form.
  • Success — This is what people will see after they have successfully submitted their information via your web form.

• Preview and Testing — Once you’ve saved your web form, click on the beaker icon to preview or test your web form.

• Undo / Redo — Undo or redo previous changes.

• Hidden Elements — SlickText allows you to hide certain elements on different devices. Click the eye slash icon to see hidden elements.  

• Device View — Click on each device type to view and edit how your web form looks and acts on different devices.

• Active — Toggle on to activate your web form. This will allow people to submit information on the web form.
• Save — You must save changes you make to your web form.

Creating, Designing, and Editing a Web Form

The SlickText Web Form Builder allows you to start designing from a blank canvas or edit a pre-built template. For the best experience, it’s recommended that you start with a template.

1. Once you’ve logged into SlickText, click on Tools in the left navigation menu. 
2. Click on Web Forms. This will take you to the Web Forms page where you can view and manage all of your web forms. 
3. Click the Create Web Form button or click on any saved web form to navigate to builder. 
4. Expand the Setup menu item on the sidebar and complete the information.

• • Landing Page or Website Embed  — Choose whether your web form will act as a standalone landing page or be a form embedded on your website.
  • Name and Description — These are for your internal use and are not seen by your website visitors.
  • If the web form is a landing page, you will see this:
    • Page Title  — Create a title. This is what will be displayed on the browser tab for the visitor.
    • Customer URL Path  — You can customize parts of the url.
    • Final Page URL — This will display the web address for the form. Once active, you can click View to go to the page.
  • If the web form is a website embed, you will see the Embed Code. Copy this to embed the form directly on your website. 

  5.   Expand the Design menu item to begin building or editing your web form. Select a  template from our large library of pre-built web forms or start from scratch by dragging design elements and dropping them directly onto the canvas. (See below for a brief description of these items.)

  6.   When you drag an element to the canvas or click on an element that is already included in the web form, SlickText will immediately display the settings for that element in the sidebar. Expand the menu items to fully customize your web form.

 7.   Click Save.

 8.   Repeat the editing steps for the Success view.

 

 

Design Elements

Here is a brief explanation for the elements in the Design menu.

Term	Definition
Header / Text	A block of text that is formatted by default to serve as a header or website content.
Image	Allows you to search and choose a royalty-free high resolution image from an online library or add your own images to your web form.
Field	Fields are used to collect data. Any field in SlickText, including user-defined custom fields, can be added to a web form.
Button / Link	Buttons and Links can both be used to submit the form or navigate to a specified url.
Icon	Allows you to add icons from the SlickText icon library.
Compliance Statement	Adds a pre-written (editable) opt-in compliance statement to the form.
Container	Allows you to treat more than one element as a single group. Drag additional elements and drop them into the container.
Two Columns	A container that has two columns.
Three Columns	A container that has three columns.
Error Text	While you cannot edit the content of error messages, you can decide where to show them and how they look to website visitors.

When you click on an element on the web form, SlickText will immediately display the specific menu for that element in the sidebar as well as a canvas element toolbar.

• Delete — The trash can icon allows you to delete the element that is selected.

• Duplicate — Clicking the duplicate icon will copy and paste the element with its current design edits.

• Up Navigation — The up arrow allows you to more easily navigate to the next layer of the web form behind the current one. For example, click the arrow to move from an element to its container.

• Drag — Click and hold the drag icon to move an element within the web form.

• Image — Allows you to replace the image in an image element.

Defining Web Form Behavior

Web Forms can either create subscribed contacts or update existing contacts.

Contact Behavior — Choose whether the web form will be used to create new contacts or update existing contacts. 

Hide Mobile Number Field — If the form is used to update existing contacts, you will be presented with this option. When toggled on, SlickText will hide the mobile number field on the form if the contact is already known. If SlickText cannot determine who the contact is when they visit the form, the mobile number field will remain on the form.

Contact Lists — Select one or more lists to add contacts to when they submit the web form.

Click Save after making any changes.

Activating and Launching a Web Form

After building your web form and defining its behavior, you can now preview, test and launch your web form.

1. To preview and test your web form, click the beaker icon in the toolbar underneath the canvas.
   • Preview allows you to see what the web form looks like.
   • Test allows you to fully test the form to ensure it creates or updates contacts correctly.
2. Once you’re satisfied with your web form, expand the Setup menu item in the sidebar to review the set up and confirm whether the web form will be a standalone landing page or embedded on your website.
   • Landing page — Copy the Final Page URL and share it online.
   • Website Embed — Copy the Embed Code and add it to your website.
3. Toggle on Active to activate your web form.
4. Save any changes.