How to Create a Contact Form Popup

Contact form popup is a perfect way to be closer to your users. Simply add a contact form on your website and your users can contact you in case they have any questions or suggestions. Due to following the step-by-step instructions presented in this knowledge base, you will learn how to make an eye-catching contact form popup and make your offers as attractive as possible.

Steps to Follow

1. In your dashboard, go to the “Popup Builder” section and click on “Add New”

2. Select the “Contact form” popup type from the menu

3. Then, enter a title for your Contact form popup (visible to the admin only)

4. You can add an image and a text to your contact form popup in the HTML editor

5. Pass on to the following “Contact popup additional options” section and set up configurations specific to the contact form popup type.

  • Herein, set up form design configurations such as form background color, form background opacity and form padding. Then, you can change the labels of “Name”, “Subject”, “Email” and “Message” placeholders.

  • Set the “Error message”, i.e. how you should inform of an error that occurred in the process of sending the message. The default message runs as follows: “Unable to send”. You can also change the label of the “Required field message” placeholder. The default message runs as follows: “This field is required”. While filling out the contact form, your site visitors might casually provide an invalid email address. In the “Invalid email field message” section, fill in the message you would like to use to ask your visitors for a valid email. The message set by default is as follows: “Please, enter a valid email”.

  • In the following “Inputs’ style” section you can set inputs’ dimensions and colors.

  • In the “Message style” section you can set message field dimensions and background, text, placeholder colors.

  • In the “Submit button style” section you can set submit button dimensions, title labels, button background and text colors.

  • Then, select the action to be performed after successful form submission. You can show a success message, redirect your subscribers to another URL, open another popup or choose to hide the popup. If you choose to show a success message, you can decide how its text should run. By default, the text of the success message runs as follows: “Your message has been successfully sent”.   

6. Then, choose “Selected posts” option from the dropdown menu in the “Display Rule” section if you want to show your contact form popup on a particular post (posts). In the “Is or is not” option select “is” from the dropdown menu. Well done! Now, in the “Select Your Posts” option, start typing the name of the post where you want the contact form popup to appear, click to select the post.  

7. Setting up the dimensions of your contact form popup, the best option to have a responsive popup is to use the "Responsive mode" with the “Auto” option for your popup dimensions. If you set the “Auto” option, the size of the popup will be counted automatically according to its content. Or else, select an amount of percentage from the dropdown menu thus specifying the popup size on the screen in percentages. Select the “Custom mode” if you want to give customized dimensions to your popup.    

Let’s have a look at a sample Contact form popup