Add and Customize Contact Form in Weebly Site

There are many easy ways to add forms to your Weebly site. You can use default Weebly “Contact Form” element, connect forms from App Center and embed form codes from third parties. Being a native element, Weebly’s default “Contact Form” element is easy to integrate and manage the received form submissions easily through the dashboard or iPhone/ Android apps. In this article we will discuss the features of default “Contact Form” element and the ways to customize it. Other than contact form, Weebly also offers two other form elements – RSVP form and survey element.

Related: How to add contact form in WordPress sites?

Add Contact Form in Weebly

“Contact Form” is one of the drag and drop elements grouped under “Basic” group in Weebly site editor. Once you add the contact form on the content area and click on it, you can see the elements column in Weebly editor automatically change to form fields. All form fields are classified into the following three categories:

Form Fields:

• Short text box
• Large text box
• Options buttons
• Drop down box
• Check boxes
• File upload for Pro user
• Name, Email, Address and Phone number

Structure:

• Divider and Spacer

Basic:

• Title, Text, Image and Embed Code

Like normal elements, you can drag each field and add into your form. Clicking on the form element will show three options View entries, form options and save.

Form Options

Click the form options button to see advanced form options popup as shown in the picture below.

The customizing options available are:

• Form name – Enter name for your form. When you have multiple forms in your site, you can use the form names to view the submissions based on the form name easily.
• Email submission to – This is an email id where you will receive an instant alert whenever there is form submission.
• Confirmation message after submission – The confirmation option allows you to display an automatic response to the user after submitting the form. You can either set a text confirmation message or link any webpage. The text message will be shown within the form area after submission. You can connect any external webpage or your own site or store page in the link option which will be displayed after submission.
• Spacing – Used to adjust the spacing of top and bottom margins of the form element.
• Submit Button – Used to align the submit button left, center or right with respect to your form width. Also you can enter any free text like “Contact” instead of submit on the button element.

Note: General practice is to create a thank you page in your site with the customized information you want to show to the users and link it to the form. Thank you page will be displayed once user submits the form and provide more opportunity for the user to explore the links in the thank you page.

Field Level Customization

Clicking inside any of the form field will show a popup box applicable for that field. You can change the field name, make it optional or required, add instructions for filling and adjust the spacing of the field within the form. Making a required field will show a star mark on top of the field name indicating the user that is a mandatory field. Failing to fill the mandatory fields will not allow the form to be submitted and display a message “Please correct the highlighted fields” and the field will be highlighted in red color.

Instructions will help the users on how to fill that particular field and the help message will be displayed whenever the filed is focused.

Some of the fields like “Options Buttons”, “Checkboxes” and “Dropdown Box” will have additional options as shown in the picture below. You can enter as many as customized options for user selection or choose it from the predefined options list. The predefined options have long list of choices like Comparison, Gender, U.S States, How Long, How Often, Months of the Year, Days of the Week, etc.

Form Options for Pro User

Pro users will have the following additional form features:

• File upload – This is a pro field which helps the user to submit a form with an uploaded file. This will be a very useful feature so that the user can upload additional document or screenshot which will in turn help you to provide a better support. 20 MB is the maximum file size that can be uploaded in a form.
• Adding Form in Footer – In addition to adding form in site’s content area, Pro users can add a form in the footer area as well. Contact form can be added in the footer which will be displayed in the all the pages of a site.

Viewing Form Entries

Form entries can be viewed in multiple ways and the required response can be sent to the submitter accordingly.

• Click on the form to see “View Entries” button, clicking on which will open a new window with all form submissions.
• You will also receive an email alert whenever there is a form submission.
• View the form submissions right from the dashboard.

• You can also use Weebly iPhone or Android app to view and reply your form entries on the go.

Customizing Tricks for Weebly Contact Form

Adjusting Size of Contact Form

Size of the Weebly form can’t be adjusted by default. In order to change the size, place the “Spacer” elements beside form element and adjust the width of the form.

Reducing Spam Form Submissions

One of the biggest problem with Weebly contact form is the spam submissions – spammers and bots will submit spam entries and flood your mail box. Since Weebly does not offer CAPTCHA for contact form, handling spam submissions will be an annoying task for site owners. There are two ways to reduce the spams without modifying the code:

1. Add “Checkboxes” on the contact form and make it a required field. You can make the “Field Title” as “I am not a robot” and add one “Options Items” as “I am a human”. This will force users to check the box and the form can’t be submitted without checking it.
2. Similarly use “Option Buttons” and change the “Field Title” to anything like “CAPTCHA Check” or “Human Check” and make it a required field. Add single option item like “I am a human not a robot” or any text you want. Now the user needs to use choose the option in order to submit the contact form.

In both the above options, the automatic bots will fail to choose the checkbox or the option button thus stopping the spam entries.

Changing Background Color of Weebly Contact Form

Many users emailed us and asked for the way to change the background color of the Weebly contact form and here is how to do that. Each contact form will have a form #id after publishing the site. Right click on the contact form on a published site and click on the “Inspect” or “Inspect Element” option and find out the form #id number for your contact form as shown in the below picture. The form #id will be something like “form-1234567890123” and will be unique for each form.

Now go to Weebly editor and add the below CSS code under “Header Code” section of the page on which you have a contact form. Don’t forget to replace the form #id with your own #id.

<style>
#form-632853235871630597 {
background-color: beige;
padding: 15px 15px 0 15px;
border-radius: 10px;
border: 1px solid rgba(158, 158, 158, 0.22);
}
</style>

If you have more than one forms either you can customize them with different background colors or add all form #IDs like #ID1, ID2 and have the same styles for all the forms. If you have more forms then add the CSS under “Settings > SEO > Header Code” section or under “main.less” file.