Add and Customize RSVP Form in Weebly Site

RSVP stands for Répondez S’il Vous Plaît in French which means request for response. Generally Contact form allows user to contact site owner with the feedback or clarification whereas RSVP form is for the site owners to get information from the users. For example, site owner can get a confirmation from the users whether they will attend the event planned to be conducted using RSVP form easily than through contact form. Weebly offers a drag and drop RSVP form element and each fields can be customized separately.

Related: How to add and customize contact form in Weebly?

Weebly RSVP Form Fields

Elements column in Weebly editor will be automatically changed to form fields once you drag and drop a RSVP form element to you site’s content area. All form fields are classified into the following three categories and each field can be dragged inside the RSVP form.

Clicking on the form element will show three control options for the RSVP form – 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 use multiple forms in your site, the submissions can be viewed and identified 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 – 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.

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 user 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 and dropdown box will have additional options and you can enter as many as customized options for user selection or choose it from the predefined options list.

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 RSVP form in site’s content area, Pro users can also add a RSVP form in the footer area.

Viewing Form Entries

Responses to RSVP form entries can be viewed in multiple ways:

• Click on the form to see “View Entries” button, clicking which will open a new window with all form submissions.
• You will also receive an email alert whenever there is a form submission.
• View 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.

Below is how the contact form and RSVP form will look like on a Weebly site:

Tricks in Using Weebly RSVP Form

• Since size of the Weebly RSVP form can’t be adjusted by default, place “Spacer” elements beside the form element to adjust the width of the form.
• Ensure to have a “Options Buttons” or “Checkboxes” to avoid spam form submissions.
• By default the background color of RSVP form can’t be changed. Right click on the form on the published site and click on the “Inspect” or “Inspect Element” and find out the form #id of your RSVP form as shown below:

• Once you have the form #id add the below code under “Header Code” section of your Weebly page. Don’t forget to replace the form #id with your own #id.

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