Using Form Embed Codes

SharpSpring enables you to create multiple types of forms. These forms can be added to your website or landing page by form's code into the HTML. However, to display forms properly, you need to make sure your embedded code is placed in the right location. This article provides information on how to place your form on a website or landing page in SharpSpring.

Regarding Supported Forms

Native forms (forms on your website that were built without using a third-party service)

Native forms and third-party forms both rely on field mapping within SharpSpring, but only native and SharpSpring forms require a script tag embed. It is important that the code does not get altered after it is placed in the location where you want the form. Any alteration will prevent the form from rendering or tracking properly.

Currently, native forms can only track one form per page. If you have more than one form per page, you must provide an ID for the form so it can be tracked.

Regarding Embedding Code

When embedding form code into your site, be aware of the following:

• Each SharpSpring form has a different embed code. There is not a single embed code for all of the forms you create in SharpSpring. Make sure you are using the correct one when adding forms to a site.

• Code placement varies by site. There is no single location where the form goes by default. You will need to place the embed code in the portion of your site code that reflects where you want the form to display. As such, due to individual site styles and formats, each placement and resulting code will be different.

•Ensure that you are embedding code correctly. When embedding code, viewing your page source helps determine if the code is embedding correctly. If you use a CMS like Wordpress, be sure to be in Text mode when pasting the code into the editor.

• Some external plugins may try and rewrite or simplify the form embed codes. For example, Wordpress has a plugin called Autoptimize that rewrites and moves script blocks to the end of the page. You will need to either change settings or turn off the optimizer.

• You cannot use embed code with SharpSpring emails. For security reasons, most Internet service providers (ISPs) block scripts in emails.

Example SharpSpring Embed Code

SharpSpring embed codes appear like the following example code, though the account, formID, and domain values will vary from your values, as they are different for your company and form:

This will ensure that the Company field will be set to Acme Co. when the form is submitted. The visitor filling out the form will not even be able to see the field, let alone enter text into the field. This is useful for preventing bots from submitting data on a form.

Placeholder Text

Placeholder text is grayed out text that will appear on a field in a form. It will give the individual filling out the form instructions about the expected action in the field. For example, a name field may have placeholder text that reads Enter your name here.

You can enable placeholder text over fields by setting the _usePlaceholders parameter to true. As an example, consider the following:ss_form.hidden = {'Company': 'Acme Co.', '_usePlaceholders': true};

This setting also needs to be coupled with changes in your .CSS file to prevent the labels from showing up twice. Set labels to display: none; for text input fields.

Native Form Embed Codes

Native or third-party form embed codes need to be placed following the placement of your form. This is because the form has to exist on the page prior to SharpSpring's tracking code loading.

Native form embed codes will appear similar to the following example code, though the baseURI, endpoint, and src values will vary from your values, as they are different for your company and form:

Optional Native Form Embed Options

Some forms will need special parameters added to the embed code to work properly. By default, native form embeds will grab the first form on the page that uses POST to submit data.

When adding special parameters, do the following:

• Specify the form by ID. This is useful if there is more than one form on the page.

• Set the ID property. In the code, formID is the ID property on the form tag. Add this immediately after the endpoint is defined: __ss_noform.push(['form', 'formID']);

• Specify a function. This validates the form before it submits to SharpSpring.

• Set a validate function. In the code, validate is the name of the function that returns true or false depending on whether or not the form contains valid input from the user. If the form fails to validate, it will prevent the form from submitting the lead information to SharpSpring. Add this anywhere after the endpoint is defined in the embed:__ss_noform.push(['validate', validateThis]);