Skip to content

Instantly share code, notes, and snippets.

@jarkin13

jarkin13/README.md

Created September 24, 2019 04:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jarkin13/d57ab45507e61dfd88b41a81172fee01 to your computer and use it in GitHub Desktop.
Save jarkin13/d57ab45507e61dfd88b41a81172fee01 to your computer and use it in GitHub Desktop.
Download ZIP
Tools Form Embed Instructions
Raw
README.md

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