Styling of registration form

[MortenHofft]

Hi @camiplata

The site is starting to look great!

Regarding the styling of the registration page form - The theme is build of Bulma. So you have access to those classes. You can see how Bulma styles forms here https://bulma.io/documentation/form/

I can also look into default styling.

[MortenHofft]

I just looked at the registration form. I do not think there is much i can do on a theme level to help here. The form needs to be crafted to use Bulma classes etc. Let me know if you need help in rethinking the registration form to work on this website

It seems this is a registration similar to https://www.gbif.org/become-a-publisher

Would it make sense for the theme to support this for everyone (who enables it). It could be something that all node type portals needed? It looks like the existing form is taken from WordPress?

[camiplata]

Hi @MortenHofft, this was a very rough copy for trial from what we have at https://sibcolombia.net/registrate-como-publicador/, the form is made with HTML on WordPress and connected to a google spreadsheet. I do not have experience with HTML so I'm learning before going ahead.

Indeed we will have to rethink the form, I'll let you know as soon as we are at that point.

I do think having a theme that suports forms will be useful for everyone, maybe we can ask the other nodes on Tuesday what do they think.

[camiplata]

I did check Bulma and made some trials, it looks easy to implement later I'll have to see how to conect with google spreadsheet, and as said above to rethink the form, as it current working form at sibcolombia.net shows different options according to the answers given .

[camiplata]

Hi @MortenHofft , I have finally come back to the registration form, it was pretty easy to build, but I'm now stuck with the connection between the form and a google spreadsheet. For this, I did a trial with a simple form with only a couple of fields but it didn't work. I'm wondering if you can enlighten me on the path I should take or if you can recommend me some additional documentation or tutorials.

What I have done following mainly this tutorial:

1. Trial form, all fields have a 'name' that matches the google spreadsheet.
2. Trial google spreadsheet, column names match the field names of the form
3. Add some code to the google spreadsheet to receive answers to the form
4. Get the URL from the google spreadsheet
5. Add a javascript code to the form with the URL from step 4 so the answers are sent to the google spreadsheet.

I was careful to follow all steps, but it did not work, so I probably missed something important on the code due to my lack of expertise, or I need to add some additional code to the base theme for the javascript code to work, or use an extensión different to .md.

Thank you in advance.

[MortenHofft]

A plain classic form looks something like this

<form action="/where/to/send/data">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" value="John">

  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname" value="Doe">

  <input type="submit" value="Submit">
</form> 

In your case you haven't wrapped your form fields in a form. That looks like it could be a mistake.

It is also very common to have some javascript code that runs before sending the data. It could be validating the form, send the data in a custom format somewhere and provide feedback to the user in the form of a popup. It is very likely that sending the form content to Google will require this. I do not see that you have added any javascript?

The javascript most likely will have to be added after the form as it will probably have some code that attach events to the form, so it has to exist when the code is executed.

So you can add that code in the end of your markdown document

Also be aware that the tutorial you are following are 4 years old. It might be outdated

---

I imagine you can use the google form approach multiple ways:

• redirect to the google form on the google site (simplest)
• embed as iframe (simple)
• integrate in site and send with custom javascript (somewhat complex and what you are striving for currently).