Setting up a contact form on your website with the Elfsight Contact Form widget

Share
Find out how easy it is to set up your own custom Contact Form!

One of our most universal widgets that about anyone who has a website definitely needs is the Contact Form widget. It’s been around for some time, and it’s got some pretty good reviews. I’m writing this tutorial now to make sure that you, too, can use it and benefit from all its advantages.

Selecting a template

Depending on where you come from, you can start creating your widget in two ways.

If you’re a user of our cloud Elfsight Apps service, when you click on Create Widget in the app’s editor, you’ll see a choice of templates. Templates are a collection of ready-made widget designs that you can use as they are, simply adjusting the field values to your case, or use them as the basis for your own custom contact form widget.

If you’re using our standalone Contact Form plugin, unfortunately, you don’t have access to templates in your plugin’s editor. However, your plugin has all the settings you need to recreate any template from the demo, so you’re good.

So let’s start with selecting a template. You can choose any template that suits your use-case better, and use the widget’s setting to make it look the way you need, so anything you do with one template can be recreated with another one. Just keep in mind that if you need to change the template, you’ll have to recreate your widget, unfortunately, there’s no other way.

For this article I’ve chosen Support Request template. I know support requests so well, so it’s something that hits close to home 🙂 Let’s select it in the editor, and see how we can customize it:

Click Continue with This Template, and you’ll get to the editor screen. As you can see, it has 4 different tabs – Form, Settings, Layout, Style.

Let’s check the tabs one by one.

Form tab

On the Form tab you can set the form’s header, add, remove and edit form elements that actually make up your contact form, and configure the Submit button.

To edit your header, select Header section and you’ll go to header editor:

You can either deactivate the form header, so that it doesn’t display at all, or customize it to your liking. To deactivate the header, switch Show Form Header (1) to Off:

If, on the other hand, you need to customize your form’s header, you can start with entering its new title. After you’ve done that, you can use the text editor to enter and format the text you need to appear under the header. Please, pay attention to the rich text editor – you can make the font bold or in italics, create lists or even add links to this text:

You can also select one of the preset pictures for the header. To do it, click on Header Picture field, and you’ll get to the screen where you can select a new picture:

When you’re done customizing the header, you can go on to edit the elements of your form. You can edit, duplicate and remove the predefined elements, as well as add new ones.

Let’s see how we set up a form element exactly the way it’s right for you, as it’s the hardest part, and then we’ll just move on to the easy stuff.

To add an all new element to your contact form, you need to click on Add in Form Elements section:

To edit an existing element, you need to click on its name in Form Elements section, and you’ll be redirected to the screen where you can edit an element.

To add an element, click Add and you’ll be redirected to a screen where you can select an element to add to your form:

As you can see, there are different types of elements you can add. Let’s add Date & Time as an example. Click on this input, and you’ll see an editor where you can set up this element to your liking:

The label of the element is basically its heading that’s going to be displayed on your form. You can keep the default one, or enter your own.

The second part of this element is Placeholder. This is something that will be displayed in the field, as a kind of a hint for your visitors. For instance, if you need to give them the chance to set an appointment with you, you can enter Appointment Time to this field.

The third section here is Date and Time. As you can see, you can select three different formats – date alone, date and time, and only time. The datepicker as such comes up when you click on the field:

If you set this option to Date & Time, the picker will change somewhat, allowing you to set the time after you select the date:

In the next two fields you can select Date format and Time format, to get the ones used in your country.

To make Date an obligatory field, you need to switch the toggle in Make this field required to On. This works in the same way for all the fields you need to make obligatory.

The rest of the form elements are added and configured in basically the same way. Some of them are more complicated than the others, and I will shortly publish another article to explain each element in greater detail.

Whew, this was the hardest part 🙂 The rest is just a piece of cake.

Now that we have added all the fields we need to the form, let’s change the text on Submit button. To do it, you need to click on Submit Button section on Form tab. Once you’re on the editor screen, you can change the Submit text to anything you like:

This is about all there is to do on Form tab, so let’s move on to Settings.

Settings tab

So let’s take a look at the available settings:

The first thing that you can do on this tab is set the actual email you need to send the submitted forms to. Please, keep in mind that this setting doesn’t automatically take your login email. This field displays a sample email by default, so make sure that you’ve added your own email address to it:

Settings tab is where you get to choose what happens after a user has submitted your form. You have three options that you will find in Action After Form Submission field:

If you choose to display a thank you message after the form is submitted, you can edit the default message in the field below or leave it as it is. If you choose Redirect to Page option, you can set the URL of the page you need to redirect the user to after the form is submitted. Selecting Hide Form will conceal the form for the user who has submitted it.

While you’re on the Settings tab, please, pay attention to Recaptcha Type field. If you’re using our cloud app, you’ll have two types of recaptcha – checkbox and invisible. If you select Invisible, your user won’t see the recaptcha and won’t have to check it, but it’s still going to be there, protecting you from all that spam.

If you’re using our standalone WordPress Contact Form plugin, you will also have the third option of deactivating the Recaptcha altogether.

This sums up the Settings tab, and we can move on to Layout.

Layout tab

The most essential thing you can do on the Layout tab is actually choose one of the three predefined layouts – default, boxed or floating. Floating layout is about the most popular choice, as it allows your website visitors to contact you quickly, from any part of the site’s page, without having to scroll back to the form.

The next field on this tab is Width. This field is important from the point of view of responsiveness. To make sure that your form is responsive, please, keep the value in this field as it is, or set it to auto.

Style tab

Here’s where you can select the style of the widget (my personal favorite is classic rounded 🙂 ), the color and add a custom CSS, in case it’s necessary.

CSS are small bits of code that are often used to make individual changes to a widget. If you require any specific widget customization, chances are that you’ll be doing it via CSS. So to make these codes work with your widget, you need to add them to Custom CSS field and save the changes.

So this is about it. I hope this article was helpful, but if any questions remain, please, contact our Support Center and I’ll be happy to help!

Cheers!

Create your Contact Form right here!

Use the fully functional demo below to check out what the app can do!