Creating and Publishing a Form

Creating and publishing forms is straightforward with SureForm’s intuitive drag-and-drop editor.

In this guide, we’ll show you how to create a complete form without any coding and publish it on your WordPress site.

Let’s get started!

Note: Before we start, please ensure you’ve installed SureForms on your WordPress site.

Adding a New Form

Go to your WordPress dashboard and follow these steps to add a new form:

• Click on the New Form option under your SureForms dashboard.

• You can create a form from scratch or create a form with AI. In this example, we’ll create a new form from scratch:

Adding Form Fields

It’s time to add the necessary fields/blocks to our form. Here’s how you can do it:

• Provide a form title to your form.

• Click on the “+” icon to add the preferred block.

• Optionally, you can directly drag any of these blocks from the quick action bar:

• Select the individual field and go to “Block” to access the block-level settings.

Here, we have multiple options available. We’ll show you some of them:

• You can modify the field label directly within the preview.

• These percentage boxes let you adjust the width of the field. You can decide how many columns an individual field takes up. For example, the 75% field width reduces the width of the following field:

• To delete a block, just select it and press the delete button on your keyboard, or you can click on the three-dot icon and hit “Delete”.

This will delete the selected field.

Basic Block-Level Settings

When creating forms, understanding and adjusting the basic settings for each block is essential. Here, we’ll walk you through some of the common options available for each form field to help you customize them according to your needs:

• Select a block to access its block-level settings on the right side.

Every form field will have the block settings divided into two tabs: General & Advanced.

• The Advanced tab includes an option for “Additional CSS Classes,” allowing you to add your own CSS class to further customize and style individual form fields.

The General tab will have the following options that you can adjust as per your needs. Here are some of them:

• Required: Toggle this option to make the field mandatory. If users try to submit the form without filling in this field, they’ll see an error message.

• Error Message: Customize the text that shows when a user doesn’t fill in a required field. This field only shows up after enabling the “Required” toggle button.

• Default Value: Set a placeholder value that appears inside the field when it’s empty. This value appears by default in the given field and provides users with an idea of what to enter.

• Maximum Text Length: This allows you to control how many characters a user can enter in the text field. You can adjust this limit using a slider.

Note: SureForms provides different block-level settings for different blocks. Most of them will vary from block to block.

Form Settings

These are the form-level settings that appear when you click anywhere on the form editor.

Instant Forms are forms you can send directly to someone without adding them to a page or setting up the styling.

• To enable it, click on the Instant Form button at the top-right and enable the Instant Form toggle button.

• You can change the URL of your form by scrolling down a bit here.

• Under General > Email Notification, you can configure the email address where form responses are sent.

• Click on the “edit” icon to configure your email address.

Note: Ensure that you’ve configured SMTP to receive email notifications whenever someone submits your form.

• Under Form Confirmation, you can configure what message users see after submitting the form or which page they are redirected to.

• Under General, you can configure your form labels to appear as placeholders inside the form fields.

This setting will only show up on the front end of the form and not in the editor.

Form Styling

You can customize your forms under the Style tab.

• Under Form Container, you can change the primary color displayed throughout the form.

• Adjust the “Text Color” to change the color of text, labels, form fields, and placeholder text throughout your form.

• “Text Color on Primary” changes the color of text that appears on fields having primary color. For example, the text on the Submit button.

• Adjusts the submit button alignment on the form.

Advanced Form Settings

These are the settings available under the Advanced tab.

• In Anti-Spam Settings, you can enhance the security of your forms with options like Google reCAPTCHA, CloudFlare, or hCaptcha.

• You can customize your form to match your requirements under Custom CSS here.

Publishing & Displaying Your Form

Once you’re done customizing the form, click the Publish button here.

This will publish the form on your site.

Since it’s an instant form, you can share this link with anyone, and they can view and submit their response directly.

That’s all! We hope this article was helpful. Reach out to us for any doubts or questions!