Sonido Web Forms

Sonido Software includes a web form builder that allows you to create custom web forms to embed on your website. These forms could be used for a "Contact Us" page to collect website visitor information, for promotions or landing pages on your website, generally used for capturing new leads, and much more. 

Similar to traditional contact forms used to collect contact information, Sonido streamlines this process by automating the creation of new leads within your Sonido account when a website visitor submits a web form. You can create as many unique web forms as needed within Sonido to embed into your website, each with its own ability to redirect users and facilitate more advanced conversion metric tracking through systems like Google Analytics. 

For the best user experience, please manage your Web Form settings on a larger screen. Mobile devices may not have large enough screens to provide an optimal setup experience. 

WEB FORM BUILDER LAYOUT

The layout of the web forms builder is arranged with the form field selection and styling options in the left-hand column (yellow below), and the form selection, form preview, form submission notification recipient, action after submission setting, and website embed code in the larger right-hand column (blue below). The form builder is interactive, and you will see the changes that you make to the form in the preview section. 

ACCESS WEB FORMS

You can easily access any web form that has been created within your account by selecting the "Forms" dropdown and then choosing the web form from the list. Once you have selected a web form, you can make changes to or continue building the form as needed.

RENAME WEB FORM

Once you have selected any web form, you can easily rename the form by selecting the "Rename Current Form" icon. In the dialog that appears, you can rename the form to display however you would like, then select the "Rename" button to confirm the change.

DUPLICATE FORM

If you'd like to duplicate an existing web form to carry all the formatting options forward, you can do so. Once you have the desired web form selected from the forms list, select the "Duplicate Form" icon to make a copy. A dialog will appear prompting you to provide a name for the copy of the form. Add a name, then press "Save" and your new form will be available.

DELETE WEB FORM

To delete a web form, you will first select the desired web form to be deleted from the list of forms. Then, once the appropriate form is displaying in the preview, select the "Delete Current Form" icon. A dialog will appear prompting you to confirm that you want to delete the form. Press "Delete" to confirm the action and delete the form from your list of web forms. 

Note: Deleting a form is permanent and cannot be undone.

After adding all necessary form fields and formatting options to your web form, you can then complete the final settings on the web form before embedding it into your website.

SEND TO

The "Send To:" field is where you specify who will receive an email notification every time the contact form is completed and submitted by a website visitor. This email notification will include details such as the fields that were populated by the website visitor and which form was used for the submission. 

Simply populate the appropriate recipient email addresses in the "Send To:" field and press enter after adding each to apply them to the field. At least one recipient is required for every web form.

ACTION AFTER FORM SUBMISSION

The "After a successful form submission:" field allows you to specify what action the web form will take after a web form submission is complete. You have two options to select from: 

• Confirmation Message - If Confirmation Message is selected, you will then enter what message you would like displayed after a successful form submission. A website visitor would see this message immediately after submitting a web form.

• Redirect URL - If Redirect URL is selected, you will then enter the URL address that you would like to redirect to after the web form is submitted. In many cases, this could be a landing page on your website, such as a thank you page or the homepage. Note: Make sure that you populate the full URL address, including https:// or another valid prefix.

HTML EMBED CODE

Once you have the web form set up and ready for use, you can copy the embed code to place the Sonido Web Form on your website!

In the "HTML Embed Code" section, simply press the "Copy" icon to copy the full HTML code to your clipboard, then navigate to your website and enter the code into an appropriate HTML element block in the web page editor.

There may be a small amount of formatting required to make your web form fit in your web page without requiring any scrolling. As every website builder platform is different, we cannot say exactly what will be appropriate for your website, but we can provide some example of what may work for you to view the web form as expected in your website.

ADJUST THE HEIGHT VALUE

With some website builders, such as WordPress, we recommend updating the "height:100%" code to reflect a pixel setting so that you can control the height of your web form and allow it to display on your web page without the scroll bar appearing. You may need to update and save the height value through a guess-and-check process until you feel it is the correct height.

ADJUST THE HTML ELEMENT BLOCK HEIGHT

With other website builders, such as WIX, you may find that there are controls built-in for adjusting the visual element blocks. No change to the Sonido Web Form height element is necessary, as you can simply adjust the height of the HTML element block directly until your web form previews as expected.

UP NEXT

• Web Forms Setup
• Web Forms Styling
• Web Forms Submissions