Embedding a Form in Your Site

You can publish your form by embedding it directly on your website. An embedded form uses the same field and form settings you set up in the form builder. All entries are stored in the Submission Manager. Also, you can use our Form Builder app on Weebly and WordPress.

Getting the Embed Code

To get the embed code for your site:

  1. Log in and go to Documents -> My Documents and open your form in edit mode.
  2. To the top-right of the form, click Publish.
  3. Choose to embed elsewhere:
    • Embed as HTML link
    • Embed with iFrame
    • Embed with JavaScript
  4. Click on the embed input to Copy Code.
  5. Paste the code in your web page.

Embed Code on WordPress

To get the embed code for your WordPress site you can use the AbcSubmit form plugin for WordPress. 

You can use the shortcode provided by AbcSubmit plugin in the publish section, add your forms as a block directly in the Gutenberg editor or add the shortcode directly in the old WordPress content editor using the AbcSubmit media button which will appear after AbcSubmit Form Builder installation on WordPress. 

You can also use our Publish section to choose the right embed for your WordPress page(inline form, popup or feedback button).

Embed Code for Weebly site

To get the embed code for your Weebly site you can use the AbcSubmit Form Builder app for Weebly.

Install the form builder app on Weebly, drag and drop our app in you Weebly site and the create your form and just save it on AbcSubmit and your form will be automatically published on your Weebly page.

Confirmation Options / Error Option after Form Submit

What people see after they submit the form depends on the pages you create in the form builder.

If you create a page of type:

Thank You page:  The thank you page with the confirmation message will display directly in the embedded form window.

Payment Error page:  The failed payment page will appear on the embed form window the payment is canceled or unable to complete the payment.

Embedding with JavaScript

To embed your form with JavaScript, you can copy and paste the JavaScript embed code into the HTML of your web page.

Autofit content mechanism
The embed code automatically adjusts the width and height of the form depending on the form page content size, font size, or if the form changes height due to next page navigation and so on. If you want to set a fixed height, you can use the iFrame embed.

Embedding with an iFrame

To embed your form using an iFrame, copy and paste the iFrame code directly into the HTML of your web page.

Submit button or some form content is not showing 
We estimate the height of your form in the iframe, so it may not display perfectly on all browsers or at all resolutions and font sizes. Sometimes, this means the submit button won’t display or that your form has too much white space.

To fix this, you can adjust the value of the height attribute in the embed code. Make sure to leave enough wiggle room for messages that might display when someone fills out your form since this embed code doesn’t automatically adjust the form’s height when different elements appear.

Embedding as a Lightbox

To embed your form using a lightbox, copy and paste the lightbox embed code directly into the HTML of your web page or in an embed code provided by your website builder.

Lightbox embed modes:

  • Automatically show lightbox after an interval of time
  • Automatically show lightbox when the page loads
  •  Automatically show lightbox once when a user attempts to close the tab

You can also change lightbox width, background color, text color, and button text if you need it to open on a button click.

Embedding a form as a Feedback/Support button

To embed your forms on your website using our feedback embed, copy and paste the feedback embed code directly into the HTML of your web page or in an embed code provided by your CMS.

Feedback embed position:

  • left-top on
  • left-middle
  • left-bottom
  • right-top on
  • right-middle
  • right-bottom

Embedding a form in an email
 

To embed your forms in an email, copy and paste the form link from Publish -> Quick Share and paste it on the email you want. It’s an easy way to get feedback after you close a support thread and you want to send the form from your email address.

Add HTML forms to your site in a snap—no coding required.

Spread the love