Example: Single-Page Form

Documentation

Pagination is automatically added to your form based on the number of fields in the steps array. Only having one field object means that pagination will be disabled and hidden.

For your reference, the config used for the form above is included below:

              
const config = {
  title: "If you'd like to work with Ulta Beauty, answer the questions below. We'll be in touch.",
  steps: [
    {
      fields: [
        {
          id: "company_name",
          input_type: "text",
          db_field: "company_name",
          input_label: "Company Name",
          txt_label: "Company Name",
          help_label: "Enter your company name",
          required: true,
          required_label: "Please enter a company name",
          layout: {
            grid: "full"
          }
        },
        {
          id: "company_url",
          input_type: "smart-url",
          db_field: "company_url",
          input_label: "Company Url",
          txt_label: "Company Url",
          help_label: "Enter your official website (with http:// or https://)",
          required: true,
          required_label: "Please enter a company url",
          layout: {
            grid: "full"
          }
        },
        {
          id: "work_email",
          input_type: "smart-work_email",
          db_field: "work_email",
          input_label: "Work Email",
          txt_label: "Work Email",
          help_label: "Enter your work email address",
          required: true,
          required_label: "Please enter a work email",
          layout: {
            grid: "full"
          }
        },
        {
          id: "job_title",
          input_type: "text",
          db_field: "job_title",
          input_label: "Job Title",
          txt_label: "Job Title",
          help_label: "Enter your job title",
          required: true,
          required_label: "Please enter a job title",
          layout: {
            grid: "full"
          }
        },
        {
          id: "company_description",
          input_type: "textarea",
          db_field: "company_description",
          input_label: "Describe your Company",
          txt_label: "Describe your Company",
          help_label: "Brief description of your company; keep it short and sweet – grab attention",
          required: true,
          required_label: "Please enter a description",
          layout: {
            grid: "full"
          }
        }
      ]
    }
  ]
};