Custom Form Section

  • Updated

 

This guide shows you how to add an existing custom form to your website. If you haven't created a form yet, you should do that first. To learn how to create, edit or manage custom forms, click on the link at the bottom of this article. To add a custom form to your page you click "+" and choose "Custom Form".

Like most sections, you can add a title and subtitle to this section. In the "Form" menu you can select the form you'd like to embed on this page. You can also modify some of its appearance by toggling the Custom Design option on the bottom.

Lastly, you can specify an additional action to take place once your visitor submits the form. For example, you can redirect your customer to a different page to thank them for signing up.

Form Actions

Redirect

You can redirect the customer to a different page when a form response is submitted. You can also pass the form response data as a query parameter.

  • Links

    Learn how to use links on Umso

Please note that the redirect will make a GET request to the URL passing the data as query parameters.
For example: GET https://example.umso.co/contact?First%20Name=Jane&Last%20Name=Doe&Email=janedoe%40gmail.com

Custom Code

When adding a custom form to your site or page, you can run a custom code every time a response is submitted. To get you started we allow you to get the data response easily by using the variable data on your custom code.

> console.log(data)


{
  "path": "/",
  "formId": "form_LydjlHsndJalJeBq",
  "siteId": "jbq570d6s2k9",
  "cs": "",
  "cid": null,
  "data": {
    "First Name": "Jane",
    "Last Name": "Doe",
    "Email": "janedoe@gmail.com",
    "How did you hear about us?": "LinkedIn",
    "Position": "Project Manager",
    "Would you consider a remote position?": "Yes",
    "LinkedIn": "",
    "Upload your resume": {
      "type": "file",
      "fileName": null,
      "fileId": null
    }
  }
}
Please note that using custom code on your site can cause side effects if not done correctly. Before adding a custom code, make sure it is well tested. Hiring a freelancer to help you with custom code is always a great way to bring your site to the next level. We, unfortunately, can't help with custom codes as we have limited support capacity.

Section Design

You can edit the section design by clicking on the top right tab called Design in your section details. You can change the theme background of your entire section, the color theme, link color and etc.

Form Content Design

If you want more customization on the form content, you can change its design by toggling the section option Custom Design below your form actions.

 

Was this article helpful?