Skip to main content

Setup Forms

Web forms are a crucial aspect of designing and developing websites and web apps. They offer a user-friendly interface for visitors to provide and submit information, whether it's text, digits, selections, or files. From surveys to registrations to feedback, web forms serve a wide range of purposes, ensuring seamless communication between websites and their users.

There can be various types of forms that are used on a website, like:

  1. Contact Forms: Users can send messages or inquiries to website owners or administrators.

  2. Registration Forms: Users can create accounts or sign up for services by providing their information.

  3. Login Forms: Registered users can log in to access their accounts.

  4. Search Forms: Users can input search queries to find specific content on the website.

  5. Order Forms: Users can make online purchases or reservations.

  6. Subscription Forms: Users can subscribe to newsletters, updates, or notifications.

  7. Feedback Forms: Users can provide feedback, suggestions, or report issues on the website.

  8. Survey Forms: Users can participate in surveys or polls.

  9. Data Collection Forms: Businesses and organizations collect data from users for various purposes, such as market research.

In many cases, when a form is submitted you would want to send an email to certain people which is something like an automated task that says when this form is submitted, send this email to these people. Experro allows you to configure this easily, with the following steps:

Pre-requisite: You have created a form on your webpage.

Let's configure which email to send when this form is submitted:

  1. Go to your Experro account and head to your workspace, then navigate to Settings > General > Forms 
  2. Click on the button 'Create Form' and enter the name for the form, and description then hit 'Save' button.
  3. The form will be created and now you have to configure a few details for the email that is to be sent for this form's submission.
    1. TO: Enter the email of persons to whom the email should be sent.
    2. CC: Enter the email of persons who should be in CC.
    3. BCC: Enter the email of persons who should be in BCC.
    4. Reply To: Enter the email address to where replies would appear.
    5. Subject: Enter the subject line for the email.
    6. Body: This is where you can enter the body text for email, you can also use liquid js here. So you will need to provide the keys that you have defined in your form for the details that are captured in the form and should appear in the email.
  4. Hit the Save button once you are done and copy the Form-ID that you see at the top.
  5. You will need to use this form-id in the function that you are calling on submission of the form.

Let's say you have configured your form in such a manner that it has two fields: Name and Email. It is defined in your code and we are also assuming their value which can be dynamic too.

formData = {
   "personName" : "Charles Xavier",
   "personEmail" : "charles.xavier@example.com"
}

If you are calling a function on form submission then you have to pass the form-ID and this formData in that function, for example:

ExpMailForms({
   formId: 'f135d9d6-7a22-11ee-b962-0242ac120002',
   formObject: {...formData, },
});

These keys that are defined in your code for name and email should be used exactly like that in your form body, for example:

Hi Adam,

We have an enquiry from <%= personName %> and their email is <%= personEmail %>.

Please get back to them as soon as possible.

Thanks

That's it. Now perform a form submission and check the inbox of the email mentioned in the To field.

Related articles