Skip to content

Instantly share code, notes, and snippets.

@jarkin13 jarkin13/README.md
Created Sep 24, 2019

Embed
What would you like to do?
Tools Form Embed Instructions

BSD Tools Form Embed

Form Types

There are two available options that you can use.

  1. inline-index.html — The styling and javascript are built within the index.html template. When using this template, all you have to do is customize the html file(more information below), then copy and paste the code wherever you want this form to live.
  2. index.html - In the case you want the html, css & javascript all separate files, you will need main.css, main.js & index.html. This is a bit more advance and you will need someone familiar with your tools setup. You will need to customize these files appropriately(more information on this below) and upload main.css & main.js to where your form lives. You will then need to copy index.html code to your form's template. Someone will need to be responsible for uploading the files to your server, as well as updating the <script> & <link> url's in the index.html file.

Styling

Very limited styling has been applied and can be easily updated by someone familiar with css. The form uses a very limited amount of Bootstrap elements. Here is a list of the following styling:

  • Titles: <h1></h1> is the only title tag being used for the form's title with minimal styling applied.
  • Content: <p></p> and <a></a> are the only content tags applied with no classes and minimal styling. These can easily be updated.
  • Spacers: these include anything with bsd-h{number}. This identifies how much space is in between two div's.
  • Container: read more at Bootstrap. The form is only using their basic .container element.
  • Grid elements: read more at Bootstrap. The form is using .container, .row, .col-7 & .col-10 elements.
  • Cards: read more at Bootstrap. The form is using .card and .card-body elements.
  • Form Elements: read more at Bootstrap. The form is using .form-group as the wrapper for form inputs and .form-control for the actual inputs themselves. For the input's label .font-weight-bold is applied and .text-danger is applied to the required * for coloring.
  • Button: read more at Bootstrap. .btn .btn-primary is being used for the submit button.
  • Error Message: Within the javascript, we are showing/hiding the message in the javascript by adding display: none; visibility: hidden; and display: block; visibility: visible;. All error messages have a class .error-message.

Customize

Content Customizing

All content updates will be updated in the inline-index.html or the index.html file. Within the <div id="bsd-simple-signup"> simply change the text after the =, however it's very important you do NOT change the id of this. Feel free to update it's class. The following content that can be updated is:

  • data-title to change the form's title.
  • data-text to change the form's content beneath the title.
  • data-url to update the form's action URL.
  • data-tytitle to update the form's thank you page title.
  • data-tytext to update the form's thank you page text(below the title).

Styling Customizing

When using inline-index.html all additional styling can be applied/removed in the <head></head> section.

When using index.html all additional styling can be applied/removed from the main.css file.

Assets

After the content and styling is customized and ready to go live. I recommend minifying the files that you end up using. You can easily do this here:

If you are using inline-index.html, you will only need the HTML minifier.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.